2

I need to move the text shown in the slide component in order to center it.

Here is the site: http://cmarosac-cp52.webjoomla.es/fav/

The class is: flex-caption

.flex-caption {
width: 25%;
height: 96%;
padding: 2%; 
margin: 0; 
position: absolute; 
left: 0; 
bottom: 0; 
background: rgba(0,0,0,.3); 
color: #fff; 
text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
font-size: 14px; 
line-height: 20px;
}

I would like to locate what is the path for the file where I use the class flex-caption.

Improve this question

2 Answers 2

Reset to default
2

You can use the following CSS:

.flex-caption {
    height: auto;
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
}

This will extend the caption box to the full width and position it at the bottom of the slider.

You need to go to line 252 of:

modules/mod_simple_responsive_slideshow/theme/flexslider.css

I assume you used your browser console to get the CSS for this element, so I hope you realise the browser console also tells you where the code is located ;)

Hope this helps

Improve this answer
8
  • In addition, you should add text-align:center in order to center the text. But I recommend using a css override, see General Usage in this post, or your changes might be lost if you upgrade the module later.
    – johanpw
    Oct 20, 2014 at 19:42
  • My objective is <img src="s8.postimg.org/up8xhpgp1/slide.jpg"> I can locate flexslider.css, my problem is locating the file that is using the class flex-caption. I suposse that this file must be index.php.... but I´m not sure.
    – sistemas sistemas
    Oct 20, 2014 at 20:52
  • I could simply say reduce the height and add a top padding but that's not a very good approach. The best method would be to create a template override and wrap the caption text p element within a relatively positioned div, then start messing around with the CSS
    – Lodder
    Oct 20, 2014 at 21:02
  • Lodder, could you say me where I could find the file where I have to modify the classes for P element? I´ve been searched but I can't find it... I'm new with templates desing
    – sistemas sistemas
    Oct 20, 2014 at 21:22
  • Probably something like modules/mod_simple_responsive_slideshow/tmpl/default.php but not entirely sure as I don't know this module
    – Lodder
    Oct 20, 2014 at 21:23
0

It's not easy to achieve what you ask for in your image, due to the (poor) way the slider renders it's code.

enter image description here

But here's a suggestions on how you can center the text vertically:

 /* Add left padding to go clear of arrow */
 p.flex-caption {padding-left: 50px;}

 /* Add empty box above */
 p.flex-caption:before {
  content: " ";
  display: block;
  height: 35%;
}

This will not center the text exactly, but close.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.