The idea

To change the width of columns, we need to override the default CSS which is included in the Template

As GPC remove the usual link tag used to load an external stylesheet, we load the style with a javascript :

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href ='http://YOURSITE.googlepages.com/style_width.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for changing width';
document.getElementsByTagName("head")[0].appendChild(cssNode);
</script>

It's usual to write this script in the subtitle section of the page. Do not put this script in the title section, as GPC copy the content of this section, to create the tag <title>.

The CSS to use depends of the layout, and, if the template use pictures as background or not.



Two columns Layout (left), without pictures as background

The standard width is 470 pixels (px) for main column, 230 px for sidebar.

With this CSS, we will have a 670 and 230 px width :

#container {width: 900px;}
#main-content {width: 670px;}
#sidebar {width: 230px;}

For Lagoona Template, we need some extra statements :

#container {width: 918px;}
#main-content {width: 670px;}
#sidebar {width: 230px;}
* html #twocolumn-left #main-content {width: 675px;}



Three columns Layout, without pictures as background

Changing 140 - 420 140 px width to 180 620 180 px :

#container {width: 998px;}
#main-content {width: 620px;}
#sidebar {width: 180px;}
#sidebar-alternate {width: 180px;}

For Micro Template we need some extra statements

#container {width: 998px;}
#main-content {width: 620px;}
#sidebar {width: 180px;}
#sidebar-alternate {width: 180px;}
* html #threecolumn #main-content {width: 629px;}



Layout with pictures as background

Lagoona Aqua, Chemise Slate or Madison use pictures as background. The pictures are defined in the original css :

background: url(/-/includes/style/name1/name2/name3.jpg) position;

name1 and position depend of the template. It's easy to download these pictures using this URL :

http://YOURSITE.googlepages.com/-/includes/style/name1/name2/name3.jpg)

To change the width of columns, we need to change the width of name3 pictures !

Create the new pictures with a graphical editor and upload them to your GPC. To use them in a stylesheet use this CSS :

background: url(http://YOURSITE.googlepages.com/name3.jpg) position ;




Madison One Template (2 columns right)

Changing 470 230 px to 695 230 px

#container {width: 925px;}
#main-content {width: 695px;}
#sidebar {width: 230px;}
body#twocolumn-right div#main-content {padding: 0 25px;width: 625px;margin-left: 10px;}
body#twocolumn-right div#sidebar {padding-right: 15px;width: 215px;}


and for the 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;}


Look at an example here



Victoria Vinyl Template (1 column)

Change the standard 718px with, to get a wider look of 1000px width

#container {width: 1000px;}
#main-content {width: 1000px;}

and for the 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);}


Look at an example here



Madison Three Template (3 columns)

We will create a main section of 620 px, replacing the standard 470 px

#container {width: 998px;}
#main-content {width: 620px;}
#sidebar {width: 180px;}
#sidebar-alternate {width: 180px;}
body#threecolumn div#main-content {width: 560px; }
body#threecolumn div#sidebar{width: 168px;}
body#threecolumn div#sidebar-alternate{width: 128px;}


And for the pictures :


body div#container {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
!important;}
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;}


Look at an example here


Victoria Arpeggio Template (3 columns)

We change the standard of 140 - 420 - 140 to 230 - 520 - 230

#container {width: 980px;}
#main-content {width: 520px;}
#sidebar {width: 230px;}
#sidebar-alternate {width: 230px;}
* html #threecolumn #main-content {width: 529px; margin-left: 0;}
#threecolumn #footer {padding: 0 258px 10px 274px;}
#sidebar-alternate {width: 219px;}
#main-content .wrapper {padding-left: 12px;padding-right: 24px;}
h2 {margin: 0 0;}

We need to change 5 pictures /(718 px to 980 px) : fixed-header.gif, fixed-h1.gif, fixed-three-container.gif, fixed-three-footer.gif, and fixed-three-headerwrapper.gif. To define the pictures used for background, we use this css :

#threecolumn #header { background: url(http://YOURSITE.googlepages.com/fixed-header.gif) repeat-y !important;}
#threecolumn h1 {background: url(http://YOURSITE.googlepages.com/fixed-h1.gif) no-repeat !important;}
#threecolumn #container {background: #fff url(http://YOURSITE.googlepages.com/fixed-three-container.gif) repeat-y !important;}
#threecolumn #footer {background: url(http://YOURSITE.googlepages.com/fixed-three-footer.gif) no-repeat left bottom !important;}
#threecolumn #header .wrapper {background: url(http://YOURSITE.googlepages.com/fixed-three-headerwrapper.gif)
no-repeat left bottom !important;}

Look at an example here


Simple Template (1 column)

We will use a picture as background, and a thinner column. The background is defined using the CSS : background-attachment: fixed

body {background-image:
url('http://YOURSITE.googlepages.com/YOURPIC.jpg');
background-repeat: no-repeat;
background-attachment:fixed; }
#main-content {background-color: transparent;}
#container {width: 500px;border: 0 none; background-color: transparent; margin-left: 10px;}
html {background-color: transparent;}

Look at an example here


More informations

Find more informations and some examples here

To fully customize a Google Page Layout, we can also change the background. Take some ideas, in this page.