Changing Background and Color of Main Content
Changing background
- Apply to the div id="main-content" (this section)
- Change the background-color (#CCFFFF)
- Inserting a picture at the top of the section with these CSS clauses :
#g_body
{
background-image: url(url of the picture);
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}
(Minor differences between IE 6 and FF 2, title Changing background is under the picture with FF)
- Add this to the first section of the page (after the header) :
<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';cssNode.rel = 'stylesheet';
cssNode.href = 'http://SITENAME.googlepages.com/CUSTOM_SHEET.css';
cssNode.media = 'screen';
cssNode.title = 'change background';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
Changing Color of Background
- Click on the color :
| . | . | . | . | . | . | . | . | . | . |
- Just define the color for the body :
body
{
background-color: #xxxxxx;
}
{
background-color: #xxxxxx;
}
Changing Background of Container
- Change the CSS for id #container
#container
{
background-image: url(url of the picture);
background-repeat: repeat-y;
background-position: left top;
}
{
background-image: url(url of the picture);
background-repeat: repeat-y;
background-position: left top;
}
A Background for a div block
- We create a div block and define a background :
.divback {
background-image: url(url of the picture);
background-position: top center;
background-repeat: repeat-y;
border: solid 2px #7b84af;
width: 470px;
}
background-image: url(url of the picture);
background-position: top center;
background-repeat: repeat-y;
border: solid 2px #7b84af;
width: 470px;
}
- The result :
The Background Problem
- Most of the GPC templates use picture to define the background
- In the default CSS we can find :
background:
url(/-/includes/style/x1/x2/x3.gif) position;
url(/-/includes/style/x1/x2/x3.gif) position;
- To change the color of background or the width of sections, we need to change these pictures. To download a picture, use this address :
http://YOURSITE.googlepages.com/-/includes/style/x1/x2/x3.gif
- With a graphical tool, we can change the picture, and upload the new one into GPC. To use it in CSS, we use then this address :
background:
url(http://YOURSITE.googlepages.com/new_x3.gif) position;
url(http://YOURSITE.googlepages.com/new_x3.gif) position;
- Note : Some template, use by mistake /include/ as subdirectory (without s)
Some examples
More Informations
- Changing style of links
- Changing the width of colums
- Using a simple GPC template, black or white
- Changing Opacity and Transparency
- Using a lightbox for your pictures
- Scrolling with scrollTop
- Accesskeys for your site
- Color bar
- Ajax and xml
- A blog and a feed on a site
- How to integrate a spreadsheet
- Changing the width of columns
- Internal links, indentation and drop caps
- Using frames with GPC
- Changing style of links
- Using simple template black or white
- Changing opacity and transparency
- Using a lightbox for your pictures
- Lightbox2 - To Display a Set of Pictures
- Slimbox, another clone of lightbox
- Using text box with rounded corners
- Testing Menu from ButtonGenerator.com
- Playing with iframe
- Adding titles for pictures using CSS
- Scrolling text and pictures with scrollTop
- How to integrate Google CSE to GPC
- A Plugin to add a Custom Search Engine to the Toolbar
- Fixed menus and dynamic contents
- Playing mp3 files
- Playing Video with GPC
- How to display Flickr photos on your website
- Favicon, Feed and Redirection
- Media RSS and Slide Show for your GPC Pages
- Using Float Box for AdSense
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
