Changing Width of Main Column


  • To change width, create the following CSS (using notepad, or another text editor) :

/* change width of main column */

#container
{
width: 1000px;
}

#main-content
{
width: 1000px;
}


Changing Pictures of Background

  • Victoria Vinyl, 1 column, uses these pictures as background : fixed-h1.gif, fixed-header.gif, fixed-one-headerwrapper.gif, fixed-one-container.gif, fixed-one-footer.gif, h3-sidebar.gif
  • Download these pictures, and change the width (718 px to 1000 px). The adress of these pictures are :



http://YOURSITE.googlepages.com/-/includes/
style/victoria/vinyl/pic_name.gif


  • Upload theses files to GPC, for Victoria, use white as the transparent color

  • Define the CSS for these pictures :



#onecolumn h1
{
background: url(http://YOURSITE.googlepages.com/fixed-h1.gif) no-repeat;
}

#onecolumn #header
{
background: url(http://YOURSITE.googlepages.com/fixed-header.gif) repeat-y;
}

#onecolumn #header .wrapper
{
background: url(http://YOURSITE.googlepages.com/
fixed-one-headerwrapper.gif) no-repeat left bottom;
}

#onecolumn #container
{
background: #fff url(http://YOURSITE.googlepages.com/fixed-one-container.gif) repeat-y;
}

#onecolumn #footer
{
background: url(http://YOURSITE.googlepages.com/fixed-one-footer.gif) no-repeat left bottom;
}

#sidebar .wrapper h3
{
background: url(http://YOURSITE.googlepages.com/h3-sidebar.gif);
}



  • Save this file with the extension *.css, and upload it into GPC with the name victoria_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/victoria_style.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for changing width';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>


Another Example


Change the width of Madison Three Template (3 columns)


More Informations