Announcement

Collapse
No announcement yet.

Change background colour of EZ home top row

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Change background colour of EZ home top row

    Hi - I have an EZ home page (2 2 3), and I would like to change the background colour of the EZ home-top row, full width. I see some of the skins have varying row colours, and I would change to one of those skins but I have already done a lot of work on the present skin. Could someone point me in the right direction? Does it involve making a new template? Thanks.

  • #2
    Could you please offer a URL and point to the row in question? We couldn´t possibly know if you got a boxed or fluid layout and what´s probably individual on your setup.

    Normally, it´s not necessary to make a template. You can steal some CSS from my Amare demo where I do have a row with background color, if you want to: https://sg-demo.com/amare-basic/

    Comment


    • #3
      Thanks SiGa - I want to make the EZ middle row light cream background fluid width like the header and footer (with content fixed like it is now)
      - the URL is http://wine.nine-clouds.com

      Comment


      • #4
        Try this and change background color and paddings, if needed (I do see blue backgrounds on header and footer so I´m not sure about cream):

        Code:
        .ez-home .site-inner,
        #home-hook-wrap,
        #ez-home-top-container,
        #ez-home-middle-container,
        #ez-home-bottom-container {
        
         max-width:100%;
         padding:0;
        }
        
        #ez-home-top-container .ez-home-wrap,
        #ez-home-middle-container .ez-home-wrap,
        #ez-home-bottom-container .ez-home-wrap {
        
         float:none;
         margin:0 auto;
         padding:50px 20px;
         max-width: 1140px;
        }
        
        #ez-home-middle-container {
         background:#e8e8e8;
        }
        You will also have to adjust for mobiles to have to color still go full-width as #home-hook-wrap got some left and right padding.
        Last edited by SiGa; 12-01-2017, 06:09 PM.

        Comment


        • robin23
          robin23 commented
          Editing a comment
          Thanks SiGa - that worked! I fiddled a lot with the padding, as you suggested I might want to, and put the same code on mobile view. Cheers

      • #5
        robin23 SiGa , I just tried this and it worked for my site as well. I'm curious though, why do you have #home-hook-wrap twice? and where do I add the mobile code? My padding is all messed up on mobile.

        Comment


        • robin23
          robin23 commented
          Editing a comment
          Hi nothe - go to
          Dynamik Design
          Responsive
          Find 6 views, go to the one on the far right, which is mobile portrait
          Add code there, adjusting the paddings
          Add code with paddings to other views where necessary

          (and I didn't notice she had #home-hook-wrap twice, I just mindlessly copied it lol)

        • SiGa
          SiGa commented
          Editing a comment
          Sorry about the doubling - edited that.

      • #6
        robin23 , SiGa I figured out where to put the code, but can't seem to get my image centered on mobile.

        URL: themissinghow.com

        Issue: Trying to center the book cover in the Feature Top 1, on mobile it aligns left.

        Any ideas?
        Last edited by northe; 12-01-2017, 04:37 AM.

        Comment

        Working...
        X