The features list is huge! Let’s get to it:

Screenshots

Here’s an example of what it looks like:

The CSS

There’s a few parts to this but most of it is very standard. The key to the round numbers is simple CSS border styling using a little trick where you set the border ‘radius’ to half the size of the height and width which need to be the same. In other words, the round areas are actually squares with the borders radiused to half their height and width which is 42px (h) and 42px (w). So the radius is set to 21px. The result is a circle. Then, we simply set the display of the number to half the size (20px) and have it centered. What you see above is the results.

The Code

<style type="text/css">
#comment-container {
	width: 50%;
	margin: auto;
}
#comment-rules{
    background:none repeat scroll 0 0 #FFFFFF;
    border:1px solid #DDDDDD;
    margin:5px 0 20px 0;
    overflow:auto;
    padding:20px;
    text-align:left;
    }
	
    #comment-rules h3,
    #user-comment-area h3.header{
	color:#666666;
    font-size:24px;
    font-weight:bold;
    margin:0 0 20px;
    padding:0;
    text-align:center;}
	
    #comment-rules ul.rules{
       width:650px;
       overflow:auto;
	   float:left;
	   border-left:
	   solid 1px #ddd;
	   list-style: none;
	   }
	   
    #comment-rules ul.rules.first{
		border-left:none;}
		
    #comment-rules ul.rules li{
        float:left;
        padding:12px 28px;
        width: 250px;}
		
    #comment-rules ul.rules li span.rule-number{
        background:none repeat scroll 0 0 #CCCCCC;
        color:#FFFFFF;
        display:block;
        float:left;
        font-size:20px;
        font-weight:bold;
        height:42px;
        line-height:42px;
        text-align:center;
        width:42px;
        -moz-border-radius:21px;-webkit-border-radius:21px;border-radius:21px;
        }
		
        #comment-rules ul.rules li span.rule-text{
            display:block;
            font-size:12px;
            line-height:16px;
            margin-left:50px;
            }
			
            #comment-rules ul.rules li span.rule-text .short{font-weight:bold;display:block;color:#333333;}
.commentText{
    color:#000;}            

</style>

And the HTML

Note that the ‘container’ is optional.

<div id="comment-container">
<div id="comment-rules">
	   <h3>Rules of Conduct</h3>
		<div class="rules-columns">    
		<ul class="rules first">
	
			<li><span class="rule-number">1</span> <span class="rule-text"><span class='short'>Title Here</span> Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.</span></li>
	
			<li><span class="rule-number">2</span> <span class="rule-text"><span class='short'>Title Here</span> Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.</span></li>
	
			<li><span class="rule-number">3</span> <span class="rule-text"><span class='short'>Title Here</span> Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.</span></li>
		
			<li><span class="rule-number">4</span> <span class="rule-text"><span class='short'>Title Here</span> Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.</span></li>
	
			<li><span class="rule-number">5</span> <span class="rule-text"><span class='short'>Title Here</span> Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.</span></li>
	
			<li><span class="rule-number">6</span> <span class="rule-text"><span class='short'>Title Here</span> Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.</span></li>
	</ul>
		</div>
		<div class="clear"></div>
</div>
</div>

The site contains a huge amount of reference data, external links and resources. To assist in the sharing of the content I integrated WordPress’ Jetpack services that allowed us to:

1. provide ability for visitors to subscribe to posts
2. provide ability to post simultaneously on Twitter and Facebook
3. provide ability for visitors to ‘share’ content to major social networks
4. track traffic patterns

The makeover included adding in some new SEO capabilities and site performance enhancements.

URL: http://www.mortgage-modification-attorney.com

 Screenshot

The project included rearranging all the prior content, updating imagery, creating a new concept and concentrating on the 4 major things they provide.

Project Highlights:

• Set up new theme utilizing accordion image slider on home page
• establish custom menu
• create custom widgets for specific locations
• install several related plugins

Link:  http://www.djkonadance.com

1. A totally custom theme design to showcase the book’s content
2. A featured slider to illustrate the beautiful artwork
3. Social networking integration to get the word out
4. E-Commerce capabilities for selling the book online
5. Previews of the book
6. Photo galleries of the real-life characters the book is based upon
7. Event calendar showcasing book signings, appearances and more

Viewing URL: http://www.lovemegently.com

In addition to building the website for their sales (which is currently under construction) we had a hand in creating the logo and labels to be used for the jars (see screenshot).

The finished site will have many features including:

• Shopping cart for online orders
• Recipes for community sharing and input
• Testimonials from users
• Fun suggestions for various ways to use their products

Among the many challenges facing me was the jQuery based menu system that involved several hidden divs that would appear in respect to mouseovers. This is a unique custom menu design that was part of their initial mockup and posed challenges to the possibility of conflicts with other jQuery elements of WordPress or the various plugins that were deployed.

Another challenge was the use of different backgrounds for each page. These backgrounds needed to extend to the full width of the content area and each had to hold it’s own amount of text overlaid. A series of templates were created for each section of their business (i.e. Company, Products and Services) . A custom ‘loop’ was created to detect the page ID and display a div class specific to that page that contained the proper background image.

As a result, the site works seamlessly using the common header/menu and the footer. Each sectional page utilizes its own method of display using columns and shortcodes.

The people at Shields Security Bags were great to work with and provided concise PSD files as mockups for each page. We agreed on using Google Fonts which made formatting the text and titles much easier.

Screenshots

Here are some screenshots of the finished product.