Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #835017

    Hi there,

    I have a Full-width Easy Slider on my homepage and also on several other pages. I would like to change the background colour which is behind the captions – both the title and text. However, I do not want it to happen on the homepage.

    I am using the following code:

    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
        background: #fa9605 !important;
    
    }
    
    .avia-caption .avia-caption-content p {
      background: transparent;
    }
    

    This changes the background colour behind the captions on ALL of the Easy Sliders.

    [1] How can I make it so that it excludes the homepage/only applies to specific pages?
    [2] The transparent part of the code is not working. How can I make it so that it does?

    Any help would be greatly appreciated!

    • This topic was modified 7 years, 4 months ago by robjherron.
    #835127

    I’ve been trying out the following code (note the addition of opacity) but unfortunately, the new colour background behind the captions is staying solid.

    By default, it’s a transparent black/grey colour so I’m thinking there must be an easy bit of code to change that.

    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
        background: #ce9e20 !important;
    filter: alpha(opacity = 50);
    
    }
    
    .avia-caption .avia-caption-content p {
    filter: alpha(opacity = 50);
    }
    
    #835226

    I have now managed to get the opacity fixed on the background colour with the following code (in case anyone else wants to use it) but that still leaves the other issue.

    How can I make it so that this code applies to specific pages/Easy Sliders?

    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title,
    .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title
    {
    background: #000;
    filter: alpha(opacity = 80);
    background: rgba(0, 0, 0, 0.5);
    display:inline-block;
    margin:0 0 1px 0;
    padding:10px 15px;
    }
    #837636

    Hi,

    If you check the sources of the page, you can see at the that there are classes.
    There, you can see the page-id that exists.
    You can add that class before the page ID and everything will do work out for you.

    Best regards,
    Basilis

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.