Return to previous page

Sides of full width Layout - by Leadcroc

This topic has 24 replies, 5 voices, and was last updated 8 years, 10 months ago ago by Stan Russell

Leadcroc

Participant

June 3, 2015 at 18:01

I want the sides of the fullwidth layout — since I’m using the standard width

to be a grey color so the content stands out

#67907 Copied Theme version: 1.8 WooCommerce version: Current

23 Answers

Robert Hall

Support staff

June 3, 2015 at 18:24

Hello,

For clarify. Do you want to change background color of this parts? See screenshot: http://prntscr.com/7cpn2f

Regards,
Robert Hall.

#67910 Copied

Leadcroc

Participant

June 3, 2015 at 19:11

yes

#67920 Copied

Leadcroc

Participant

June 3, 2015 at 20:32

if you go to healthlabs.com that checkered side is what i want except no checkered

#67943 Copied
Robert Hall

Support staff

June 3, 2015 at 20:57
Please try use this code in custom.css file
```
.page-wrapper{
  background-color: grey;
}
.content-page{
  background-color: #fff;
}
.header{
  background: url(http://www.wellbeing-healthcare.com/wp-content/uploads/2014/12/headeroverlay.png) #fff !important;
}
```
Regards,
Robert Hall.
#67953 Copied
Leadcroc

Participant

June 3, 2015 at 21:39

That works but how come the bottom of the .content-page doesn’t rest on the footer?

#67959 Copied

Leadcroc

Participant

June 3, 2015 at 22:02

I still want the:
Breadcrumbs to be white bg – http://imgur.com/UAYhwEy
and the footer and bottom of content to be flush – resting on top – http://imgur.com/Pzr5imF

#67963 Copied

Leadcroc

Participant

June 3, 2015 at 23:00

and i noticed that on the shop pages the white is gone – see screenshot in private.

Please, contact administrator
for this information.

#67968 Copied
Eva Kemp

Support staff

June 4, 2015 at 08:56
Hello,

To change footer background color add this code in custom.css file:
```
.main-footer {
    background-color: transparent !important;
}
```
Also add this code in custom.css to change background on product pages:
```
.page-content {
 background-color: white !important;
}
```
Regards,
Eva Kemp.
#68014 Copied
Leadcroc

Participant

June 4, 2015 at 14:16

Eva,

For the footer i want it RESTING on the bottom of the page content theres like a gap in-between the footer and the content its on all your themes.

I know theres a way to fix that i just can’t seem to find it

#68104 Copied

Leadcroc

Participant

June 4, 2015 at 15:05

In essence what i want is the boxed layout but with a full width header – header menu, and full width footer with the sites grey

#68113 Copied
Jack Richardson

Support staff

June 4, 2015 at 15:09
Hello,

Please add this code to the custom.css file:
```
.content-page {
    margin-bottom: 0px !important;
}
```
As I see your site already has boxed layout.

Best regards,
Jack Richardson.
#68114 Copied
Leadcroc

Participant

June 4, 2015 at 15:58

right now the side is in full width mode — but i made the content fit a box feel — but the breadcrumbs are out of the box (still full width) where as i want that in the box with a white bg.

#68120 Copied

Leadcroc

Participant

June 4, 2015 at 16:19

Still not fixed

Please, contact administrator
for this information.

#68122 Copied
Eva Kemp

Support staff

June 4, 2015 at 16:38
Hello,

I’ve added the code from the previous post:
```
.content-page {
    margin-bottom: 0px !important;
}
```
Space between content and footer is removed now.
Concerning the breadcrumbs you can make the same background of the section as for sides content and they will be similar.
Change background in Theme Options > Header > Breadcrumbs background.

Thank you.
Regards,
Eva Kemp.
#68130 Copied
Leadcroc

Participant

June 5, 2015 at 11:06

so now the breadcrumbs bars the full width i don’t want that

#68247 Copied

Eva Kemp

Support staff

June 5, 2015 at 11:11

Hello,

Change breadcrumbs background color to #EFEFEF.
Please try it.

Thank you.
Regards,
Eva Kemp.

#68251 Copied

Leadcroc

Participant

June 5, 2015 at 11:59

and now its efefef — but i want the sides efefef the main part i want white to match the page content

#68259 Copied
Robert Hall

Support staff

June 5, 2015 at 12:15
Hello,

Please try this code in custom.css file.
```
.page-heading{
  background: #efefef;
}
.page-heading .container{
  background-color: #fff;
  padding: 20px 0px;
  margin: -15px auto;
  width: 1140px;
}
```
Regards,
Robert Hall.
#68262 Copied
Leadcroc

Participant

June 5, 2015 at 16:15

question so since we added the color to the sides — the shop pages now don’t have the same padding that the non woo commerce pages have. Any suggestions

I added the website —

Please look through the links from the HEADER — they look fine –

Then look at the shop pages.

#68329 Copied
1 2

Viewing 20 results - 1 through 20 (of 24 total)