Home>Support>Background

Background

By Rene, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I use full with for my site but I want to be able te color the backround of both the body area and the sidebar. I managed more or less to get a background color on de actual body but not the sidebar. Attached a page of the site with a screenshot. I want to have a background color on the part within te dotted line. Can you help me with this?

thanks

Rene

URL: http://demowp.edutestweb.nl/blog/?page_id=164&preview=true

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 8 months ago Rene

    I mean full width…

  2. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Rene

    Thanks for reaching out.

    The way the full width layout was constructed unfortunately means there is no container around the the primary and sidebar areas that we can easily use for a background color. It’s possible to set the overall page background color under Appearance > Customize > Page. You might consider using the Vantage Boxed Layout, that would give you the regular background color option you’re after.

    Sorry we don’t have more.

  3. 9 years, 8 months ago Rene

    Hello Andrew,

    Thanks for this. I indeed could not find the container but thought is was my lack of experience! Would be great if you can add this container in the next upgrade.

    Rene

  4. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    There is a full-container wrapping #primary and #secondary. It’s however not floated left so given the current setup we can’t use it for a background color.

    You could change things in a child theme, you’d need the following under Appearance > Custom CSS:

    #main {
padding: 0;
}

.full-container-inner {
background: #ccc;
padding: 35px;
}

    You could start with this vanilla child theme:

    https://siteorigin.com/wp-content/uploads/2015/01/vantage-child-vanilla-enqueue.zip

    Un-zip it. Copy header.php and footer.php from the parent theme into the child theme.

    Edit header.php and insert the following after

    :

    <div class="full-container-inner">

    So the end of header.php will then look as follows:

    	<div id="main" class="site-main">
		<div class="full-container">
			<div class="full-container-inner">
			<?php do_action( 'vantage_main_top' ); ?>

    Then close that div in footer.php. The start of footer.php will then look as follows:

    			<?php do_action( 'vantage_main_bottom' ); ?>
			</div>
		</div><!-- .full-container -->
	</div><!-- #main .site-main -->
  5. 9 years, 8 months ago Rene

    This is great! I will see if I can pull this off!

    Rene

  6. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Super, let us know how it goes.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More