g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Home Improvement
Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Gallery 2 Header and Footer

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.


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.


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"}

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>

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.

Join us in the Digital Art and Design forum.

Add Gallery+2+Header+and+Footer to Twitter Add Gallery+2+Header+and+Footer to Facebook Add Gallery+2+Header+and+Footer to MySpace Add Gallery+2+Header+and+Footer to Del.icio.us Digg Gallery+2+Header+and+Footer Add Gallery+2+Header+and+Footer to Yahoo My Web Add Gallery+2+Header+and+Footer to Google Bookmarks Add Gallery+2+Header+and+Footer to Stumbleupon Add Gallery+2+Header+and+Footer to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Character Development Design by Mary Begin

Background Images for iBooks Author

Craft Photography - iPhones to Props

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor