S9Y Bulletproof

You haven't heard from the Bulletproof development team in quite a while for various reasons. However, today is a very special date in the BP world: Bulletproof celebrates it's first anniversary! Yes, I know, the development history post says the first BP v1.0 zipfile was "born" on the 24th of August, but BP was released with s9y v1.2, which dates to the 26th. That's why I consider the 26th of August to be BP's "birthday"

Anyway, our little project seems to have found some enthusiastic users among the s9y community, and it has certainly gotten a lot of attention. It's even being considered for becoming the new s9y default theme!

On behalf of the BP development team I'd like to thank everyone for their comments and feedback on BP here or in the s9y forums. Let me assure you that we'll continue to improve and refine it over the next couple of months and years.

Along with the release of Serendipity v1.2.1 came a new version of Bulletproof, v1.2. It's available for download at /index_serendipity[subpage]=download. (Please note that you do not need to download this release if you have installed or are planning on installing s9y v1.2.1!)

Changes in this release are:

• Fixed: Added missing # to skiplinks so they actually work.
• Added: Selective inserting of skiplinks.
• Fixed: Relocated skiplink anchors to occur just before container instead of within.
• Added: print.css stylesheet for print media.
• Fixed: Sticky entries now use dateformat defined in template options.
• Added: Basic hAtom microformats.
• Added: New class of .author to override formatting applied by address tag for entry author.
• Fixed: Entry_summary now uses dateformat defined in template options. Minor additional styling for entry_summary for better separation between summary entries.
• Added: Class of archive_summary_details.
• Added: Rules of abbr, acronym and new class of help to stylesheets.
• Fixed: Removed hyperlink from contact form.
• Fixed: Relocated frontend_header hook to occur immediately after <title> element.
• Fixed: Corrected typo in plugin_staticpage_searchresults.tpl which was emitting an erroneous '>'.
• Added: AddThis bookmarking widget option.
• Fixed: Livesearch support for navbar quicksearch.
• Added: Container serendipitySideBarTitleEmpty for sidebar items without title.
• Added: Classes and and changed structure of entries_archives.tpl and entries_summary.tpl. Also changed serendipity_Entry_Date from padding to margin.
• Fixed: Revised skiplinks. They use existing ids instead of extra skiplink achors, have a lang attribute so screen reader can identify the language used, and the CSS to hide them from visual browsers has been changed.
• Fixed: Changed 1col layout. Now both sidebars are put into one (right) sidebar sitting below the content column. Items in this sidebar are be floated left.
• Added: theme option to use user.css as an additional stylesheet to override BP colorsets.

Users using BP as their blog's template are strongly encouraged to update to v1.2. Template designers are strongly encouraged to update their BP derivates to this release also.

Major changes will be documented in this blog over the next couple of days (well, might be weeks ). The BP development team is of course available for short notice support in the s9y forums.

One of the, if not the major new feature in Bulletproof v1.1 is the possibility to add additional colorsets. Users can add their own colorset without having to edit any of the template's core files as long as they follow certain instructions.

Here's how it works: Create a new stylesheet in the template's directory, /templates/bulletproof/. The file has to be named <COLORSETNAME>_style.css, with <COLORSETNAME> being the name you want to give that new colorset. I.e., if you want to call it mycolorset, you have to create the file /templates/bulletproof/mycolorset_style.css. Bulletproof will automagically detect and include this colorset in the list of colorsets available via the Bulletproof theme options in your admin backend. You don't have to do anything else.

It might be a good idea – especially for new users – to start by copying one of the colorset stylesheets provided with bulletproof and modify it. That way, you don't have to start from scratch. Also, keep in mind that there are other stylesheets (base.css, style.css, ie5.css, ie6.css, ie7.css) included in Bulletproof. Some of these (base.css, all ie-specific stylesheets) are crucial to Bulletproof's layouts. Overwriting styles included in these files might break the layout. style.css on the other hand is kind of a fallback stylesheet – it includes many styles which are not crucial to the layout, but common styles used in all colorsets, meaning they may be overridden, but they don't have to be.

You'll also have to provide the colorset specific icons for your new colorset. These have to follow the same file naming convention like the stylesheet, i.e. a colorset specific back icon for the example mentioned above would have to be called /templates/bulletproof/img/mycolorset_back.png. These images have to be PNG images, and they have to be in the img subdirectory – otherwise the automagic detection won't work. If you feel your graphic skills are too poor or you just don't have the time to create these files, you can always copy the default ones or those used in any other colorsets. Remember, if these images are not present, visitors will only see the alternate text for them.

The Bulletproof development team has finished the most important changes and therefore released v1.1 of the Bulletproof template framework. BP v1.1 is available for download at /index_serendipity[subpage]=download.

Changes in this release are:

• added: automagic detection of additional user stylesheets (thanks to Grischa and Garvin!)
• added: new theme option for alternate display of number of comments and trackbacks
• added: new theme option to suppress the display of footer and/or header for sticky entries; also added a new class for sticky entries to make it possible to style them differently
• added: Bulgarian translation (thanks to Ivan Cenov; the Bulgarian translation might not be completely up to date, though)
• added: classes to style each row of the calendar individually
• added: new theme option to display text and/or icons for the previous/next page links
• fixed: display of the BP footer
• fixed: display of counter code in BP footer
• fixed: the link to the favicon in index.tpl has been commented out due to excessive apache error logging when it does not exist
• fixed: firefox horizontal line bug
• fixed: new classes for various combinations of sidebars and content
• added: new navigation classes for first and last link
• added: new div containers at top and bottom of wrapper
• added: support for IE5 through additional IE5-specific stylesheet; BP is still not working perfectly in IE5 (and probably never will be), but at least it is usable now
• added: default style for preformatted text in entries
• fixed: the sidebar sitenav is now contained within a .serendipitySideBarContent container for consistency
• fixed: display of 2 column, sidebar left layout in IE (all versions)

BP 1.1 will of couse also be included in forthcoming versions of Serendipity. Users using BP as their blog's template are strongly encouraged to update to v1.1. Template designers are strongly encouraged to update their BP derivates to this release also.

The development team will document these changes in detail over the next couple of days in the Bulletproof documentation blog, but right now, we all could use a little break We are, however, available for support in the s9y forums.

I bet a lot of people have been wondering what that extremely long thread in the s9y Themes forum ‘Brainstorming: What do we need template-wise?’ is all about, but never found the time or courage to read it from beginning to end At the time of writing this, the thread has 600 replies and 31777 views, it extends to 41 pages and has been going on for about seven months.

Well, this thread is where the magic of Bulletproof happened, it's where it all began with an initial post by me. Basically, I was looking for inspiration, ideas for new s9y templates, trying to figure out what kind of templates were needed. A lot of people chimed in on this suggesting various things. Somehow, this all ended up in the decision to start a ‘template framework’, a base template which would be a good starting point for new templates.

Since than initial post, seven months have passed, and now Bulletproof is finally finished (Well, more or less ). Here are some memorable dates from this long development period:

• Jan 23: That was the day I posted a request to the Themes forum on to brainstorm about template needs
• Jan 26: the first bulletproof zipfile is available
• Mar 12: switching the feed icon for colorsets works
• May 11: the customizable header image works
• Jun 11: the documentation blog is up and running
• Jul 24: first snapshots of the new admin template
• Aug 24: the final Bulletproof v1.0 zipfile

So, it's been quite a ride. We've hit some rough patches along the way, it's been frustrating sometimes, but also a lot of fun. Hopefully, this will also be a lot of fun for the people using it as a template or framework

In the entry on theme options I mentioned the date format and referenced to the strftime section of the PHP manual. While coders and other geeks will already be very familiar with this, new users and those with no PHP experience probably will not be. So let's see what all those funny little characters actually mean.

%A, %B %e. %Y, what the hell is that supposed to mean? Well, these are variable which basically tell Serendipity how to display a date using the PHP function strftime. Every combination of % and a letter stands for a part of the possible date formats. These are the variables actually used in Bulletproof:

• %a or %A Abbreviated (%a) or full (%A) weekday name.
• %b or %B Name of the month. Again, abbreviated or full.
• %d Day of the month as a number with leading zero, i.e. ranging from 01 to 31.
• %e Same as %d above, but with a space instead of the leading zero, i.e. ranging from 1 to 31.
• %m The month as a decimal number with leading zero, i.e. ranging from 01 to 12.
• %y or %Y The year as a decimal number, either with a century indicated (%Y) or without (%y)

These can be combined with dots or hyphens to format the date display in a Serendipity blog. For example, the default date format in Bulletproof is the one mentioned above: %A, %B %e. %Y. This means the date will by default be displayed like this in a blog configured to use the English language:

Full weekday name followed by a comma, then full name of the month and decimal day of the month without a leading zero followed by a dot and the year with century indicated.

For example, for the time of writing this entry, that would result to

Tuesday, August 21.

Got it? However, if this sounds too complicated, just stick with the default or play with the theme option until you get a satisfying result

A frequently asked question (or better: feature) in the s9y forums has always been adding an additional navigation to a s9y-powered blog. In the past, this required modifiying the template's files, until the theme options were added to Serendipity's features. Bulletproof provides an additional navigation bar which can be extensively customized using the theme options. Since these options are very powerful, they will be explained more in detail than the other theme options.

First of all, let's look at the theme options related to the customizable navigation bar:

• Position of the navbar: Choose one of five options for the position of the navigation bar. It can be displayed above or below the banner or in either sidebar. Of course, it can also be deactivated altogether.
• Show navigation links in the footer: The links from the navbar can also be displayed in the page footer as an additional navigation source. These links will be the same links you have in the navigation bar. They are a copy of the navbar links, placed in the footer as a site visitor convenience. When enabled, your visitors will not have to scroll back to the top of the page to use site navigation. Footer navigation links will not be displayed if the navbar is deactivated.
• Show quicksearch in the navbar: If, and only if, the navigation bar is displayed above or below the banner, the input box for s9y's search option can be displayed within the navigation bar. This does not work if the navbar is displayed in either sidebar! Also, the HTML output of the quicksearch sidebar item will be automagically suppressed, you do not have to deactivate it under "Configure Plugins".
• Title for navigation menu: If the navigation menu is displayed in either sidebar, it should have a title. Use this text box to enter the desired title. This title is only for when the navigation menu is displayed in the sidebar - the title will never be displayed if the navigation menu is displayed above or below the header.

Bulletproof's primary design goal originally was to build a layout base which would make it possible to have the "traditional" website/blog layouts so the layout would not break in any modern web browser. Along the way, we also made great use of the so-called "theme options". These are certain options for the template the user can modify in the admin backend under "Manage Styles".

We're pretty confident we have addressed almost every need a user could have and also have simplified some tweaks to a s9y-based weblog which have been frequently asked in the forums in the past. Let's walk you through the theme options available in bulletproof in their order of appearance, shall we?

Although bulletproof is meant to be used as a framework for new templates by template designers, it can also be used as a template out of the box. bulletproof ships with three individual colorsets:

Purple

Blue

Green

All colorsets can be customized to some extent using the theme options.

bulletproof comes with 6 basic layouts:

This covers the most popular layout types for websites and blogs: 3-column layouts with various sidebar combinations, both 2-column layouts possible, and an additional 1-column layout showing the sidebars below the actual blog content (the entries). All of these layout are flexible, meaning their column's widths adjust to the width of the viewer's browser window.

You'll notice some of them are marked CF (content first), meaning the actual content of the blog (the entries) is the first item in the output code generated by Serendipity. It would have been possible to make all layouts CF, but that would have required additional HTML markup which we, the developers, felt was not worth the effort.