Changing Width of Columns
- To change width, create the following CSS (using notepad, or another text editor) :
/* change width of madison one template 2 columns right */
#container
{
width: 925px;
}
#main-content
{
width: 695px;
}
#sidebar
{
width: 230px;
}
/* adjusting widths for different layouts */
body#twocolumn-right div#main-content
{
padding: 0 25px;
width: 625px;
margin-left: 10px;
}
body#twocolumn-right div#sidebar
{
padding-right: 15px;
width: 215px;
}
#container
{
width: 925px;
}
#main-content
{
width: 695px;
}
#sidebar
{
width: 230px;
}
/* adjusting widths for different layouts */
body#twocolumn-right div#main-content
{
padding: 0 25px;
width: 625px;
margin-left: 10px;
}
body#twocolumn-right div#sidebar
{
padding-right: 15px;
width: 215px;
}
Changing Pictures of Background
- Madison One uses 4 pictures as background : container-top.gif, container-fill, content-top.gif, and header-fill.gif
- Download these pictures, and change the width (718 px to 925 px). The adress of these pictures are :
http://YOURSITE.googlepages.com/-/includes/
style/madison/madison-one/pic_name.gif
- Upload theses files to GPC
- Define the CSS for these pictures :
body
{
background: #e2e6ec url(http://YOURSITE.googlepages.com/container-fill.gif)
center repeat-y !important;
}
body div#container
{
background: url(http://YOURSITE.googlepages.com/container-top.gif)
top no-repeat !important;
}
div#header
{
background: url(http://YOURSITE.googlepages.com/header-fill.gif)
repeat-y !important;
}
div#main-content
{
background: url(http://YOURSITE.googlepages.com/content-top.gif)
top no-repeat !important;
}
div#sidebar
{
background: url(http://YOURSITE.googlepages.com/content-top.gif)
top no-repeat !important;
}
div#footer
{
background: url(http://YOURSITE.googlepages.com/content-top.gif)
top no-repeat !important;
}
{
background: #e2e6ec url(http://YOURSITE.googlepages.com/container-fill.gif)
center repeat-y !important;
}
body div#container
{
background: url(http://YOURSITE.googlepages.com/container-top.gif)
top no-repeat !important;
}
div#header
{
background: url(http://YOURSITE.googlepages.com/header-fill.gif)
repeat-y !important;
}
div#main-content
{
background: url(http://YOURSITE.googlepages.com/content-top.gif)
top no-repeat !important;
}
div#sidebar
{
background: url(http://YOURSITE.googlepages.com/content-top.gif)
top no-repeat !important;
}
div#footer
{
background: url(http://YOURSITE.googlepages.com/content-top.gif)
top no-repeat !important;
}
- Save this file with the extension *.css, and upload it into GPC with the name madison_style.css
Loading the Style Sheet
- As GPC remove the link tag, we need to load the external style sheet with javascript
- Write this javascript in the beginning of subtitle section or main section :
<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/madison_style.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for changing width';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/madison_style.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for changing width';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
Other Examples
- Madison One - 1 column, how to customize the template
- Madison Three - 3 columns, how to change the width
- Victoria Vinyl, create a template 1000 px width (1 column)
- Victoria Arpeggio, change the width of template (3 columns)
- Branches Template. Change the header (2 columns left)
- Simple Template, with picture as background. Using attachment fixed
More Informations
- Changing the Background
- Changing style of links
- Changing width of columns, an introduction
- Using a simple GPC template, black or white
One Day - One Label - One Wine
Discover the Most Beautiful Wineries of Switzerland, the Pictures : Clos, Domaines et Châteaux
Find a Wine with Google CSE
