Coyote - an Apache Roller 4.0 theme

When I started this blog I choose the Apache Roller blog application as back end. A couple of years ago I had the pleasure of evaluating several blog solutions for my employee and the Apache Roller blog did stand out in its architecture already then and now it's even more solid and flexible. It's easy to install, it's secure, it has a good architecture and it does scale (not that I think this blog will be that popular).

Key features

I'm not going to dig into the issues which I did not agree with in the default Roller templates. In a way the default Roller templates are fine but personally I wanted to address some issues.

Pages shall validate
The Coyote theme does validate as xhtml 1.0 strict with one exception. This exception are caused by links containing unescaped & characters in URL's generated by Roller core. These links does only occur in the calendar when an specific date on a tag are selected.

Pages shall use a dtd which does not put the browser in quirks mode
The Coyote theme does, as mentioned, use the xhtml 1.0 strict dtd which puts Opera, Mozilla and Safari in standard compliant mode and IE 6 and 7 in Almost Standard Compliant Mode. The only difference between these modes are the calculation of the hight on table cells.

The markup should separate structure and content and be as clean as possible
The Coyote theme use div tags only for structure. Content use html's appropriate tags which gives the pages a natural semantic. As few class and id CSS selectors as possible are used. The different parts of the page are given styling with a wider use and combination of CSS selectors.

Optimized for fast download and rendering
The Coyote theme use different technique to reduce the amount of data transferred from server to browser. Markup are made as small as possible and static content which are common for all pages are put into separate CSS and JS files to ensure that only changing data are sent from server to browser when user navigate between pages on a site. Techniques to reduce the amount of http requests to the server are also used.

Optimized for search engines
The Coyote theme consist of a natural structure giving the pages a good semantic. It also implement support for meta keywords and meta description. It does also hold the possibility to define verification codes for the Google Webmaster Tools and the Microsoft Live Search Webmaster Tools .

No hacks and nicely degradation in older browsers
The markup and CSS in the Coyote theme does not use any hacks to target any browser. Only web-standards are in use. The CSS implement an reset feature which put most new browser in an equal state making it easier to apply an more identical style amongst them. The design also use the approach that older browser are presented with a degraded design instead of trying to "hack" certain features for those browsers (the world must move forwards).

Mock-ups

Before I build dynamic templates or integrate against an system I prefer, when possible, to write static mock-ups and then implement design against those static mock-ups. So are done with the Coyote theme.

Roller consists basically of tree “pages” and have tree mock-ups;
- a weblog page
- a permalink page
- a search result page

NOTE: The Coyote theme contains a compressed version of the CSS and JS files where all comments and unnecessary whitespace are removed. This renders them fast to download but pretty difficult to read for a human. The mock-ups contain a non-compressed version of the same CSS and JS files where all comments and whitespace are intact. If you would like to dig into those files I recommend you to look at the mock-ups.

Download

The Coyote theme can be downloaded as a zip file here .

Installation

The installation are a little bit more complex than an ordinary Roller theme you'll find around. The reason are due to some changes in most of the macros which Roller use for pulling data from the business layer. Roller has a nice way to extend these macros and the Coyote theme use this function for extending the macros so the macros located in Coyote does not collide with the default macros shipped with Roller.

There was also some need to extend and change some language properties for the Coyote theme. Because there is no language files for themes in Roller these language properties must be added to the Roller core properties files.

To install the Coyote them, do the following steps:
1 – Download the Coyote theme and extract the zip file to an temporary place. You will then have two directories: /themes and /WEB-INF
2 – In the directory where you extracted the Coyote theme; copy themes/coyote/ to /themes/ in your installation of Roller.
3 – Copy /WEB-INF/velocity/coyote-custom.vm to /WEB-INF/velocity/ in your installation of Roller.
4 - If you do NOT have an file named roller-custom.vm in your /WEB-INF/velocity/ directory in your installation of Roller, rename coyote-custom.vm to roller-custom.vm .
OR
If you DO have an file named roller-custom.vm in your /WEB-INF/velocity/ directory in your installation of Roller, open coyote-custom.vm in an text editor and copy the content of the file at the end of your current existing roller-custom.vm .
5 - In the directory where you extracted the Coyote theme; open /WEB-INF/classes/ApplicationResources.properties.additional in an text editor and copy the content of this file to the end of /WEB-INF/classes/ApplicationResources.properties in your installation of Roller.
6 – Restart the application running Roller and you should see the Coyote theme in Rollers administration interface.

Know issues and future improvements

The Coyote theme are an work in progress and I have some improvements I want to do and some new features I want to add in the near future. These are:

- Putt all language into properties files - The templates does contain English language. They do also use language properties from the "common" Roller properties file. This shall go into separate language properties for the Coyote theme.
- Improve the calendar markup - The default calendar shipped with Roller are produced by an component outside the Velocity template system Roller use for templating. This made it a bit hard to make an calendar which I could pack and ship and I need to be a bit more familiar with Velocity before implementing the calendar as a Velocity template. Due to this, the calendar has a bit of an overkill in markup and renders 1.5 kb more markup than I would like to.
- Fix some minor visual IE issues in submit comment form - IE do strange things all the time. I just need to sort them out without introducing IE hacks.
- Fix script on permalink page which fails. - The scripts used in the Coyote theme are basically copied from one of the basic themes shipped with Roller. After changing some markup one of them started to throw an exception. I'll go trough all scripts and clean them up.
- Add "Share This" functions to blog posts - There are several services out there which makes it possible to promote the content on a blog. I'll add some of the most popular.
- Add better compression on CSS and JavaScript file. - Today I just remove comments and linebreaks in CSS files. I'll add JSMin and CSSMin compression to the CSS and JavaScript files during packaging of the theme.
- Add CSS for hand held, targeting iPhone and Opera Mini/Mobile.
- Improve formating of different elements in blog post. - The first functions in the CSS does reset all markup in the browser to ensure equal presentation between browsers. This does also set some formating of certain markup elements to none and renders them more or less useless. I need to apply an style making these nice and have a function again.
- Add Google Analytics
- Add Google Sitemap
- Enhance the tags into an "tag cloud".

转自【http://www.trygve-lie.com/blog/entry/coyote_an_roller_theme 】