Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 9, 2021 at 11:26 am #1293482
    JantienM

    Hi,

    I would like to change my accordion slider as follows:

    Remove the transparent grey background completely and give only the caption a grey transparant background, just like the caption background used in the full width slider.

    I already know how to lose the background on the whole image, I used:

    #top .aviaccordion-preview-title-wrap { background: transparent; }
.aviaccordion-active-slide .aviaccordion-preview { width: 100% !important; }

    For the background of the caption and excerpt I used this (to test I used black as background):

    #top .aviaccordion-excerpt,
#top .aviaccordion-preview-title h3 {
   background-color: #000;
}

    But the alignment is not nice

    Hope you can help me with the correct CSS.

    Thanks again!

    April 12, 2021 at 5:50 am #1293840
    Ismael

    Hey JantienM,

    Thank you for the inquiry.

    But the alignment is not nice

    Which alignment? We may need to inspect the actual element in order to provide an appropriate solution. Please post a direct link to the page in the private field, and provide a screenshot if possible.

    Best regards,
    Ismael

    April 12, 2021 at 8:48 am #1293871
    JantienM

    Hi Ismael,

    You’re right, that was a bit onclear.

    This is the page:

    Test homeslider

    You can see the black background behind the titles, I need them to be nicely around the titles.

    April 13, 2021 at 4:38 pm #1294169
    Yigit

    Hi,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
#top .aviaccordion-title {
    display: inherit;
    padding: 10px;
}

    Best regards,
    Yigit

    April 13, 2021 at 5:09 pm #1294188
    JantienM

    Thanks that worked for the title, what do I use for the excerpt? Thanks!

    April 13, 2021 at 5:16 pm #1294190
    Yigit

    Hey,

    Please add following code to Quick CSS as well

    #top .aviaccordion-excerpt {
    display: ruby;
    padding: 10px;
}

    Cheers!
    Yigit

    April 13, 2021 at 5:50 pm #1294197
    JantienM

    Hi Yigit,

    This doesn’t quite work yet, please check: https://www.fronikboerderij.nl/test-home-slider/

    April 13, 2021 at 6:05 pm #1294198
    Yigit

    Hi,

    I attached a screenshot in private content field. How does it look on your end?

    Best regards,
    Yigit

    April 14, 2021 at 11:47 am #1294358
    JantienM

    See private link

    April 14, 2021 at 12:36 pm #1294367
    Yigit

    Hi,

    Please try using the code as following

    #top .aviaccordion-excerpt {
    display: inline-block;
    padding: 10px;
}

    Best regards,
    Yigit

    April 14, 2021 at 12:43 pm #1294375
    JantienM

    Hi Yigit,

    Yes that’s better, but somehow the main title of the fourth item is placed bit heigher than the other titles. Does this have to do with the padding?

    April 14, 2021 at 1:14 pm #1294384
    Yigit

    Hi,

    No, it is related to excerpt. 4th item has a longer excerpt so it takes 2 lines when collapsed. I thought about a CSS trick but could not come up with anything yet. Could you shorten the excerpt? :)

    Best regards,
    Yigit

    April 14, 2021 at 1:23 pm #1294386
    JantienM

    Okay, I wil look into that. Thanks for your help so far!

    April 14, 2021 at 1:33 pm #1294388
    Yigit

    Hi,

    You are welcome!
    Let us know if you have any other questions and enjoy the rest of your day! :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘transparant background caption accordion slider’ is closed to new replies.