stay theme – emulate a footer area

• 

  jlanglois2014 · Member · Jun 2, 2014 at 2:55 am

  • Copy link
  • Add topic to favorites

  Hi there…I am trying to create a consistent background color for the bottom three widgets on my static home page, to make it look like a footer area. Is it possible to change the width of the widgets so that there is no white space between them, and the background color goes fully from left to right? I have a ‘contact us’ widget, a reservations widget and a pages widget, from left to right at the bottom of my home page.

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  gracejiyoung · Member · Jun 4, 2014 at 7:52 pm

  • Copy link

  Hi there,

  Try adding this to your CSS:

  #widget_contact_info-7, #reservations-3, .widget_reservations .contact-form, #pages-7 {
  background: #dcdcdc;
  }
  
  .home-widgets {
  padding: 0;
  }
  
  .home-widgets {
  	height: 836px;
  }
  
  #nav_menu-2 {
  	height: 127px;
  	margin: 0 0 30px;
  }
  
  #widget_contact_info-7, #pages-7 {
  	height: 434px;
  }
  
  #text-4, #image-2 {
  	margin: 0 0 30px;
  }
  
  #text-7 {
  	display: none;
  }

  Then add the CSS Color Value that you want.

  Let me know if you have any questions with this!

• 

  jlanglois2014 · Member · Jun 5, 2014 at 6:01 pm

  • Copy link

  Thanks, that did make the bottom all one color. However, when I added in the CSS it shifted all of the widgets to the left leaving a large space on the right. I left the CSS in but changed the padding on the right, which got me back to where I started.

  Is there any coding I can add to what you have provided above that will keep the widgets aligned evenly across the homepage, but also allow for a solid background color just for the bottom three?

  Thanks!

• 

  gracejiyoung · Member · Jun 5, 2014 at 6:18 pm

  • Copy link

  Hi there,

  So what’s going on is that it depends on the size of your browser. Currently it’s like this:

  

  As you make the browser narrower in width, it will start to move down:

  

  

  At maximum width it is 1200px.

• 

  jlanglois2014 · Member · Jun 5, 2014 at 7:13 pm

  • Copy link

  Thanks for your changes. It worked fine, then I had to remove some widgets (text and images) on the home page and the color has reverted back to the previous look, with white borders around them.

  I cannot find in the code where to adjust this to make the bottom all one color as you had. Sorry but hoping you can help again?

  Thanks!

• 

  gracejiyoung · Member · Jun 5, 2014 at 10:48 pm

  • Copy link

  Hi there,

  Try adding this:

  #reservations-3 {
  	width: 400px;
  	height: 436px;
  }
  
  #widget_contact_info-7 {
  	width: 400px;
  }

• 

  jlanglois2014 · Member · Jun 6, 2014 at 1:12 am

  • Copy link

  That worked! Thanks so much for your help and patience.

• 

  gracejiyoung · Member · Jun 6, 2014 at 5:05 pm

  • Copy link

  I’m glad it worked out!

  Cheers!