Changing skin branch top picture


  • Look at the CSS of Branches Template, to find the URL of the picture :

#header
{
background:
URL("http://YOURSITE.googlepages.com/-/includes/
style/branches/skin_branch_top.jpg") no-repeat top left;
background-color: #D2D6B1;
}


  • Download this picture and remove the branches with a graphical tool (Photoshop)
  • Upload the new picture into GPC, with the name skin_top.jpg

Defining the CSS


  • Define the new skin top picture :

#header
{
background:
URL("http://YOURSITE.googlepages.com/skin_top.jpg") no-repeat top left;
background-color: #D2D6B1;
}


  • Adjust margin for titles :

h1
{
margin:0.1em 0 0.5em 0;
}

h2
{
font-size: 1.5em;
border-bottom: 0 none;
margin-top: 0.5em;
}

h4
{
margin: 0.1em 0 0.5em 0;
}


  • Change horizontal rule (hr) :

hr
{
height: 0;
margin: 0px 20px;
background-color: #E9ECCF;
border: none;
}


  • Change the header

#header .wrapper
{
padding-left: 26px;
}


  • Save this file with the name branches.css and upload it into GPC

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/branches.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for new branches template';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>



How to position the logo in the header


  • Use a div block with float:left. Floating box allow the title to be on the right of the picture :



<div

style="float_left;">

<a href="URL of link"><img src="URL of pic"></a>
</div>


Compare with the original Template


Branches Template


Pictures as Background


More Informations




Prestigious Wineries of Switzerland
Clos, Domaines et Châteaux

Prestigious Wineries of Switzerland - Clos, Domaines et Châteaux