As I said in my previous post Gallery 3 was one of the primary drivers for building out this website again. I had previously tested the Gallery 3 installation a few times to be sure it worked – that I can upload and organize photos, view a slide show, etc. It was time though to create my own “theme” – in order to match the rest of my site. As is common my “template” (which I actually finished developing as I worked on this customization) had a consistent top and bottom – which I find easier to fit with applications.
As this was basically a new application I looked on the Gallery website to find out how to modify a template. Unfortunately the instructions on the website left some gaps – so I did a lot of hacking. The website did provide the basic information of how a theme is organized into folders:
- css – simply css files
- images – images used by the template
- js – special javascript for the template
- views – php files for the components of the gallery
The “js” folder was one I didn’t mess with but in the “css” folder I found a key file: “screen.css”. This is the main css file for the theme. In the “views” folder I found the “page.html.php” file – which also defines the basic layout of a page. I found these 2 files to be the key files to edit when modifying a theme (I agree with their recommendation – copy the default “wind” theme’s folder and modify that).
Changing the background to match site
The first challenge was to change the background of the photo gallery to match the background of my site design – the image behind everything. So I focused my efforts on the “screen.css” file – looking for the body tag. I found the body tag in the css file:
/** *******************************************************************
* 1) Font sizes, base HTML elements
**********************************************************************/
body, html {
background-color: #ccc;
font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
p {
margin-bottom: 1em;
}
The default theme had a background color set -which defined the area outside the main container of the photo album. I wanted to change this to be the same image file as the one I was using on the rest of my site:
body {
background-color: #C3026F;
font-family: 'Coming Soon', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 13px;
background-image: url(images/P8133933.JPG);
font-weight: 100;
}
The challenge was how to do I specify the location of that file – given it’s in a different set of folders. I tried to point to the site’s images folder- but basically I was unsuccessful. The reason is that this is dynamic code – therefore what I type into this css may not be what comes out. Therefore I went to plan B – and copied that image to the “images” folder of my theme. Here is the difference between what I typed in and what came out.
Original CSS
body, html {
background-image: url('../images/P8133933.JPG');
font-family: 'Coming Soon', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
Generated CSS
body, html {
background-image: url('http://www.andrewluvtrains.com/photos3/themes/andrew_wind/css/../images/P8133933.JPG');
font-family: 'Coming Soon', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
Changing the background of the container
What I wanted next to do was make it to where I could see that in the container of the photos – the space between the thumbnails, etc. The problem was I wasn’t sure what to change – which css property was it? To figure that out I needed to look at the other main file involved – page.html.php. I opened up this file and began searching for the <div> that was the “container”. Here’s what I found:
<body <?= $theme->body_attributes() ?>>
<?= $theme->page_top() ?>
<div id="doc4" class="yui-t5 g-view">
<?= $theme->site_status() ?>
<div id="g-header" class="ui-helper-clearfix">
<div id="g-banner">
<? if ($header_text = module::get_var("gallery", "header_text")): ?>
<?= $header_text ?>
<? else: ?>
<a id="g-logo" class="g-left" href="<?= item::root()->url() ?>" title="<?= t("go back to the Gallery home")->for_html_attr() ?>">
<img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site")->for_html_attr() ?>" src="<?= url::file("lib/images/logo.png") ?>" />
</a>
<? endif ?>
<?= $theme->user_menu() ?>
<?= $theme->header_top() ?>
I realized that the <div id=”doc4″ class=”yui-t5 g-view”> was the key – as this was the first div within the <body>. Therefore I had to figure out how the id of “doc4″ the class “yui-t5 g-view” was formatted. So I searched for these ids/classes through the various css files in gallery3. I had some trouble finding these files – but I had a clue that Gallery3 used the YUI framework – including the YUI grids. So I looked up the YUI Grids page to see what I could find and found a cheat sheet that explained the YUI grid syntax (the YUI framework has very good documentation). It found that the id of “doc4″ meant a 974 byte width and that a class of “yui-t5″ meant a sidebar of 240.
Therefore I was down to “g-view” – which i found in the screen.css file:
/* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */
.g-view {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: none;
}
So I needed to update this to allow for a semi-transparent background. Therefore I copied over my semi-transparent white png file to the “images” folder of my theme and updated the css as follows:
/* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */
.g-view {
/*background-color: #fff; */
background-image: url(../images/white_transparent30.png);
border: 1px solid #ccc;
border-bottom: none;
}
Fixing the sidebar
So I had my background image now showing through – but I noticed that the text in the sidebar was now hard to read. So I needed to figure out where that css was – so I could adjust it. I created a different background image – one that wasn’t as transparent and looked in screen.css:
#g-sidebar {
padding: 0 20px;
width: 220px;
}
I replaced it with this:
#g-sidebar {
padding: 0 20px;
width: 220px;
background-image: url(../images/white_transparent30a.png);
}
In my next post I’ll talk about how I added my custom header and footer to the theme.
When presenting information to a user on a web page one or many photos makes a dramatic difference (in fact I always like to include one on a blog post – like this one). The challenge I had in this iteration of my website was how to best present a series of photos related to some text on my “History with Trains” page. I could have just embedded the images right into the text – but I wanted something that looked better.
