Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • April 15, 2015 at 1:04 pm #428883
    liwaje

    Hi,

    I love the Enfold theme, but I’m having some difficulties with the quick css.

    I would like the caption and caption text ind the easy slider to be full width, both in the background color #f39200, no left and bottom margin and sticking to the bottom of the slider, so that it will look something like this:
    http://cyberrum.dk/enfold-pic/easy-slider-orange-bottom.png

    I’ve tried to insert this code in quick css, but I can’t change the background color of the small caption text (it’s too dark), and I can’t get the background of the text to be full width.

    /*big caption slider text styling*/
    .avia-caption .avia-caption-title
    { background: rgba(243,146,0,1); font-size: 18px !important; line-height: 20px !important; text-transform: none !important;}

    /*small caption slider text styling*/
    .avia-caption-content
    { background: #f39200 !important; font-size: 14px !important; text-transform: none !important; margin-top: -1px;}

    /*slider text background full width*/
    avia-caption.av-slideshow-caption, .avia-caption.av-slideshow-caption .avia-inner-caption p
    { width: 100%;}

    /*slider text sticking to left side and bottom of slide*/
    .avia-caption.av-slideshow-caption
    { padding: 0; left: 0; bottom: 0; margin-bottom: -1px;}

    Why isn’t the background full width, and why is the small caption text background brown?

    April 16, 2015 at 9:31 am #429439
    Ismael

    Hey Lisbeth!

    Thank you for using Enfold.

    You can try this:

    .avia-caption .avia-caption-content p {
  background: transparent;
}

.avia-caption.av-slideshow-caption {
  background: #f39200;
}

    Regards,
    Ismael

    April 16, 2015 at 10:38 am #429478
    liwaje

    Thank you Ismael – that removed the brown color from the content caption background, perfect!

    I figured that the full width code had to be moved to the .avia-caption.av-slideshow-caption, so now it sticks to the bottom and is full width with this code:

    .avia-caption.av-slideshow-caption
{ padding: 0; left: 0; bottom: 0; margin-bottom: -1px; border-radius: 0 !important; width: 100%;}

    So everything looks like it should now.

    Yay and thanks again,
    Lisbeth

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Easy slider full width text and text background’ is closed to new replies.