Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Page background colour

Page background colour

Scheduled Pinned Locked Moved General Discussion
8 Posts 3 Posters 421 Views
  • 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.
  • N Offline
    N Offline
    nickraven
    wrote on Aug 5, 2020, 2:23 PM last edited by
    #1

    https://twodesign.co.uk/about/

    I’m trying to set a background colour for this page so that it is a different colour to the rest of the site,

    I’ve set the page background, with the ‘Set Background Colour’ function, to pink #ffd5d6.

    The site wide background colour is set to grey #f2f2f2.

    The problem is with the footer (and header when scrolling) which is grey #f2f2f2. And I want it to display pink #ffd5d6 – the same as the page background colour, but only for that single page.

    We did have a custom CSS which did work in making the footer transparent:

    #footer-region {
    background: none !important;
    }

    But that no longer works.

    Can you suggest a solution?

    1 Reply Last reply
    0
    • R Offline
      R Offline
      Richard
      Global Moderator
      wrote on Aug 12, 2020, 3:03 PM last edited by Richard Aug 12, 2020, 11:04 AM
      #2

      Dear @nickraven

      Beautiful webSite :)

      Is this what you are after?

      Screen Shot 2020-08-12 at 5.01.09 PM.png

      Try setting the footer's "background-color" to " :#ffd5d6; "

      Be sure to disable the "transparent" first as this may override your code :)

      Hope this helps

      Best
      Richard

      1 Reply Last reply
      0
      • N Offline
        N Offline
        nickraven
        wrote on Sep 1, 2020, 11:41 AM last edited by
        #3

        Thanks Richard, and apologies for the late response. I have been away!

        That would work for that particular page, but we have other pages using the same footer with different colour backgrounds. For example this one is green: https://twodesign.co.uk/contact/

        Is there a way to make the footer take the colour of the particular page?

        1 Reply Last reply
        0
        • R Offline
          R Offline
          Richard
          Global Moderator
          wrote on Sep 4, 2020, 5:20 PM last edited by
          #4

          Dear @nickraven

          Hey Im sorry for the late reply too!
          I just wanted to follow up and let you know that i'm taking a look into this & will get back to you early in the week! :)

          Until then let me know if you have any further question or how i can help,

          Best Wishes
          Talk soon

          Richard

          1 Reply Last reply
          0
          • J Offline
            J Offline
            joshsender
            wrote on Sep 5, 2020, 4:58 PM last edited by joshsender Sep 5, 2020, 12:59 PM
            #5

            @nickraven Each page has a slug specific to it, so you can target an element and have it only affect that page.
            972bf6ce-edee-45c8-b101-99284f3ba1a4-image.png

            So for a green contact footer, find the slug (see above) and then you'd add:

            .slug-contact #footer {
                background-color: #dcffdc;
            }
            

            about page:

            .slug-about #footer {
                background-color: #ffd5d6;
            }
            

            etc etc!

            https://joshsender.com

            1 Reply Last reply
            0
            • R Offline
              R Offline
              Richard
              Global Moderator
              wrote on Sep 7, 2020, 10:59 AM last edited by
              #6

              Dear @nickraven

              Thank you :)

              @joshsender Please feel free to ask any further questions,

              Good luck on your Lay Theme Journey
              Sincerely
              Richard

              N 1 Reply Last reply Sep 9, 2020, 8:46 AM
              0
              • R Richard
                Sep 7, 2020, 10:59 AM

                Dear @nickraven

                Thank you :)

                @joshsender Please feel free to ask any further questions,

                Good luck on your Lay Theme Journey
                Sincerely
                Richard

                N Offline
                N Offline
                nickraven
                wrote on Sep 9, 2020, 8:46 AM last edited by
                #7

                Perfect!

                Thanks @joshsender
                Thanks @Richard-Keith

                1 Reply Last reply
                0
                • R Offline
                  R Offline
                  Richard
                  Global Moderator
                  wrote on Sep 9, 2020, 12:51 PM last edited by
                  #8

                  Ah! @nickraven @joshsender

                  Wrong way round! :0

                  Thank you @joshsender
                  Nick, website looks great!, good luck on the rest of your journey

                  Kind Regards
                  Richard

                  1 Reply Last reply
                  0
                  Reply
                  • Reply as topic
                  Log in to reply
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes


                  I also code custom websites or custom Lay features.
                  💿 Email me here: 💿
                  info@laytheme.com

                  Before you post:
                  1. When using a WordPress Cache plugin, disable it or clear your cache.
                  2. Update Lay Theme and all Lay Theme Addons
                  3. Disable all Plugins
                  4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                  This often solves issues you might run into

                  When you post:
                  1. Post a link to where the problem is
                  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                  Online Users
                  A
                  alasdair17
                  4 minutes ago
                  Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                  laytheme.com
                  • Login

                  • Don't have an account? Register

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Search