CSS tips for the Slider

[mharpen]

For anyone interested, here are 2 CSS changes you can put in the Theme Options > Styles > Custom CSS.
1) These 3 lines remove the large gray overlay block displayed on Full-size images when you use Header or Description text. It also adds a dark background to just the text itself.

.full-image .content {background-color: transparent !important}
.full-image .slide-title span {background-color: #222; padding:0 5px 0 5px}
.full-image .slide-description {background-color: #222; padding:0 5px 0 5px; display: inline-block}

2) The next line can be used to pre-set the slider height to whatever you want. I’m not fond of how IE9 displays the page and the slider spinner for a few seconds, and then pushes the page down when the slider finally loads. This CSS allocates an empty space for the slider. You’ll need to change the value to match what your slides-wrapper div height is depending on the size of your slider images crop setting (mine is set to 280 height on the large slides). So 270px works for me. You can check yours using Firefox Firebug util, or IE9’s F12 Dev tools.

.slides-wrapper {height:270px}

• This topic was modified 8 years, 4 months ago by Jason Bobich. Reason: Fixed selector on last line

Topic

[mharpen]

Update: CSS below improved. This also changes loader.gif position to center vertically. Also, the slide name suffix on the .slides-wrapper class is removed since all standard-sliders use the same dimensions on the site. Jason, feel free to correct or improve upon – or maybe incorporate as options in the next update 🙂 I hope others find these useful. Again, the 274px height needs to be changed depending on the height you set for your slider images. I use Jason’s “TB Image Sizes” plugin to change my slide dimensions from the default height to 280 for large images, and 244 for staged images.

Updated CSS:

.standard-slider-wrapper .full-image .content {background-color: transparent !important}
.standard-slider-wrapper .full-image .slide-title span {background-color: #222; padding:0 5px 0 5px}
.standard-slider-wrapper .full-image .slide-description {background-color: #222; padding:0 5px 0 5px; display: inline-block}
.standard-slider-wrapper .slides-wrapper {min-height:274px}
.standard-slider-wrapper .tb-loader {top: 40%}

[beckysharp]

Cheers mharpen – nice post. I was getting really annoyed with the page shifting around as slides loaded and had started moving them down the page so it wasn’t an immediate turn-off for visitors.

[Jason Bobich]

In the next update to the theme, I’ve turned of FlexSlider’s auto height animation by default. So once a slider loads, it will automatically be the height of the tallest slide, and will remain that height as it transitions through each slide.

[nannon]

Just wanted to say thanks for taking the time to share! Very helpful 🙂

[inetinitiatives]

I’m using the latest version of Alyeska but the above CSS does not appear to make any changes when loaded. I’d like to be able to adjust the background box color, as well as change the size of the slider headline and description text. Is the CSS still valid?

Thank you!

[Author]

Replies