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.

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

  • 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 '14 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 '14 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 '14 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 '14 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 '14 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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