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
-
magnetic slide addon- can I have a different background for each slide on the page?
-
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:4567/topic/10/different-backgroundcolor-for-single-project/4Ok 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!
-
@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? -
@arminunruh it doesnt work on mobile device and tablet :(
-
@irvdys yeah gonna take at that look today :D