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