background color

Hi,

This is the default theme behavior, not a bug: https://forum.tagdiv.com/background-introduction/
There is no setting in the theme panel to keep your full-width content if a background color is set.
In order to do this, you have to modify the theme CSS.
You can leave the background color to default in the theme panel and apply a color to the background with CSS.
Add this code in the theme panel-custom css:

body {
background-color: #dd3333;
}
.td-full-layout .td-main-page-wrap, .td-full-layout .td-banner-wrap-full {
margin-left: auto;
margin-right: auto;
width: 1164px;
}

You can then change the color of the body in the code and also adjust the width of the container to your preference.
result: http://screencast.com/t/apUtOa4rp

Thank you!

Hello,
Please replace the previous code with this one:

body {
background-color: #dd3333;
}
.td-full-layout .td-banner-wrap-full, .td-full-layout .td-main-content-wrap {
margin-left: auto;
margin-right: auto;
width: 1164px;
}

The previous one seems to only work on pages. This one should do it.
Also if there is a background image set or a background color, it will not work. It is meant to work with the full layout of the site, not the boxed version.

Thank you.

Hi,

Unfortunately it is not an easy task to change the boxed layout for header, as the site will become boxed when background-color(or image) is added. You could try to use media queries to change this for desktop – http://screencast.com/t/vIA97kLL6S

@media (min-width: 1180px) {
.td-boxed-layout #td-outer-wrap{
width: 100% !important;
}
.td-main-content-wrap {
width: 1164px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.td-boxed-layout .td-header-menu-wrap.td-affix {
left: 0;
right: 0;
}
}

Please note that also the footer will become full – http://screencast.com/t/pqdCnTK5v

Hope this helps!

Hi,
Unfortunately this will not be an easy task as there are many containers on the body that are different for posts, pages or category pages. The theme allows for a background color or image. YOu will need to use css to target every element on that particular page.
For example if i want to make the whole homepage grey this would be the code:
.td-header-style-5 .td-header-top-menu-full {
background-color: grey;
}
.td-header-wrap .td-header-menu-wrap-full, .sf-menu > .current-menu-ancestor > a, .sf-menu > .current-category-ancestor > a, .td-header-menu-wrap.td-affix, .td-header-style-3 .td-header-main-menu, .td-header-style-3 .td-affix .td-header-main-menu, .td-header-style-4 .td-header-main-menu, .td-header-style-4 .td-affix .td-header-main-menu, .td-header-style-8 .td-header-menu-wrap.td-affix, .td-header-style-8 .td-header-top-menu-full{
background-color:grey!important;
}
.td-header-sp-recs{
background-color:grey;
}
.td-main-content-wrap{
background-color:grey;
}
.td-footer-wrapper{
background-color:grey!important;
}

This will not work 100% on posts or category pages because other containers will be present that are not used on the homepage.
I hope this helps.
Thank you!

Hello,

Since this topic was created (last year), we already implemented options to force the header and footer to go full width even when a background is used. Please make sure you use the latest version of the theme: https://forum.tagdiv.com/how-to-update-the-theme-2/ and then check this section of the theme panel: https://www.screencast.com/t/amnggaNab

Thank you!