This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

CSS tips for the Slider

  • Creator
    Topic
  • #885
    mharpen
    Participant

    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 7 years, 12 months ago by Jason Bobich. Reason: Fixed selector on last line
Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #887
    mharpen
    Participant

    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%}
    #6503
    beckysharp
    Participant

    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.

    #6512
    Jason Bobich
    Keymaster

    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.

    #8208
    nannon
    Member

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

    #12231
    inetinitiatives
    Participant

    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.