magnetic slide addon- can I have a different background for each slide on the page?

[ymaung]

Hi, I have the magnetic slide add-on. I want to have a different background for each slide on the page, how can I change the css for this?
Thanks,
Yin

[arminunruh]

Hi Yin!
First, you need to learn about some CSS selectors to target specific projects, pages and categories. Please take a look at my post here about how to change the background color of a whole page, project or category:
http://laythemeforum.com/topic/10/different-backgroundcolor-for-single-project/4

Ok but we just want to change the background colors of the slides. To do that, you use the so called "nth-child" CSS selector: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

We add all the CSS to the field "Custom CSS for Desktop Version" in "Lay Options" -> "Misc Options".

We need to select .fp-section elements because these are the slides.
Let's say the second slide's background should be pink. This slide is in a project with the id of "32".

body[data-id="32"][data-type="project"] .fp-section:nth-child(2){
    background-color: pink;
}

If you want to make every second slide pink on your whole website you can use this:

body[data-type="project"] .fp-section:nth-child(2){
    background-color: pink;
}

The following CSS makes every even slide pink and every odd slide green in the project with the id 32.

body[data-id="32"][data-type="project"] .fp-section:nth-child(even){
    background-color: pink;
}

body[data-id="32"][data-type="project"] .fp-section:nth-child(odd){
    background-color: green;
}

Hope that helps!

[arminunruh]

@ymaung
Now it's easier to set background colors for each row! Update your Lay Theme to version 1.030. Then right click on a row in the gridder. In the context menu you can choose "set background color". Cool huh?

[irvdys]

@arminunruh it doesnt work on mobile device and tablet :(

[arminunruh]

@irvdys yeah gonna take at that look today :D