-
Posts
-
Hello,
I use a content slider for one of the company’s sites and I want to have a different background on each slider. I read your guide:But I can’t figure it out, but how do I make 5 sliders have a different background.
How can this happen with CSS?Best Regards,
AnnaHey Cherryadvertising,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi,
Thank you for the info.
We could use nth-child selectors to apply a different background for each slider item.
.avia-content-slider-inner .slide-entry-wrap:nth-child(1) { background: red; } .avia-content-slider-inner .slide-entry-wrap:nth-child(2) { background: orange; } .avia-content-slider-inner .slide-entry-wrap:nth-child(3) { background: blue; }// https://www.w3schools.com/cssref/sel_nth-child.asp
And if you want to apply this to a specific content slider element only, you have to give the element a unique class name or ID.
// https://kriesi.at/documentation/enfold/add-custom-css/
Best regards,
IsmaelHello,
thanks for the reply. It did what we wanted only partially.
Let me explain, we put your code with these colors:.avia-content-slider-inner .slide-entry-wrap:nth-child(1) {
background: #E01082;
}.avia-content-slider-inner .slide-entry-wrap:nth-child(2) {
background: #96C93E;
}.avia-content-slider-inner .slide-entry-wrap:nth-child(3) {
background: #EF7922;
}.avia-content-slider-inner .slide-entry-wrap:nth-child(4) {
background: #0D6EA5;
}.avia-content-slider-inner .slide-entry-wrap:nth-child(5) {
background: #FFEE0B;
}and as a result we have this: https://new.helendoron.bg/wp-content/uploads/2021/04/Email-template-light.png
We would like the background and the content slider itself to cover the entire grid row and the last lines to be readable.The color of the first content slider, we do not know why it became the background and the grid section with blog posts below the same page ( https://new.helendoron.bg/ ) – this is a side effect for us.: https://new.helendoron.bg/wp-content/uploads/2021/04/Email-template-light-1.png
We look forward to your response and appreciate the time you spend on our project.
Regards,
AnnaHi,
Sorry for the delay. The grid row section is not displaying properly on our end due to an error.
Uncaught Error: Syntax error, unrecognized expression: #url=https%3A%2F%2Fhelendoron.bg%2F&title=%D0%94%D0%BE%D0%B1%D1%80%D0%B5%20%D0%B4%D0%BE%D1%88%D0%BB%D0%B8%20%D0%B2%20%E2%80%9E%D0%A5%D0%B5%D0%BB%D0%B5%D0%BD%20%D0%94%D0%BE%D1%80%D0%BE%D0%BD%E2%80%9D!
Did you create a link using special or Cyrillic characters?
The css modification is also applied to the blog posts element because they are using the same class name. You will have to apply a custom css class name or ID to the grid row element, or the slider inside it and prepend it to the selectors that we created above. Please check the documentation below for more info.
// https://kriesi.at/documentation/enfold/add-custom-css/
And to learn more about basic css modification and how they can be inspected in the browser, this short video should help.
// https://www.youtube.com/watch?v=nV9PLPFTnkE
Best regards,
Ismael
- You must be logged in to reply to this topic.