Now that we have our custom background graphic in place for our Gallery 2 portfolio, we can move on to changing the default header and footer for our own.

Our first step is to put our header graphic inside the dCipollo folder, the same place we put the background graphic in the previous tutorial.

C:\xampp\htdocs\gallery2\dCipollo\

Next, we will be working in our theme folder again but this time we will be making a change to the HTML code for the main template (theme.tpl). You will find this file in the templates folder.

C:\xampp\htdocs\gallery2\themes\dCipollo\templates

At this point, the code still points the url for the header graphic to the Gallery Logo. As you can see this is done twice in the code.

We need to point the url to the location for our header graphic and change the width and height settings to match the size of our header. For the example, our header graphic is 750 px x 182 px. We make this same change in both places in the code.

Originally, the Gallery logo is aligned to the left edge of the webpage. We want to center our header graphic. When we look at the code, we see that the logo image is inside a div. That's lucky for us.

<div id="gsHeader">

Let's add a text-align style to the div to center the header image.

<div id="gsHeader" style="text-align: center;">

That should take care of the header. Now let's work on the footer. If you check out the main page of our portfolio, you will see the four graphics on the left. These are links to W3C and the Gallery project website. Because this will be a private portfolio, these links don't help promote these sites. But it would be nice for those who can see the portfolio to know what software was used to create the gallery. So we will change these four buttons to a simple "Powered by Gallery" text link. We will also want to add a copyright notice for the portfolio. Finally, we want to make the text a little smaller in size and centered on the webpage. Again we are lucky that this footer section is contained in a div.

The original code places the four logo buttons on the left of the webpage.

<div id="gsFooter">
{g->logoButton type="validation"}
{g->logoButton type="gallery2"}
{g->logoButton type="gallery2-version"}
{g->logoButton type="donate"}
</div>

We will remove these four lines of code and replace them with our own copyright notice and text link back to the Gallery website.

<div id="gsFooter">
Content copyright 2010 dCipollo Designs, LLC. All rights reserved.
Powered by <a href="http://gallery.menalto.com/">Gallery</a>
</div>

As you can see, this div has a CSS id selector called gsFooter. We can add a few lines of code to the gsFooter style to reduce the size of the text and center it on the page.

===== Before ================
#gsFooter {
padding-top: 4px;
}

===== After =================
#gsFooter {
padding-top: 4px;
font-size: 70%;
text-align: center;
}

Next, we will work on a few internal sections of the theme.