Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

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

    Addons
    css magnetic slide custom css change backgrou
    3
    5
    1501
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Y
      ymaung last edited by

      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 1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by 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:4567/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!

        1 Reply Last reply Reply Quote 0
        • arminunruh
          arminunruh Global Moderator @ymaung last edited by

          @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?

          1 Reply Last reply Reply Quote 0
          • irvdys
            irvdys last edited by irvdys

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

            arminunruh 1 Reply Last reply Reply Quote 0
            • arminunruh
              arminunruh Global Moderator @irvdys last edited by

              @irvdys yeah gonna take at that look today :D

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Try this to fix issues before you post:

              Use the Search Feature. Maybe there is already a solution to your issue.

              1. Update Lay Theme and all Lay Theme Addons
              2. Disable all Plugins
              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
              4. Now see if your problem solved itself
              5. Go here, see if your problem is listed here:
              Troubleshooting

              When you post:
              1. Post a link to where the problem is
              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

              Thanks!

              Online Users

              T
              L
              M
              J
              C

              Recent Topics

              • L

                Hide mobile menu, when scrolling down

              • J

                Imagehover addon show mouseover state

              • F

                X-button (close) on category page

              • T

                display resolution of thumbnails in image-hover

              laytheme.com