Editing Captions in Sliders

[Mr.Vibe]

Recent Query from Edmund-Cluett:

About the vibecom caption slider: Can I adjust the margin+/or padding of the captions to make them appear ‘higher’ on the slide? I want to use a relatively small (2/3 column) slider with not-so-tall photos … and, at the moment, the ‘read more’ is off the bottom of the slide – but there’s lots of space at the top! Also, can I adjust the font-sizes of the slide captions? I appreciate your help. Thanks.

[Mr.Vibe]

Here's how you can do it:

1. Go to your WP Dashboard -> Appearance -> Editor
2. Open Style.css (make sure you're using the child theme).
3. Add following content at the bottom of the style sheet in the editor:

.slide_caption .slide_title{
   top: 300px !important;                            /* Adjusts spacing of the Caption Title form Top */
   left: 200px !important;                           /* Adjusts spacing of the Caption Title form Left */
   font-size:20px !important;                      /* Adjusts spacing of the font size of Caption Title */
   background: #222 !important;                /* Adjusts background color of Caption Title */
   color: #ffffff !important;                        /* Adjusts Title color of Caption Title */
   padding: 10px 15px 8px !important;         /* Adjusts padding of Caption Title */
}


.slide_caption .slide_content{
....Same parameters as above...
}

.slide_caption .slide_action{
....Same parameters as above...
}

For Simple Slider captions :

.flex-caption {
     top: 10%;
     left: 10%;
     background:#444;
}

.flex-captions h3{   /*...Flex caption title CSS...*/
  color: #ffffff;
  line-height: 12px;
  padding: 20px 5px 10px; 
  font-size:20px; 
}


.flex-caption p{
      line-height: 14px;
       padding: 0 5px;
       color: #ffffff;
       font-size:12px;
}

.flex-caption .button{
   margin: 0 0 10px;
}

[Edmund]

Thanks for this.
Making the css changes seems to have affected the lovely 'slide in' feature of the captions. They appear where I will want them and I can change font-sizes etc, but they are static and have lost the transparency. Any quick fixes?
Thanks for all your hard work - I think your work is phenomenal ... I'm never going back to building from the ground up!

[Mr.Vibe]

To get backt he transparent background, simply replace the

background:#444;

in above code to

background: url('../img/slide_bg.png');


" I am adding your request to be able to change the location of captions as a functionality request. ", so this will be available in future updates.

[Mr.Vibe]

To get backt he transparent background, simply replace the

background:#444;

in above code to

background: url('../img/slide_bg.png');


" I am adding your request to be able to change the location of captions as a functionality request. ", so this will be available in future updates.

[Edmund]

...and the slide-in animation? (which seems to have disappeared)

[Mr.Vibe]

The slide in animation has disappeared due to !important that we've put. You can try removing the !important.

If that doe snot work then you'll have to edit CSS file slider.css in the CSS folder which is not accessible via WP Dashboard.

- >So, to do this unzip the vibecom.zip file
-> Open file CSS->Slider.css
-> Add your code at the bottom of this file.
-> save and zip the folder back again.
-> Install as theme.

[Edmund]

Yes - you are right - it's the important that does it.
Do I change it in the Child theme, or the Parent?

[Edmund]

I've answered it myself - sorry. It's the parent. Does this mean that I'll have to re-do this with every update?

[Mr.Vibe]

Hi,

Attached is a new child theme which will add your custom CSS changes at the very top of footer above all the javascripts.
Now you can paste your changes in the custom.css file of this theme and you won't have to copy paste the changes again and again in the parent theme in future.
vibecomchild.zip



( v )