Plogger 3 theme: Air

Air is a full-featured Plogger 3 stand alone theme that takes visual cues from the Yahoo! TV beta of mid 2007. The theme files validate as XHTML 1.0 Strict (while Plogger itself is either Strict or Transitional, depending on some options). The theme looks nearly identical in Firefox 2.0 and Internet Explorer 7, and uses conditional CSS to be very similar in IE6. A version of this theme is included in the official Plogger 3 build, released on 7/10/07.

Plogger beta 3 theme: Air screenshot

The fundamental changes are:

  • The theme template files are now primarily HTML with some PHP, rather than being entirely written in PHP. This will make it easier for people with basic knowledge of HTML to further customize the theme.
  • The compatibility with Internet Explorer 7 has been greatly improved. Among other things, a new float and clear bug introduced in IE 7 has been avoided. The theme is inherently much more stable and less prone to breaking in different browsers.

Note that this theme is only for use with Plogger 3. If you’re using an earlier version, it’s recommended that you upgrade.

Download the stable version (v0.1)

Download the latest stable version of the Plogger 3 Air theme here. Because I tend to tinker with things, the files here will probably be slightly more up-to-date than those bundled with the full Plogger download.

Download the “Air” Plogger 3 theme

Download the beta version (v0.2 beta)

If you don’t mind the occasional bug or glitch, download the beta version to get a look at some new features. The album view in v0.2 beta supports centered thumbnails and can be set to display each picture’s date when no description exists – take a look at album.php for commented instructions. I’ve posted some documentation regarding the method for centering the thumbnails at Centering the thumbnails in Plogger. The code should work for any fixed-width theme derived from the default, but the method could be adapted to center many other layouts that use floated list items instead of tables.

Download the “Air” Plogger 3 theme – beta

16 thoughts on “Plogger 3 theme: Air

  1. Vlado

    very nice theme! I like it becouse it’s very simple and realy good looking. Keep up doing so good work and I will wait for more good themes from you! :)
    Thanks

  2. Wendy

    I downloaded a copy of plogger3 and placed on my local testing server. The code is full of tables yet the demo page isn’t how did you get rid of the tables? Do I have to go through every php file and change things? The validator complains about a stray tag but I can't find where it comes from. I would love to code a new theme for plogger but I am boggled by where all the code comes from.

  3. ardamis Post author

    Well, the default and lucid theme files are entirely PHP, which I feel is overcomplicated. I’ve simplified things in my Air theme, so you may want to start working on your themes using the latest version of Air as a template.

    The themes don’t use tables to display the thumbnails, though. They all display thumbnails using a list, with the list items floated left. The only table I know of is the EXIF data table.

    Lots of code comes from the core file ‘plog-functions.php’. In my opinion, the core is responsible for too much code. If you’re confused about where a certain snippet of code comes from, surround the function with commented notes: <– code starts here –> (function goes here) <– code ends here –>.

    As for the stray element, I think that for one revision, the core was opening a form but not closing it, so themes developed for that version had to close it in order to validate. If your validator says the element is extraneous, check to see if it’s coming from the theme.

    Good luck, and let me know if there’s anything else I can do to help.

  4. Wendy

    Thanks. I am planning to take a closer look at the code. What I thought would be a simple process is going to take a little more time but I suppose it is all a learning process even if it is learning what NOT to do :)

  5. ardamis Post author

    Thanks for using the theme, and I’m glad you like it.

    Actually, modifying the theme to display the collections/albums
    side-by-side like the picture thumbnails is a future project of mine.
    Hopefully, it’ll be done in a week or two.

    In answer to your question, though, you’d first want to edit the theme
    to change the collection divs to float left. Basically, now they
    stack on top of each other, and you’d want them to be smaller and to
    float up against each other. If you’re not familiar with CSS, you may
    just have to wait until I get around to doing it.

  6. Pingback: Best I know … » Stuff I’m looking at today …

  7. Joe

    When you use the air theme with the integration code


    First line of HTML file -> < ?php require("gallery.php"); ?>
    In HEAD section of HTML -> < ?php the_gallery_head(); ?>
    Somewhere in BODY section -> < ?php the_gallery(); ?>

    It goes screwy in IE7 … even though it’s clear in Firefox.

    Is this fixable?

    Joe

  8. guramie

    hi.
    just try your cool theme..thanks.
    but can we get list of thumnail under the big picture as navigation. it’ may bee cool idea for the next update theme

  9. Michael

    Hi Oliver,

    I just downloaded your Air 0.2 beta and while customizing it I notices a little error. In the code breadcrumb-links while in gallery.css breadcrumb_links is being used.

    Also noticed that EXIF information is displayed centered in the columns and it’s not collapsable.

    Still great work and can’t wait for the final release.

    1. Michael

      As for the EXIF information, they were missing in the CSS, I’ve added the following and alignment is ok now.
      .exif-label {
      text-align:left;
      color: #333;
      }
      .exif-info {
      text-align:left;
      color: #666;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>