-
AuthorPosts
-
April 9, 2021 at 11:26 am #1293482
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 #1293840Hey 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,
IsmaelApril 12, 2021 at 8:48 am #1293871Hi Ismael,
You’re right, that was a bit onclear.
This is the page:
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 #1294169Hi,
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,
YigitApril 13, 2021 at 5:09 pm #1294188Thanks that worked for the title, what do I use for the excerpt? Thanks!
April 13, 2021 at 5:16 pm #1294190Hey,
Please add following code to Quick CSS as well
#top .aviaccordion-excerpt { display: ruby; padding: 10px; }
Cheers!
YigitApril 13, 2021 at 5:50 pm #1294197Hi Yigit,
This doesn’t quite work yet, please check: https://www.fronikboerderij.nl/test-home-slider/
April 13, 2021 at 6:05 pm #1294198Hi,
I attached a screenshot in private content field. How does it look on your end?
Best regards,
YigitApril 14, 2021 at 11:47 am #1294358See private link
April 14, 2021 at 12:36 pm #1294367Hi,
Please try using the code as following
#top .aviaccordion-excerpt { display: inline-block; padding: 10px; }
Best regards,
YigitApril 14, 2021 at 12:43 pm #1294375Hi 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 #1294384Hi,
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,
YigitApril 14, 2021 at 1:23 pm #1294386Okay, I wil look into that. Thanks for your help so far!
April 14, 2021 at 1:33 pm #1294388 -
AuthorPosts
- The topic ‘transparant background caption accordion slider’ is closed to new replies.