Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • August 16, 2022 at 7:28 pm #1361858
    Raphaela_pra

    Hi,

    I would like to change the styling of the caption box for the full width slider. Currently the background is black, the padding on the box depends on the text size and title and subtitle are in different boxes.
    I would like to have a bigger box in transparent white where the title and the subtitle are both included (or rather no space between those two boxes). And the box size should be even. And it should be on the very left side of the page.

    Could you please assist me with it?

    Thank you!

    Best,
    Raphaela

    • This topic was modified 3 years, 2 months ago by Raphaela_pra.
    August 16, 2022 at 7:59 pm #1361864
    Rikard

    Hi Raphaela,

    Please try the following in Quick CSS under Enfold->General Styling:

    .caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
    background: rgba(255, 255, 255, 0.5);
    width: 40%;
    float: right;
    padding: 20px;
}

    Best regards,
    Rikard

    August 16, 2022 at 8:02 pm #1361865
    Raphaela_pra

    Hi Rikard,
    unfortunately the code doesn’t change it.

    Best regards,
    Raphaela

    August 16, 2022 at 8:13 pm #1361871
    Rikard

    Hi,

    Please try this CSS instead:

    .avia-fullwidth-slider .slideshow_align_caption {
    background: rgba(255, 255, 255, 0.5);
    width: 40%;
    float: right;
    padding: 20px;
}

.avia-fullwidth-slider .avia-caption-title, .avia-fullwidth-slider .avia-caption-content p {
    background: none; 
}

    Best regards,
    Rikard

    August 16, 2022 at 8:22 pm #1361873
    Raphaela_pra

    so there is the white box now- that works perfect.
    But the black background is still there in addition.

    And the position is not on the left. Could you maybe add a code, where I can put in the position manually?

    August 17, 2022 at 1:42 am #1361882
    Ismael

    Hi,

    Thank you for the update.

    We can remove the background using this css 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: transparent;
}

    And to adjust the position of the caption, please add this css.

    .avia-fullwidth-slider .slideshow_align_caption {
    position: absolute;
    bottom: 0;
}

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings while editing the site.

    Best regards,
    Ismael

    August 17, 2022 at 10:41 am #1361906
    Raphaela_pra

    Hi Ismael,

    thank you very much! Works perfectly now!

    I would just like to have the background less transparent.

    I understood I can change it through the “0.5” number in this code:
    .avia-fullwidth-slider .slideshow_align_caption {
    background: rgba(255, 255, 255, 0.5);
    width: 40%;
    float: right;
    padding: 20px;
    }

    However, if I change the number, it doesn’t change the transparency level.

    Thanks!
    Raphaela

    August 17, 2022 at 11:02 am #1361911
    Raphaela_pra

    Ah now it worked, thank you!

    So one more thing:
    How can I change it for mobile version? The position and width doesn’t fit.

    Thanks!

    Raphaela

    August 17, 2022 at 12:05 pm #1361918
    Rikard

    Hi Raphaela,

    Thanks for the update. What exactly are you looking to change for mobile?

    Best regards,
    Rikard

    August 18, 2022 at 6:02 pm #1362102
    Raphaela_pra

    So the size of the box and also the position is fine. Just the text is out of the screen – so you can only see half of it.

    best regards,
    Raphaela

    August 18, 2022 at 6:02 pm #1362103
    Raphaela_pra

    on the left side – the text on the left side is cut-off.

    August 18, 2022 at 7:49 pm #1362110
    Rikard

    Hi,

    Thanks for the clarification. I see that you have added some negative values:

    .avia-fullwidth-slider .slideshow_align_caption {
    position: absolute;
    bottom: 60px;
    left: -115px;
}

    If you want it to only apply to screens larger than phones, then please wrap it in a media query:

    @media only screen and (min-width: 768px) {
.avia-fullwidth-slider .slideshow_align_caption {
    position: absolute;
    bottom: 60px;
    left: -115px;
}
}

    You can put mobile specific CSS in another media query:

    @media only screen and (max-width: 767px) {
Mobile styles go here
}

    Best regards,
    Rikard

    August 18, 2022 at 8:01 pm #1362115
    Raphaela_pra

    Unfortunately it doesn’t change anything on the mobile version
    Do you have any idea what might be wrong about it?

    Best regards,
    Raphaela

    August 18, 2022 at 8:31 pm #1362120
    Rikard

    Hi,

    You have set the width to 130%:

    .avia-fullwidth-slider .slideshow_align_caption {
    background: rgba(255, 255, 255, 0.6);
    width: 130%;
    float: right;
    padding: 20px;
}

    You can include that CSS in the mobile media query, and set the width to 100% or less.

    Best regards,
    Rikard

    August 19, 2022 at 7:21 am #1362152
    Raphaela_pra

    I think the code for the mobile version doesn’t work.
    Whenever I put the media query for large screens in it works. But it doesn’t change anything if I do the same with the media query for smaller screens.

    Best regards,
    Raphaela

    August 19, 2022 at 3:57 pm #1362178
    Rikard

    Hi,

    Where did you add the code with 130%? It looks like it’s added in the WordPress customiser?

    Best regards,
    Rikard

    August 19, 2022 at 4:36 pm #1362194
    Raphaela_pra

    Hi,
    yes it’s added there.

    Best regards,
    Raphaela

    August 19, 2022 at 8:07 pm #1362215
    Rikard

    Hi,

    Could you share the CSS you are using for mobile, and let us know exactly where you put it?

    Best regards,
    Rikard

    August 20, 2022 at 6:37 pm #1362292
    Raphaela_pra

    @media only screen and (max-width: 767px) {
    .avia-fullwidth-slider .slideshow_align_caption {
    background: rgba(255, 255, 255, 0.6);
    width: 80%;
    float: right;
    padding: 20px;
    }
    I tried that one.

    I usually put all codes in the costumizer one after another. Is there a better way to do it?

    Best regards,
    Raphaela

    August 20, 2022 at 6:38 pm #1362293
    Raphaela_pra

    So currently it is at the very end of the customiser.

    August 20, 2022 at 11:59 pm #1362316
    Mike

    Hi,
    For mobile please try this css:

    @media only screen and (max-width: 767px) { 
	#top .avia-fullwidth-slider .slideshow_align_caption {
    width: 100%;
}
}

    After applying the css, please clear your browser cache and check.
    Please see the screenshot in the Private Content area for the expected results.

    Best regards,
    Mike

    August 21, 2022 at 10:42 am #1362330
    Raphaela_pra

    perfect, awesome! Thanks for your patience! :)

    Best regards,
    Raphaela

    August 21, 2022 at 12:57 pm #1362339
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Change caption box styling for full width slide show’ is closed to new replies.