The designer really went the extra mile with this one.  The screenshot here shows how they had each .psd laid out perfectly with margin and padding already accounted for for each area of the site.  In addition to this there were hard copy print outs with annotations for color, font and size everywhere that it was required.  It's not a lot of extra time for a designer to do this, but it can actually save hours of development time in the long run.  I was able to get coding right away instead of spending hours inspecting and measuring all of the photoshop files.  It's sometimes the little things that make the biggest difference in whether a job is streamlined and awesome or tedious and boring.

The blue boxes are a custom template for the content block.  Then the div added to that content block is hit with some javascript to round the corners to create a smooth corner out to 12px for the center most radius, regardless of div height.  It's a simple way to achieve an effect that the designer wanted that couldn't be done with css alone, and degrades nicely.

Nothing special, just simple to manage pages. 

The header image is treated with a little extra css love in edit mode, getting rid of the border and padding added by default to the ccm-block by the concrete 5 content management system.  I often find that there are several small 'adjustments' that are needed in the edit mode of most templates in order to keep them from totally breaking the layout once you go into edit mode. 

It might take you 8-14 hours to code up the overal 'blocking' of a theme, then take as much as 25% of that time again making everything work properly in edit mode.  In this case it's a simple enough theme that it only took a few minutes and one adjustment.

The design of this site originally called for an animated intro on the home page.  After I coded that up, they decided that they liked it better to have a 'next' button instead of automatically having the animation play. 

Originally this was an animation and everything was on one page, they decided to turn it into two pages after the first round of edits.

One of my first "do it really quick" blocks was programming up a block for the advisor bios.  They can attach photos and vcard objects, plus edit title, email, phone number and paragraph text.  This block has ended up being the basis of several other staff bio blocks on different sites, but none of them are sites I can list off in my portfolio yet because not all of them are live yet, and I don't remember which ones are actually using it.  But the code has been solid, it morphed into an expanding bio block on one site and a custom bio block that allowed changing of the image border color and adding in twitter and facebook links on another site. 

I'm a big fan of code reuse.

Eventually I might want to expand and standardize this block a little bit and maybe submit it to the marketplace with some extra features, I'm not sure.  I think ideally it would be tied in with the user model on the site but I'm not sure if that's necessary.  Not everyone that is an employee of a company is necessarily going to have an account on the website, so maybe it makes more sense to simply have the block be just a block, not tied in with the user object at all.

The home page is pretty simple, just a slideshow block and a scrolling ticker, then some content areas.

In edit mode we see that the scrolling ticker is not a custom block or anything, it's a series of content blocks.  I use  $a->setBlockWrapperStart('<div class="scroll-item">'); and $a->setBlockWrapperEnd('</div>'); to wrap the blocks in a div when you leave edit mode, then use jquery scrollable and autoscroll to make the marquee actually move.

The interior page layout is pretty similar to the home page layout, with some extra areas for adding content.  The hardest part was actually trying to make sense out of the font sizes and colors in the photoshop document and translate them into tinymce.

I thought that the marketplace add on "Expanding Content" would work great for the expanding content blocks they wanted on this page, but it turned out to have some bug that made it unuseable.  I ended up rewriting a fair amount of the block to get the header toggle links working the way that I wanted them to work. 

We also started out thinking that we would use Nivo Slider for the slideshows here but they ended up deciding on just using the built in slideshow block.  So there really wasn't a lot of stuff that was from the marketplace or custom on this site.

You can choose to keep either a number of pages or a number of days worth of pages in the recycle bin.  The cleanup script will automatically run when you delete pages to clean up old ones and remove them.

You can delete a page forever at any time from the recycle bin list.  You are given ample warning that you are in fact going to delete the page.

If you decide that you deleted a page in error, you can easily choose a new parent page and copy the page back into your site map.  No complicated dragging and dropping, just browse for the page and choose it.

The deleted pages are listed here.  You can easily restore or delete them.

This theme looks simple on the surface, but each element that you look at can be styled several different ways.  Different types of content are styled to match each other.  The home page is a perfect example, made up of popup video blocks.  Each one of these blocks has a custom template to style the border of the image properly.  The idea is to keep the design from looking stale by using the same look for everything, and I think it works quite well.

The spec documents showed video being played from a thumbnail image in a pop-up video player.  When we started the site, they only had vimeo versions of the videos, but we knew that we were eventually going to want to move to flowplayer video for the final 'go-live' version of the site.  I built the block to rely on other built in and marketplace blocks to display it's video from any one of Vimeo, YouTube or FlowPlayer videos. 

This made for the most complicated block control interface I'd ever programmed.  There's a lot of interactivity programmed on the buttons and widgets to make sure that saving validates properly and that the interface works as expected.  It was a great learning experience.

There were several changes in the eventual marketplace release of this block, but Welcyon is where it was first created.  It's been a pretty good seller with pretty decent reviews, people really seem to like it. 

They wanted a secondary page for people with franchise access to log in, I modified the existing login page to be a little simpler and live in a different spot in the site, then redirect people to a different page on login if they're in the correct group.

Seems like every site ends up needing one or two of these - we made a custom contact form and a custom franchise inquiry form for this site.

I adapted some javascript code from another site and some gallery code from a free marketplace add on and extended them a bit to make a custom slider for the tour pages.  You can set two titles and a paragraph of text, either for all photos at once or individually for each photo. 

When I began work on attributes slider I came back to this block thinking it would be a good starting point for putting in the code for editing the attributes but it ended up not working.  I needed to put the attribute form in a popup modal dialog in order to save the form fields properly.

Still, at the time this was another pretty complicated block for me to program and it came together quickly and nicely, I was quite pleased with how this slider turned out.

The Designer Content add on was the start for this block, then I brought in the link text code from popup video block to include a link. There are several different views for this block - most of the sidebar content blocks scattered throughout the site are callout blocks.

When the html and css were supplied for this one, there was one page with something like 30 different views for callout items that would be in the sidebars.  It took quite a bit of thinking to determine exactly what was different between each of these views and distill them down into one set of master templates.

I've used the callout block idea on several different sites - this is a pretty extreme example of how versatile they can be but they are often very nice for little blurbs of content around sites.