How to change the GPC template: the background image, the background color (and much more)

A simple procedure to change what you want is this.

On your computer, open in a browser, a page made in GPC. View the html code, copy the style section, i.e. the code between

<style type="text/css">

and

</style>

 


Paste the style section to a css file (create a file with Notepad, copy the previous code, save and change the extension from txt to css, I'll call this file testback.css). In this file, modify what you are looking for. For example to modify the "main" width modify this code:

#container {
width: SETyOURwIDTH px;
text-align: left;
margin: 0 auto;

}

To modify the background image modify this section:

body {
font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
font-size: 83%;
margin: 0em;
padding: 0em;
border-top: 1em solid #e2e6ec;
background: #e2e6ec url(YOUiMAGE.gif) center repeat;

}

In the previous code you can also use a jpg image, a png etc.

To change the background color add, in the body zone, this code (the #00CC66 is an example) :
background-color: #00CC66;

To modify the header, modify this section:

div#header {
padding: 0em 35px;
padding-top: 2em;
padding-bottom: 2em;
_padding-bottom: 1em; /* hack for IE6 */
margin: 0em;
margin-top: 2em;
background: url(yOURiMAGE.extension) repeat;
}

To modify the footer modify this section:
div#footer {
margin-top: 2em;
background: url(YourImage.extension) top repeat;
padding: 1em 35px;
color: #7f7f7f;
}

and to to remove the gap between the body and the footer element add the code should be:

div#footer {
margin-top: 0em;
background: url(YourImage.extension) top repeat;
padding: 1em 35px;
color: #7f7f7f;
}

and so on.
Now download the css file and the background image file in your GPC account.
Next create, in GPC, the file where you would insert your background image or/and apply your changes. Click on the title element and click on "edit html" and insert the code:

<LINK href="testback.css" type=text/css rel=StyleSheet>

Click on save changes.
Using this concept you can change what you what in the predefined Google interface, just choose your template and create a file, see the html code, search what you want change (for example, as stated above, if you would change the footer locate the code related to the footer in the html code of your page), copy the related code in the css file and make your change to the style.

Finish. This works very well. See my test page
Remember that in Firefox, after adding the link for the CSS file, the page will become uneditable, but in IE it can be easily editated.

For kimjim25: to change the background image, dowload this css file in your GPC account, download this image file (the background image) in your GPC account, create and edit in GPC a new file and call it "hello". Now click on the title element of "hello", click on "edit html", insert the code <LINK href="kimjim.css" type=text/css rel=StyleSheet>
Save the hello page and view it live. Bye bye