Klarratee Telcom

This is a pretty basic site, but shows that you can use concrete 5 to create simple and easy to update sites in a very short amount of time, with pretty much whatever you want for a layout.

Home Page Layout

Home Page Layout

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

Home Page (edit mode)

Home Page (edit mode)

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.

Interior Page Layout

Interior Page Layout

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.

Expanding Content Block

Expanding Content Block

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.

Project Details

Client

Velvet Peel

Project Link

http://www.klarratee.com/

Source Files

Layered Photoshop

Marketplace Add Ons

  • Expandable Content (modified)
blog comments powered by Disqus