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
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
page.html.php
album.html.php
dynamic.html.php
photo.html.php
block.html.php
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.
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.
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.
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
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.
Level of difficulty: Pretty easy
Level of difficulty: A little bit harder
Level of difficulty: Hard, but the most fun
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.
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.
<? if ($item->viewable()->children_count(array(array("type", "=", "album")))): ?>
this album has no sub-albums
<? else: ?>
this album has sub albums
<? endif ?>
