The custom designed grid layer had to mirror itself along both the X and Y axis while maintaining its eight-block pixel spacing.  Once the pattern was determined, the grid mirrored itself to produce the above appearance. The paper clip was a template-level layer with alpha-channel transparency to create the illusion of a clipboard. The wood grain texture was also a tileable template level layer. The final template stack view produced a Joomla site that appeared to be a paper cliped to a clipboard. 12345 Math 4 Ohio

Overview:

Click Here For Full-Page View.

Math 4 Ohio was a Joomla site that provided privately tutored students with self-study lessons, placement assessment testing, and online course testing. Building an online school is not a new concept, however this project took a brand new approach to its theme.

When I was first contacted about building Math 4 Ohio for a private tutoring company, I expected it to be a custom Joomla build. However, I was not prepared for the unique and one-of-a-kind concept design the client had in mind.

Instead of a standard online school Joomla template, the client wanted the entire site to look like a sheet of paper clipped to a clipboard. Click the image on the right for a full-page view.

As I considered this design, it quickly became apparent the difficult nature of the concept design. The template would have to be a custom build with several layers stacked so that the background, clipboard, paperclip, and grid paper not only displayed in the correct order, but also automatically resized as needed to accommodate site article content.

The biggest challenge was the grid paper. It might look easy but that's a deception. The grid had to be located just so, so that when the image was tiled in the layer, every line would line-up with pixel-by-pixel perfection to produce a continuous grid of exact size.

In the above image, you can see the grid was carefully laid out with 1 pixel blocks. After several versions, I finally hit on the correct size and placement so when the background tiled, each successive tile would create a continuous and uninterrupted grid.

Placing the brass paper clip was probably the easiest part of the design. I hand coded a division container directly into the template code to hold the image in the correct location. I processed the image in Photoshop to apply alpha-channel transparency so surrounding pixels as well as the area in the center of the clip would show through the background behind it.

I created the wood grain image so it would tile like the grid. The wood grain however, posed its own complications. To start with, the wood-grain layer had to be slipped in-between Joomla's body code and the site background but had to respond to body resizing. Additionally, the wood-grain image required a radius applied to each corner.

As you can see, with careful xhtml, html, css, and php coding, as well as a bit of Photoshop finesse, the custom designed site achieved the look the client desired.