Make Blogger Header, Navigation Together With Footer Amount Width

Blogger is a user-friendly service that provides a lot of actually attractive looking default templates for those simply starting out. Default templates come upwardly inward handy, but the overnice things virtually owning your ain weblog is that you lot cause got the run a jeopardy to add together your ain personal touch. As a affair of fact, templates aren't made to throttle your liberty of design, but instead they're in that location to supply you lot a foundation to construct from. With every default template available on Blogger, you lot tin brand changes to check your style.

One of the most mutual requests out of the Blogger community when making alterations is how to alter the await of some of the cardinal sections similar header, navigation, in addition to footer. Initially, these items are designed to check within simply 1/3 of the page, surrounded yesteryear padding in addition to margins on either side. These margins are used to give the page a slim plumbing equipment appearance, but could too drive your content to await compressed.

Important: Backup your Template

Making the changes to a sum cover Blogger navigation, footer, or header tin move done in addition to won't cause got you lot much time. Before you lot tin brand whatsoever changes, you lot should relieve extra copies of the template .xml file inward illustration anything goes wrong. That way, if you lot don't similar it or it doesn't come upwardly out looking similar it should, you lot tin reuse the contents of the master copy file to restore your weblog to working condition.

Demo

Hover your mouse over the prototype to meet a earlier in addition to later example:

How to Make Header, Navigation in addition to Footer Full Width inward Blogger

Step #1: Access Your CSS File

If you've never opened upwardly your CSS file before, log inward to your Blogger account, guide your weblog in addition to navigate to Template > Edit HTML. This volition convey upwardly the code of your template containing all your blog's internal files inward i place.

Step #2: Modify the Background

Click anywhere within the code expanse > press CTRL + F keys in addition to type the next business > hitting Enter to discovery it (stop at the start occurrence of it):

body {

Just below body { you lot should meet some lines that volition await similar this:

trunk {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Where you lot meet the highlighted business to a higher house inward the code, take away the business in addition to supervene upon it with:

padding: 0px;

Different templates volition cause got kid variations, but you lot should nonetheless move able to discovery these lines within every template.

Step #3: Change the Content Section

Next, search using the CTRL+F keys for this part:

.content-inner {

Just below it, you lot volition meet this line:

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}

Remove the business inward scarlet in addition to supervene upon it with:

padding: 0px;

This volition take away whatsoever of the padding approximately the inner content, in addition to hence it won't leave of absence whatsoever room on both sides.

Now discovery this part:

$(content.background.color.selector){

Just below it you lot volition meet this line:

$(content.background.color.selector){
background-color: $(content.background.color);
}

Replace the business inward scarlet with:

background-color: $(body.background);

Finally, search for this tag:

]]></b:skin>

And simply to a higher house it, add together this CSS:

.main-outer {
background: $(content.background.color);
}

Step #4: Make the Content Outer Full Width

Content is displayed differently betwixt browsers, in addition to hence you'll adjacent desire to laid upwardly this in addition to hence that it alters the width across the board. This code tin move establish searching for:

.content-outer, .content-fauxcolumn-outer, .region-inner {

And simply below it you lot volition meet the next lines:

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

Delete the business inward scarlet in addition to supervene upon that business with:

max-width: 100%;

Step #5: Finish It Up

Now you lot cause got simply 2 to a greater extent than lines you lot shout out for to change. Look for:

</b:template-skin>

And click on the correct arrow to expand the styles. Note: you lot volition shout out for to search for </b:template-skin> tag again, in addition to simply earlier it you'll meet these symbols highlighted inward yellow:

]]>
</b:template-skin>

Above this ]]></b:template-skin> department of code, add together the following:

.main-outer {
max-width: $(content.width);
margin: 0 auto;
}

Then run a search for:

]]></b:skin>

Add these lines of code simply before/above it:

.tabs-inner {
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}

Save the template in addition to move out out of the editor.

Finished!

Following along alongside this tutorial won't impact or alter the pictures you lot are using on the blog, simply the blueprint of the content area. If you lot cause got a logo that stretches across the cover in addition to fits perfectly for 1/3 page header, you lot volition shout out for to resize in addition to re-upload this content in addition to hence that it is able to move alongside the novel adjustments.