logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.

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.



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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Pixelmator 3 for the Mac

Pixelmator 3 Photoshop Alternative

Pixelmator 3 Review

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor