Gallery3:Tutorials:Themes - Gallery Codex
Personal tools

Gallery3:Tutorials:Themes

From Gallery Codex

General discussion of theming

Why create or modify a Galley 3 theme?

Personal reasons. As the owner and administrator of your site you will spend much more time looking at it than anyone else, so you want it to look good

As a showcase for your skills and talents.

As a means to practice and develop your skills.

For fun

Prerequisites

  • FTP or SSH access to your web host.
  • An installed version of Gallery 3 platform
  • A html editor or plain text editor.
  • A graphic editing package
  • A knowledge of HTML/CSS
  • Web developer addons for your browser.
  • Google Chrome
    • Right click the part of the page you are interested in and select 'inspect element' from context menu.
  • MS IE8 +
    • Press F12 on your keyboard.

Very valuable optional extras

Understanding the Gallery 3 theme architecture

Directory Structure

DirectoryStructure.png

  • MyThemeName
    • css
      • screen.css
    • images
    • js
    • views
      • album.html.php
      • block.html.php
      • dynamic.html.php
      • movie.html.php
      • no_sidebar.html.php
      • page.html.php
      • paginator.html.php
      • photo.html.php
      • sidebar.html.php
    • theme.info
    • thumbnail.png

Importance of theme.info file

Each theme needs to contain a theme.info file, and this needs to be in the root directory of your theme directory. This file provides the platform with the hook it needs to install your theme. It also contains a description of the theme, a version number and information about, you, the author. In addition, you should stipulate whether this is a site theme or an admin theme.

Here is a sample theme.info file that can be used as a template.

name        = "MyThemeName"
description = "My theme description"
version     = 1.0
author      = "2011 MyName"
site        = 1
admin       = 0

Theme views directory

General discussion of views directory

page.html.php

album.html.php

dynamic.html.php

photo.html.php

block.html.php


Theme css directory

General discussion of CSS

Be aware that CSS stands for 'Cascading Style Sheets'. The most important part of this phrase is cascading and it is, probably, the least understood.

A CSS file is read from left to right and from the top to bottom. Any duplicate selector that comes later in a file, or subsequent css file, will overwrite those selectors from earlier.

Cascading example

Consider this example...

<style type="text/css">

h2 (
	color: red;
)

...

h2 (
	color: green;
)

</style>

<h2>Some text</h2>

The colour of the text in this h2 tag will be green, as the second selector has priority. If you find your edits are not having the effect you desire, then look for duplicate selectors that may be located lower in your CSS stack.

Specificity example

CSS can also be used to target specific instances of a selector by using either an 'id' or a 'class'. NOTE: an 'id' should only be used once per page, whereas a 'class' can be used multiple times.

Consider this example...

<style type="text/css">

h2 {
	color: purple;
}

h2.class1 {
	color: red;
}

h2.class2 {
	color: green;
}

</style>

<h2>text</h2>

<h2 class = "class1">Some more text</h2>

<h2 class = "class2">Some other text</h2>

The first generic h2 element will be displayed as purple. The second h2 element will be changed to red, and the third will be green. You have specifically targeted each element with the use of classes.

Creating a global reset

All browsers render webpages differently and that's a factor that you, as a web designer, will need to be aware of. To give yourself the best chance of creating cross browser themes, and to save yourself a great deal of frustration, you should use a global reset file. This file should set all values to '0' and all text to '100%'. Do not use the YUI file included in the Gallery 3 core as this sets a range of bizarre margins, paddings and text sizes/styles.

This is an excellent reset file File:Reset.zip from Yahoo. You can read some interesting discussions on resets Max Designs or Eric Myer

Creating your own theme

Modifying the default theme (this is not recommended)

Modifying the default theme will change the default look and feel. Doing so will also make upgrading harder because every upgrade will override your changes. However, if you want to do that, you can follow these steps for editing the CSS and page elements.

Preferred option one - copy the default theme

Level of difficulty: Pretty easy

  1. Copy gallery3/themes/wind to gallery3/themes/MyTheme (you can change MyTheme to anything you'd like to name your theme to)
  2. Edit gallery3/themes/MyTheme/theme.info See: http://codex.galleryproject.org/Gallery3:Tutorials:Themes#Importance_of_theme.info_file
  1. Editing your files
    • To change the CSS, edit the files under gallery3/themes/MyTheme/css/
    • To change page elements, edit the files under gallery3/themes/MyTheme/views/
  2. Create your own thumbnail
    • Once you've made your theme the way you want, take a screenshot and resize it so it's 200 pixels wide. The default screenshots are 200x133.

Preferred option two - modify a custom theme

Level of difficulty: A little bit harder

Preferred option three - create theme from scratch

Level of difficulty: Hard, but the most fun

Adding stuff to root album only

Edit /views/page.html.php of the theme you are using. Add:

    <? if ($theme->item() && $theme->item()->id == item::root()->id): ?>
    FRONT PAGE HTML
    <? endif ?>

Edit the 'FRONT PAGE HTML' as required with html.

Adding stuff to all other pages

Edit /views/page.html.php of the theme you are using. Add:

    <? if ($theme->item() && $theme->item()->id != item::root()->id): ?>
    OTHER PAGE HTML
    <? endif ?>

Edit the 'OTHER PAGE HTML' as required with html.

Check if album has has no sub-albums

    <? if ($item->viewable()->children_count(array(array("type", "=", "album")))): ?>
      this album has no sub-albums
    <? else: ?>
      this album has sub albums
    <? endif ?>

Notes

  • Don't give your theme a name that starts with a number. PHP won't accept a digit as the first letter of a token
    • (so you can't have "$3theme" as a variable or "class 3theme_controller").
    • the visible text can use numbers to you could still name your theme 'threetheme' and have the text show '3theme'
advertisements