• Valid Strict XHTML
• CSS 3 styling
• jQuery improved Mega Menu
• Fading Portfolio and Fading Sliding Portfolio options
• Working AJAX PHP contact form
• and much more…

For more information about the theme visit the official sales page on Themeforest.

I already have plans to add a few more color styles and layout options for this template so go ahead and purchase this theme! You can download updates from your Themeforest backend area anytime.

Other themes from Weborithm on Themeforest -

• InVogue

1. Design a WordPress Theme: Designing the Layout
2. Design a WordPress Theme: Slice the PSD (currently reading)
3. Design a WordPress Theme: HTML/CSS
4. Design a WordPress Theme: Convert HTML/CSS to a WordPress Theme
5. Design a WordPress Theme: Advanced Code

Now that we have our layout ready lets get it sliced up so that we can create the HTML/CSS with the images (that’s Part 3).

Since the design of the theme does not rely heavily on imagery the slicing part of this project will be very easy. This is something which I would actually recommend to a lot of new web designers. Go easy on the imagery, once you have mastered your HTML and CSS you can then take your design, and markup, skills to the next level.

To Sprite or Not to Sprite?

A lot of professionals out there swear by sprites, I use them as well, just not every. single. time. Plus, when it comes time to update your theme, or do customizations, editing your sprite can at times be a royal pain.

So I tend to go half and half on this one.

Use sprites for images that are not intended to repeat and slice the others as you normally would. Of course, you can do it any which way you like. In the end, what should matter is that you have done everything to make your theme as user friendly (i.e. load faster) as possible and for it to be easily customizable by anyone else.

Slice and Dice

The main areas that need to be sliced for this theme are the navigation and tab gradients. The inner post pages will be using some social media icons that go into a sprite and that’s pretty much it. See how simple it can be if you plan a step ahead to try and rely mostly on CSS to make your design look pretty?!

The easiest way to get your gradients sliced is to merge the layer that it is on with a new/empty layer. Then select the whole new layer, create a new document and save it. That’s it. Confused a bit? Here’s a step by step:

• Select the layer that needs to be sliced

• Create a new layer, and select it too.

• Merge both the layers with CTRL + E (CMD + E on Mac I believe)

Now select the whole layer with CTRL + A and create a new PSD document.

You will notice that the width is very large, in my case it was 960px, since I don’t want the gradient image to be that wide (as we can use CSS to repeat the image) I’m going to change the new document width to 1px.

Now paste your image in the new document and you have your sliced navigation image. In my case it’s 1px by 40px.

<- That’s it right there.

You can just as well use the slice tool but I get by faster with this method. There are many who will disagree with my method and I’m fine with that, in the end it matters what works for you.

Simply repeat this step for other gradient type images, in my theme’s case it was a total of 3 gradient images.

Creating a sprite

Now let’s create a sprite for our social icons. For my theme I used these icons from KomodoMedia.com.

The icons are 16px X 16px. So I created a new PSD document 16px wide and 146px high, to accommodate more icons below each other for my sprite.

Now all you have to do is place the icons below each other, don’t forget the spacing in between which was 16 pixels in this case, and save your social icon sprite.

It should now look like this -

Cool! Now we’re done!

That’s about it for this theme, the rest of the magic happens with CSS. Which will be posted in Part 3, Writing the HTML/CSS. (subscribe up to my RSS feed for updates)

1. Design a WordPress Theme: Designing the Layout (currently reading)
2. Design a WordPress Theme: Slice the PSD
3. Design a WordPress Theme: HTML/CSS
4. Design a WordPress Theme: Convert HTML/CSS to a WordPress Theme
5. Design a WordPress Theme: Advanced Code

Designing for WordPress can be quite an experience as you take your thoughts from a concept, to a PSD to a fully functional theme. I have been using and designing/developing with WordPress for over 3 years now and I thought I would do my part and share my process with you.

Here is my contribution of taking a theme concept through its development stages to a fully functional WordPress theme.

The Concept

Many times you will be hard pressed to NOT find a theme already available in a particular niché for WordPress. The platform is so widely used that virtually everything has been done with it, well almost everything. But have no fear as there is always room for more.

The first thing you need to do while thinking up a concept is try and not search for similar themes. This will send you on a downward spiral as you realize there are literally dozens, even hundreds, of similar themes and you will end up losing hope for creating one altogether. If there is one thing the WordPress community has shown me it is that they always like fresh ideas.

So start visualizing your concept and don’t even bother to find out if someone has done something similar. Chances are they haven’t. Your idea will be original as long as you don’t influence yourself beforehand.

The Layout

I usually start by designing my layout on paper so that I can get a general idea of where I’m headed with it, this particular one was actually done by my wife. Yeah, she rocks!

Style Theme wire frame

Your sketch does not have to be an exact replica of how you imagine your theme, as you obviously cannot get those pixel perfect measurements and other finer details like icons etc… So grab some paper, jot down the most important elements of your theme and start creating a rough wire frame structure.

Don’t even bother with rounded corners, shadows, text etc… right now, the important part is to get your ideas on paper as best as you can.

How do I decide what are the most important elements?

Well, first of all you need to decide who is your customer. For my example, I wanted it to be for a fashion/style/celebrity blogger. So I decided that these would be my most basic content points -

• Logo in the center, ads on the side
• Big images on the top left and right, with links down the center
• A central ad area below the top content, wrapped with more content and images
• A footer with links

You can revise your sketch as much as you like, or use it as a base and start getting the theme done in Photoshop (I actually prefer to just start hacking it together with raw HTML/CSS). Either way, it’s always a good step to have something to refer too during the design phase and the easiest way to accomplish that is with your sketch.

The Layout Process

I could write a whole lot of details about the process you can take for positioning elements, adding gradients and various keyboard shortcuts to make you a super key master of Photoshop, but I won’t. As there are multiple tutorials out there that show you how you do that already.

Instead, I’ll just take you on a journey and show you a step by step pictorial guide. So here are the screenshots of the process I took my theme concept through -

Get the title in first.

Added the navigation, Advertisment, Subscribe and Search areas.

Image area placements, and the links in the center, go in.

Lower content areas with an Advertisement module in the middle

Finally the footer and the bottom navigation go in.

Starting from the top, let's style the navigation, Ads, subscribe and the search area.

Add more imagery, hmm... looks like the right area could be more interactive, so let's make it a tabbed area!

More imagery...

The footer looks much better now, don't you think?

Some final font and image adjustments and we're done with the layout phase of theme development!

So there you have it. A slightly polished wire frame from which we can now use a guide* for building the HTML/CSS bit of the theme for final conversion over into a WordPress theme.

But first…

We actually need to get it ready for the HTML/CSS part.

That’s in Part 2 which you can read here – Slicing a PSD.

*If you are going to be designing for a client you might want to spend a few more hours to really get it looking spic and span, since this was for me to use a reference I left a few styling parts out (namely the footer).

The first theme is InVogue which is a perfect fit for a blog, portfolio or product showcase.

Here are some of the features -

1. Set a color style for your blog/site. (3 styles included)
2. Assign a logo.
3. Use Categories or Pages as your main navigation.
4. Modify your custom “Front Page” template
5. Turn image thumbnails On or Off in the regular blog view.
6. Assign categories to feature on your custom front page.
7. Turn the widget area below your post On or Off.

The theme is priced at $27.00, or $25.00 if you are a member of ThemeForest. You can view the demo from the product page.

Expect more themes coming from us in the near future.

Here are some amazing scenes and photos of underwater life to help inspire your next creations. It is also meant to increase awareness about marine life that clearly need our help to survive.

Kuroshio Sea by Jon Rawlinson

To start off…

If you haven’t seen the video by Jon Rawlison that has been causing sensations around the web, and is the inspiration for this post, here it is.

Download the album “Absolutes” by Barcelona here

21 Amazing Underwater Scenes for Inspiration

Underwater silhouette by user flickkerphotos

Chromodoris hintuanensis

Underwater by user welshcathy

Cathedral Cave at North Bondi

Rhopalaea by user Enje

Underwater cave by user mjwinoz

Mantis Shrimp

Zebra Crab by user doug deep

Christmas Tree Worm by user gwylow71

Soft Coral Embellished Cave by user flickkerphotos

Green Turtle by user ChangoMorado

Fish by user Enje

Daisy Coral by user Wibble Roisin

Longfin Bannerfish

Transparent Jellyfish

Belugas by user flickkerphotos

Manadalay Bay Shark Reef by user PKMousie

Sinkholes | Riviera Maya

Fish posing by JennyHuang

Underwater by Nazir Amin

Urchin by user smohundro

Our oceans are a very important part of our ecosystem and we, as designers, can make a positive impact simply by using it as inspiration in some of our works. Whether it is for commercial purposes or simply to create awareness.

Hope you enjoyed this post, don’t forget to share it with your family and friends.

So what’s new?

We received a lot of feedback in the time that WP Auctions has been live for the past year and a half and we would like to take this opportunity to thank all of you for your continued support.

As for the new features, here’s a partial list:

• Auctions in a post or page – This is one of the biggest improvements we’ve made in the plugin and one we’re really excited about for the future.
• Register to bid – A lot of people wanted to restrict auctions to trusted folk, so we implemented this feature for you.
• Alternative payment options – Don’t want to accept PayPal? You can now provide bank details or your address for wire transfers or cheques respectively.
• 9 currency options – The plugin now supports showing USD, GBP, JPY, EUR, AUD, CAD, NZD, CHF and SGD.
• New improved image uploader – No more image hosting with ImageShack. You can now upload them to your own blog.

Read more about the auction plugin, you will also find details about the affiliate program as well.

Here are a list of CSS tools and resources that you can use to speed up your development time.

Resources

1. Tutorials
2. Grids
3. Books

Tutorials

Here are some of the best tutorials from around the web, so you can get the hang of CSS.

• W3 Schools – A massive CSS tutorial database. Includes step by step tutorials, snippets, reference guides and quizzes.
• Web Developers Handbook – An extensive list of web development resources (focusing primarily on CSS) including tutorials, highly requested code snippets, tools and more. The ideal starting place for developers wishing to improve their CSS designs.
• CSS properties you never use, but should – These are all CSS level 2 properties but some of them don’t work in all browsers, so make sure and test things out before putting them into use.
• 53 CSS techniques you couldn’t live without – Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Here you’ll find a list of techniques we , as web-architects, really couldn’t live without.
• 15 CSS tricks that must be learned – The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal.
• Use CSS to do anything – CSS can powerfully open the doors to a lot of rich and unique techniques.
• 10 principles of the CSS masters – These CSS tips are gathered from some of the most respected designers on the planet. They have the portfolios to back their advice up, so you’ll know that each tidbit of advice is of the highest quality.

Image from GraceSmith.co.uk

• A list of 84 links to more useful CSS tips and resources – Probably more CSS resources than you will be able to go through in weeks, plus a month.
• 12 CSS tricks – Some interesting ways of doing things with CSS.
• 20 useful resources for learning CSS3 – As a web developer, it’s crucial to be well-informed about modern and future web standards.
• 10 principles of the CSS masters – These CSS tips are gathered from some of the most respected designers on the planet. They have the portfolios to back their advice up, so you’ll know that each tidbit of advice is of the highest quality.

back to resources menu

Grids

The best CSS grids on the web.

• Blueprint – It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
• 960 – This system is based on a page width of 960 pixels however it only works with 12 or 16 columns.
• YUI CSS grid – The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
• YAML – “Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
• The 1kb grid – This is a grid in the true sense of the word as it is comprised of the bare necessary CSS to get you started.
• Grid designer – A very easy to use grid designer to help you get started with your web project quickly.
• Layouts from Iron Myers – A ton of cross browser compatible CSS grid templates.
• Spry Soft – The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
• Grid system generator – Easily generate grids for your projects with this online system.

back to resources menu

Books

Get the hang of CSS by learning from the masters themselves.

• CSS: The Definitive Guide by Eric Meyer
• CSS Mastery: Advanced Web Standards Solutions by by Andy Budd, Simon Collison and Cameron Moll
• The Ultimate CSS Reference by by Tommy Olsson and Paul O’Brien
• CSS: The Missing Manual by David McFarland
• Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd

back to resources menu

Tools

1. Fonts
2. Navigation
3. Forms

Fonts

• Typesetter – An online application for comparison of the fonts for the screen.
• CSS font wizard – Use this wizard to experiment with font and text styles and generate sample CSS style source code.
• Em calculator – Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

back to tools menu

Navigation

• List-O-Rama – List-O-Rama will allow you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish.
• List-O-Matic – List-o-matic lets you choose the content, layout and presentation of your list-based navigation menus.
• CSS Tab Designer – CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
• CSS Menu Generator – Generates both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

back to tools menu

Forms

• JotForm – A WYSIWYG web form builder
• Quick Form Builder – Accessify’s quick form builder merges two older tools (form builder and form element generator) into one much slicker process.
• CSS form code maker – This HTML – CSS form generator will create a nice looking layout for forms.
• WuFoo – Helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

back to tools menu

If you enjoyed this list please take a minute to share it with your friends or just bookmark it using any of the links below. Don’t forget to sign up for free updates.

Here are 10 tools that can take your blogging to new levels.

Writing

If you are finding it hard to blog because you have to log in every time to write and/or format your content then you should look into getting an offline editor. Here are some of the top choices available today.

1. Qumana – This tool is available for Windows and Mac users and is quite versatile in its features. Use it to write your blog posts when you are offline and simply upload it to your blog when you are ready. It’s a good fit for the occasional or professional blogger. Download Qumana here.

Qumana

2. Windows Live Writer – If you are a PC user then you need to get yourself hooked up with this application. With easy media support, spell checking and an extensive community that releases plugins to extend the application it is one of the most popular offline blog editors around. Get Live Writer here.

Windows Live Writer

3. Ecto – With Ecto you can write and manage entries for your blog(s) offline on your Mac. You can compose, save or edit your entries and enjoy many other features such as spellcheck, creating links, adding attachments, and much more. Get Ecto here.

Ecto

Notable mention – Scribefire for Firefox.

Staying Up to Date

How does one keep up to date with information that is relevant to their interests today? Especially when it moves so fast and it is easy for you to lose track of whats happening in all the noise. Here’s a few ways that have helped me stay up to date.

1. Google Alerts – Google lets you set up “Alerts” for virtually any topic you like. Simply go to Google Alerts and type in any term you want to be updated on whenever it gets mentioned around the web. You have the option to choose getting alerts from blogs, news articles, videos or a comprehensive alert from multiple sources. This way when something happens in your topic of interest you know about it instantly.

Google Alerts

2. Delicious – One of the premier bookmarking services on the web, Delicious is still going strong and can be used to your advantage quite effectively. When you visit the “Popular” section of the site type any term you like and you will be presented with relevant results. Once you do that you can see more “Related tags” on the right sidebar, from here you can dig deeper to get more targeted results.

Creating an account lets you save and form groups for various topics of interest.

Delicious Bookmarks

3. Twitter saved searches – Twitter saved searches are almost as good as Google Alerts, if not better. On your twitter sidebar you will see a search field, go ahead and type in any term you like. After your results are displayed you will see a prompt to “Save this search“. Once you have saved it will show up on your sidebar as a Saved Search. You can then do a one click search of your term to see the latest tweets about it whenever you like.

Saved searches on Twitter

Staying Connected

Most bloggers tend to think that the conversation starts and ends on their blogs. Wrong! It can go far beyond that. Here are some tools that you can use to stay connected with your readers.

1. Aweber – Email newsletters have almost become a necessary element of blogging. Aweber provides a great opportunity for you to connect with your readers on a personal level which has worked tremendously for a lot of bloggers. Plus this way you can track everything that happens with your email and even promote special content to your readers. Sign up for Aweber here.

2. Subscribe to comments – If you want your visitors to keep visiting your blog then you need to enable your comments to be subscribed via email. WordPress has numerous plugins that let you do this, like this one. This helps them stay engaged in the discussion and helps your blog grow.

Subscribe to comments

3. Conversing outside a post – Carrying the conversation outside a blog post and letting it evolve and grow is one of the best things you can do to create an engaging audience. Some ways to do that are to actively participate in forums of your interest and occasionally point or link to your blog. The other way is to broadcast your post on twitter to your followers and share other “tweets” to gain a bigger following.

Reading and Writing

1. Books - Blogging is a very literary pastime, or occupation for some. If you want to write constantly you have to read constantly. Nothing is better than refreshing your mind with fresh content.

Naturally your first course of action is to read other people’s blogs. But this can quickly lead to distraction as you are constantly online for that. Let’s face it this IS the internet. My advice? Buy or borrow a book and go off too the park. Take your moleskine notebook and draw or doodle. Do anything out of the ordinary, except sit in front of your computer all day so that you can blog better, stronger and faster when you do.

Go outside! Photo from Ed Yourdon on Flickr

If you have any of your own tips or tools feel free to leave a comment.

Building Enduring Brands

We have come to expect a certain level of service from a number of brands that have been around most of our lives, and some that are 2 or 3 times older than a lot of us today. These are brands that are synonymous with most of our daily routines and in some ways integral to it.

It’s true that there are many companies that do virtually the same thing and are in direct competition with each other, but there’s always a clear favorite. Comparisons are usually followed by a heated debate from proponents of either side.

I’ve done some research and identified 5 key elements that any popular leading brand today has done over the lifetime of their existence.

1. Commitment to Tradition

A brand for a company is like a reputation for a person. You earn reputation by trying to do hard things well.

Jeff Bezos – Amazon

Every company that is in existence today started somewhere obscure. Whether it was a garage, a dorm room, grandma’s basement or working late nights after getting back from work. The work ethic that was used by the founder during those formative years is most likely part of the company tradition today. You probably know it as the company mission statement, the top 10 or even just a simple saying the founder must have said at one point of time.

It’s that tradition that draws a customer to a business that is now part of its persona.

2. Quality Innovation

Be a yardstick of quality. Some people aren’t used to an environment where excellence is expected.

Steve Jobs – Apple

Trying to re-invent concepts that cannot be done any other way is foolish, like a wheel for instance. Trying to innovate on a concept better than it already is the stuff that legends are made of. The iPod is a recent example. Up until Steve Jobs unveiled it the online music space was pretty much a gray area of the web and a non-existent business. Similar examples include the first laptop computer by IBM, searching the web by Google and more recently the electric car by Tesla.

3. Attracting Talent

We just want to have great people working for us.

Sergey Brin – Google

When any business grows in leaps and bounds it is bound to attract the top talent in the industry. Some of the top tech companies today receive applicants measuring in the tens to hundreds of thousands for a few hundred jobs. When you’ve built an enduring brand you can look forward to seeing it last a long time as it attracts a fresh pool of talent. As long as you don’t call yourself Lehman Brothers.

4. Knowing the Customer

In the end, the customer doesn’t know, or care, if you are small or large as an organization…she, or he, only focuses on the garment hanging on the rail in the store.

Giorgio Armani – Armani

We all have fickle tendencies. A business knows this more than anybody else as they always have to deal with us. But a business also knows that by providing just the right amount of solution a prospect will convert to a customer, offer too much and you end up losing their patience and them.

I feel many companies today are not paying attention to this important detail and are heading off into various directions where they have no idea what the outcome will be. Rather than adopting new lines of businesses, and losing direction for short term profits, they need to just stick with what they do best and continue to innovate and advance in their sphere.

5. Being Leaders

I always knew I was going to be rich. I don’t think I ever doubted it for a minute.

Warren Buffett

I wish I could have a company just like Apple that continuously delivers remarkable products. Not too mention having a solid customer base that adores you for doing just that. Or, being at the helm of travel innovation like Tesla or providing a way to harness renewable energy like GE. While I don’t exactly want to be the next McDonald’s I wouldn’t mind having a chain of global food restaurants that only supports local and organic produce.

Being a leader in your field is what provides your brand the enduring quality that few possess today and many constantly try to grab at.

Here are 7 CSS changes you can make to your blog for a fresh new look.

Make your blog fresh

1. Background colors

Changing background colors on your blog is probably the easiest thing you can do. Simply look in your stylesheet for any instances of:

{ background: #ffffff; } Note: the #ffffff is simply an example here.

Depending on the stylesheet of your blog there may be various background colors defined. If your blog uses images then you will see those written like this:

{ background: url(folder/image) }

In this case, it’s best you either contact the designer of your theme, or if you are comfortable changing it on your own go ahead and play a little. Make sure and save a backup first though!

If you need to find colors you can find the “hex values”, i.e the #ffffff, at colourlovers for the color you desire.

Now that you have the hex value of your color simply edit the CSS style and click “Update File“. Reload your blog page to see the change in color!

2. Headings

You see the “Headings” above, it is enclosed in an H3 tag. You can style all of your individual H1, H2, H3, H4, H5 and H6 tags. Chances are that you will be using the H1, H2 and H3 tags the most.

It may seem a bit confusing at first because designers like to give different styles for an H3 tag that displays in the sidebar and another style for the H3 tag that gets used in the posts. An example is this very blog here.

For the post I’ve used:

.post h3 { border-bottom: 1px dotted #474444; color: #474444; font-size: 1.7em; padding: 5px 0 10px; margin-bottom: 10px; }

and for the sidebar I’ve used:

.sidebar h3 { background: #fff; font-size: 1.6em; letter-spacing: 1px; padding: 20px 0; margin: 0; }

You need to decide which headings you want to change and find the appropriate style in your stylesheet too edit them as you require. There are a myriad variety of choices of you can use here. I’ve provided some examples of what you can do with headings below.

.your h1, h2, h3 { border-bottom: 1px solid/dotted/dashed #hexvalue; color: #hexvalue; font-style: italic; }

If you want to edit the headings even further try adding a background color, I always choose to keep them simple though. Again, the #hexvalue for a color you want can be found at ColourLovers {linked to in point no.1 above}

3. Blockquotes

This is a blockquote, it has it’s own styling applied to it. It’s meant to grab attention.

Styling the blockquote is one of my favorite aspect of blog design. A well styled blockquote is a great way to grab your readers attention in your post or page.

In your stylesheet look for:

blockquote { styles here } and

blockquote p { styles here }

The “blockquote” tag helps in styling the general look of the quote area itself. The border and background you see above are styled by declaring styles for that tag. Here’s my style code to give you an idea of what you can do with it.

.post blockquote { background: #fbfbfb url(images/quote.gif) no-repeat 10px 10px; color: #474747; font-size: 1.3em; line-height: 2em; margin: 10px; padding: 10px 10px 10px 85px; border: 1px solid #e9e7e7; }

I’ve added an image to the background, declared a background color, gave a color for the text, changed the font size, added some extra line-height, gave it a border and some margin and padding. That may seem like quite a bit, but there’s a LOT more you can still do.

For the paragraphs within the blockquote all I did was add this:

.post blockquote p { padding: 10px 0; }

So, if you want to change just one thing first I would suggest you get yourself a nicely styled blockquote.

4. Lists

This is a list in the general sense of the term, except it does not use the list styling, which would look like this.

1. List point 1
2. List point 2
3. List point 3

My list styling looks like this:

.post ul { margin: 10px 50px; list-style: disc; } - This is for the unordered list

.post ol { margin: 10px 20px; } - This is for the ordered list, shown above

.post li { color: #474747; font-size: 1.4em; padding: 10px 0; } - This is for the lists for both of the above

You can add background colors, borders, change the font size or even use a background image. People love lists and a well styled list draws crowds.

5. Links

This is the most simple change that you can make in your stylesheet, the color of a link. There’s a good chance that your stylesheet has declared the link style in one area, here’s mine.

a { color: #800808; text-decoration: none; }

a:hover { text-decoration: underline; }

You can just change the color if you like, or you could even add a background color. Here are some examples.

1. Link 1
2. Link 2
3. Link 3

Here are the styles for the above links:

{ background: #444444; color: #fff; padding: 3px 5px; } - link 1

{ border-top: 1px dotted #333333; border-bottom: 2px dotted #000000; font-style: italic; } - Link 2

{ background: #c9c1c1; border: 1px dashed #800808; color: #000; padding: 3px 5px; } - Link 3

6. Spacing

Spacing can be handled in a few different ways.

First of all, you can give the whole post or page some spacing. For instance if I added this to my stylesheet:

.post { padding: 10px; }

which would make the whole document condense 10 pixels inwards.

Secondly, you can add spacing for your paragraphs with these styles:

.post p { padding: 10px; line-height: 22px;  }

This will give the paragraphs a 10 pixel padding all around, as well as provide spacing between lines.

7. Images

If you noticed the image at the top of this post, it was enclosed in a border with a background color. For WordPress themes, most designers tend to add the default styling. However you can play around with the styles and use different hex values for colors and maybe some more padding and margin, if you desire.

My image styling looks like this:

.wp-caption { background-color: #fbfbfb; border: 1px solid #e9e7e7; padding: 8px 0; text-align: center; }

.wp-caption img { border: 1px solid #e9e7e7; margin: 0; padding: 0; }

Best practice here would be to play around with background and border colors.

So there you have it, 7 CSS tips that can change the way your blog looks and feels. If you have any questions feel free to leave a comment.

Please take a moment to share this post with your friends and do sign up for our RSS feed! Thanks!