< ---- This section is 620 pixels width ---->
Changing Width of Columns
- To change width, create the following CSS (using notepad, or another text editor) :
/* change width of column */
#container
{
width: 998px;
}
#main-content
{
width: 620px;
}
#sidebar
{
width: 180px;
}
#sidebar-alternate
{
width: 180px;
}
#container
{
width: 998px;
}
#main-content
{
width: 620px;
}
#sidebar
{
width: 180px;
}
#sidebar-alternate
{
width: 180px;
}
- For Madison Template we need to adjust the width, we need to add this CSS :
/* adjust for Madison template */
body#threecolumn div#main-content
{
width: 560px;
}
body#threecolumn div#sidebar
{
width: 168px;
}
body#threecolumn div#sidebar-alternate
{
width: 128px;
}
body#threecolumn div#main-content
{
width: 560px;
}
body#threecolumn div#sidebar
{
width: 168px;
}
body#threecolumn div#sidebar-alternate
{
width: 128px;
}
Changing Pictures of Background
- Madison uses 4 pictures as background : box-bottom.gif, box-bottomtop.gif, box-fill.gif and box-top.gif
- Download these pictures, and change the width (718 px to 998 px). The adress of these pictures are :
http://YOURSITE.googlepages.com/-/includes/
style/madison/madison-three/pic_name.gif
- Upload theses files to GPC, for Madison, change box-bottomtop.gif to box-bottomtop.jpg (with .gif, there is some transparency problem). For the other files, use white as the transparent color
- Define the CSS for these pictures :
body div#container
{
background:
url(http://YOURSITE.googlepages.com/box-fill.gif)
center repeat-y;
}
{
background:
url(http://YOURSITE.googlepages.com/box-fill.gif)
center repeat-y;
}
div#container div.wrapper
{
background:
url(http://YOURSITE.googlepages.com/box-top.gif)
top center no-repeat;
}
div#header
{
background: url(http://YOURSITE.googlepages.com/box-bottomtop.jpg) bottom center no-repeat !important;
}
div#footer
{
background: url(http://YOURSITE.googlepages.com/box-bottom.gif)
bottom center no-repeat !important;
}
{
background:
url(http://YOURSITE.googlepages.com/box-top.gif)
top center no-repeat;
}
div#header
{
background: url(http://YOURSITE.googlepages.com/box-bottomtop.jpg) bottom center no-repeat !important;
}
div#footer
{
background: url(http://YOURSITE.googlepages.com/box-bottom.gif)
bottom center 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>
Another Example
- Victoria Vinyl, create a template 1000 px width (1 column)
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
Les plus beaux domaines viticoles du Pays de Vaud, les images des Clos, Domaines et Châteaux :
Find a Wine with Google CSE
