Specializing In Custom WordPress Sites

Unleash the power of the most popular content management system on the web

Wordpress Features

Fully Responsive Designs

Fully Responsive Design Allows Your Website To Be Viewed Across All Devices

Learn More

E-Commerce Websites

Discover The Various Ways To Sell Your Products Or Services Online

E-Commerce Info

Fully Responsive Designs

Fully responsive design allows your site to be viewed on PC’s, tablets and smart devices.

E-Commerce Solutions

Couple WordPress with powerful e-Commerce solutions for online product sales.

Custom WordPress Sites

Let me show you how to take advantage of the power of WordPress customization

Customer Buzz

Our clients say it best...

After trying for months to create and manage a website on our own, we found Brian through some of his work. He provided immediate solutions for improving SEO, created a wonderful new design and visitor experience. We recommend him without hesitation!

Alicia K.

Owner, Boutique Owner

I was frustrated with our previous web designer and found Brian through some associates who had used him in the past for other projects. He was extremely helpful and patient while not only building my new website but showing me how to use it. I get prompt responses and complete answers anytime I need him.

Cindy R.

Owner, Salon

I really needed a way to showcase my art online in order to find both buyers and investors. Brian came up with the most affordable plan, the slickest design and an easy way for me to manage all my content. He even hosts my site which is great whenever there’s issues. He’s always available to answer questions.

Robert L.

Artist, Custom Art

I didn’t know the first thing about web design and stumbled around the internet trying those prefabbed template services with zero luck. I discovered I just didn’t have the time to do it right. That’s when we found Brian who listened intently while we outlined what the site should do and not just how it would look. He’s made all the difference in the world! We highly recommend him.

Sally M.

Owner, Organic Grower

Contact Me Today

Let's get rolling...

Contact Us For A Quote!

5 + 1 =

From The Blog

Tutorials & Tips

Cool Ordered List Numbers With CSS

I came across a site the other day by accident that had a really nice way of displaying the numbers in an ordered list. Actually, it wasn’t an ordered list, per se. It was a uniform list with numbers set to the left to look like a numbered list. The effect was really cool, could be adapted to a lot of different looks and colors, and is easily repeatable. 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;...

Cool Drop Caps With CSS

Here’s some really cool block style drop caps that can give your site that ‘legal’ look or , if the font is right, a gothic look. Even great for magazine style blogs! This is pretty versatile and basically drops right into your current scheme. Here’s how it works: The CSS The CSS itself is very straightforward. It lays out a class to be used with the <span> tag which would surround the first letter of the paragraph you wish to make into a drop cap. Like this: .drop-caps { padding: 3px 5px 1px 5px; display: block; margin-right: 6px; margin-top: 5px; float: left; color: #fff; background: #737b7f; border: 1px solid #393b36; font-size: 80px; line-height: 60px; font-family: times; } 1234567891011121314 .drop-caps{    padding: 3px 5px 1px 5px;    display: block;    margin-right: 6px;    margin-top: 5px;    float: left;    color: #fff;    background: #737b7f;    border: 1px solid #393b36;    font-size: 80px;    line-height: 60px;    font-family: times;} And the basic HTML use: <span class="drop-caps">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Vivamus blandit. Suspendisse potenti. Nullam vulputate, enim sed mattis aliquet, tortor augue pretium tortor, id porta massa urna id ante. Praesent urna magna, posuere a, facilisis egestas, lobortis a, nibh. Phasellus nec neque. Maecenas tincidunt, dui ut vehicula vehicula, nisi mauris hendrerit ligula, id facilisis magna elit sed erat. 123456 <span class="drop-caps">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit.Nullam tincidunt. Vivamus blandit. Suspendisse potenti. Nullam vulputate,enim sed mattis aliquet, tortor augue pretium tortor, id porta massa urnaid ante. Praesent urna magna, posuere a, facilisis egestas, lobortis a,nibh. Phasellus nec neque. Maecenas tincidunt, dui ut vehicula vehicula,nisi mauris hendrerit ligula, id facilisis magna elit sed erat. Output That will output the following: Lorem ipsum dolor sit amet, consectetuer adipiscing...

CSS Message Boxes

Colorful boxes containing tips, info, links and even warnings are very helpful in providing a positive visitor experience in navigating your website. Message boxes are sometimes the best way to point towards a specific link, state the importance of a certain item in the page, or even warn the visitor of something they should know. Creating these using CSS is a pretty simple proposition. All you need is the icons that would represent each type of box: warning, info, success and error (or, whatever type of ox you wish like ‘download’, etc). The CSS Here’s the CSS which is pretty straightforward by creating a class for each type. " ] .infoBox, .successBox, .warningBox, .errorBox { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; } .infoBox { color: #00529B; background-color: #BDE5F8; background-image: url('images/info.png'); } .successBox { color: #4F8A10; background-color: #DFF2BF; background-image:url('images/success.png'); } .warningBox { color: #9F6000; background-color: #FEEFB3; background-image: url('images/warning.png'); } .errorBox { color: #D8000C; background-color: #FFBABA; background-image: url('images/error.png'); } 1234567891011121314151617181920212223242526272829303132 " ].infoBox, .successBox, .warningBox, .errorBox {border: 1px solid;margin: 10px 0px;padding:15px 10px 15px 50px;background-repeat: no-repeat;background-position: 10px center;} .infoBox { color: #00529B;background-color: #BDE5F8;background-image: url('images/info.png');} .successBox {color: #4F8A10;background-color: #DFF2BF;background-image:url('images/success.png');} .warningBox {color: #9F6000;background-color: #FEEFB3;background-image: url('images/warning.png');} .errorBox {color: #D8000C;background-color: #FFBABA;background-image: url('images/error.png');} The HTML This part is simple. All you do is create a div using the class name of the type of box you wish to display then add your content. " ] <div class="infoBox">Content here</div> 12 " ]<div class="infoBox">Content here</div> That would look like this: Eros odio pulvinar, arcu, dignissim dis, penatibus augue egestas rhoncus lectus etiam elementum elementum nunc eu vel magna penatibus elementum. Dapibus elit integer augue. Purus...

CSS and JQuery Zebra Stripes

Looking for an easy way to create that striped look for your tables? Plus, add a little excitement with some hover effects? Well, here’s a quick example of how easy that is to do with a bit of CSS, HTML and good ‘ol JQuery! For the purposes of this tutorial we’re using some very basic methods of table creation, CSS and very simple JQuery methods to accomplish our goals. What we will be doing is adding a stripe to every other row and then adding a hover effect to the others. This tutorial is only designed to show you how these actions can be implemented. You can redo the CSS and table layout any way you wish. The HTML Let’s start with a basic table. But, for our purposes, we are using all the necessary table tags like tbody, tfoot and theadso we can further isolate exactly what rows we want to have striped. This makes it easier for JQuery to differentiate between those rows in the area that you may wish to be excluded.   Example Title Example Title Example Title Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Some Content Here Zebra Stripe Demo Notice that I gave the table an ID of ‘zebra’. This is so you can specify this particular table in the event you have others on your page or even...
Page 1 of 512345

Pin It on Pinterest