Lay Theme Forum

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

    Two different vertical color background

    General Discussion
    2
    9
    1188
    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.
    • A
      antonioprado last edited by antonioprado

      Hi @arminunruh and @mariusjopen !

      I have one question (i've tried to figure it out in the forum but i've seen nothing about it):

      I need to have two different color backgrounds on the same row (i'm using fullscreen slider). Half left with one color and half right another. I just saw this in this website made with laytheme:

      http://buerokirchner.berlin

      I'll really appreciate your help!

      Thank you!! :D

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by mariusjopen

        Hi antonioprado!

        Buero Kirchner solved it with adding a background image to the Gridder for each slide:

        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }
        

        Try it and let us know if you face trouble!

        All the best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • A
          antonioprado last edited by

          Hi @mariusjopen !

          Thank you very much for the answer! It works really good! :)

          I just have one more question... when I try to put an element on the top of a slide, nothing happens... it stays on the middle of the page. I want the text and images to be located at the top of the page.

          This is how I have it on laytheme:

          0_1492090816290_Captura de pantalla 2017-04-13 a las 15.35.10.png

          And this is the result on the web:

          0_1492090863729_Captura de pantalla 2017-04-13 a las 15.35.24.png

          And this is how i want:

          0_1492091010942_Captura-de-pantalla-2017-04-13-a-las-15.35.24.png

          Is there any way to put the elements on the top?

          Thank you very much guys!!!

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Hi antonioprado!

            This is a default setting to align the elements in a right balance on the page.

            If you have a bigger text, the box which aligns the images on the right gets bigger as well.

            Have a look here:
            0_1492166142544_Bildschirmfoto 2017-04-14 um 12.34.26.png

            And now here:
            0_1492166154574_Bildschirmfoto 2017-04-14 um 12.34.12.png

            You would need the text box and extra class and style it with the custom CSS:

            0_1492166277599_Bildschirmfoto 2017-04-14 um 12.37.45.png

            .big-box {
                height: 70vh;
            }
            

            I hope that helped!

            All the best!

            Marius

            www.mariusjopen.world

            A 2 Replies Last reply Reply Quote 0
            • A
              antonioprado @mariusjopen last edited by

              @mariusjopen Thank you! It works really good! Cheers!! :D

              1 Reply Last reply Reply Quote 0
              • A
                antonioprado @mariusjopen last edited by

                @mariusjopen Hello again! The trick you told me works good, but how can I put two elements and get one on the top or center and another on the bottom? When I try to put another text box it shows me that i can't do it. Something like this:

                0_1492685691359_Captura de pantalla 2017-04-20 a las 12.54.32.png

                Here an exemple of Buerokirchner:

                0_1492685854212_Captura de pantalla 2017-04-20 a las 12.57.14.png

                Thank you guys!!

                1 Reply Last reply Reply Quote 0
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  hi antonioprado!

                  Great!

                  I think the best way to do this is with a specific id or class.

                  You can give elements an id or a class by right-clicking on them.
                  0_1492719825198_Bildschirmfoto 2017-04-20 um 22.22.48.png

                  Then you can give a class name and use custom CSS to move it to the bottom.

                  I hope that helped!

                  All the best!

                  Marius

                  www.mariusjopen.world

                  A 2 Replies Last reply Reply Quote 0
                  • A
                    antonioprado @mariusjopen last edited by

                    @mariusjopen Thank you for the answer! I I imagined that it would be something like that, but the problem I have is that i can't even add a text box to add the class or the id... As I already have a text box that occupies the width, I can't add another under this on; the same happens with images, once I have one that occupies the width, I can't put another under it. Any ideas? :S I'm using fullscreen slider.

                    Thank you very much!!!!

                    0_1492759463278_Captura de pantalla 2017-04-21 a las 9.23.01.png

                    1 Reply Last reply Reply Quote 0
                    • A
                      antonioprado @mariusjopen last edited by

                      @mariusjopen Hello!! I just find out how to add elements under others! I just activated the option "user browser height for row height".

                      Thank you! :D

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

                      I don't answer or check forum DMs, please just post on the forum.

                      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

                      I

                      Recent Topics

                      • M

                        Tag filter / Maximum width

                      • open all links in a thumbnail grid in a new tab

                      • text underline

                      • centred Carousel fixed width and proportions

                      laytheme.com