If there is any part of this post that doesn’t make sense, it’s because I’ve changed the theme again since I wrote it. …I needed more color. It’s still pretty minimal

I decided it was time to make a change here, design wise. I wanted to make more of a minimalist type of design, without it looking completely plain. So, the design has a few splashes of color here and there. I was mostly inspired to go this route after navigating through minimalsites.com, which is a gallery of minimalist website designs.

Another thing I wanted to get away from, are the normal link colors such as blue. There’s nothing wrong with that, but I was ready to do something different, so I’ve gone with a purple(#990099) as my primary link color. Also, as you can see, I added a yellow background to the site title, as well as to the links within an a-side post.

One thing that runs the risk of being confusing to some folks, would be the fact that I used the same font properties on several different elements. For instance, the headings in the sidebar are the exact same font as the post meta information. Some of that text being links to comments, etc., some of the text is not. The reason I did this was that I thought it gave the design a more polished look. In my opinion, minimalism shouldn’t be plain and boring, but should have subtleties that add a touch of class. I hope I accomplished that with this.

The Future of the Design

I plan to make this theme publicly available in the near future. It won’t make any big splash in the WordPress community. I won’t promote it. But those who like it and would like to use it, it will be here.

When the issue first came to my attention, there were plenty of people telling me “not to back down”, and that I “should speak to a lawyer”, etc. I realize now that I got way too caught up in this.

When I first spoke to Dave from NMM, I felt like he patronized me, and didn’t hardly give me an opportunity to speak. It made me mad. Maybe I took him wrong, maybe I didn’t. Either way, I should have left the issue alone, because in the grand scheme of things, it’s just a WordPress theme, which honestly, are a dime a dozen.

To Dave: I’m publicly apologizing for the part I took in this. My pride is not worth trying to make you look bad. You told me what happened, and I wish I had just taken your word for it. I don’t need to examine the code to say that.

Someone left a comment that they thought I was trying to milk this for all it’s worth. I can see how it looks that way, but that’s not what I want, and I don’t want to try and get attention by making someone else look bad. So Dave, staff of NMM, and people of the blogosphere, I hope you will overlook my prideful behavior.

Whether you blog or have a static website, there are plenty of reasons to bring special attention to certain elements within your page.

In my last post, I showed you an easy way to wrap text in a box using CSS by placing the CSS/HTML code directly in your post. That can come in extremely handy in the right situation. But what if you put this block of info in every post, or every other post, or once a week? Even though it’s not difficult, re-typing that code every time could become a chore. In this post, we’ll look at how to get the same effect by adding the CSS in your stylesheet once, and assigning a class to the div we wrap around the text.

The first step, is to place the code in your stylesheet that will form the appearance of the box. In WordPress, the file is called style.css. In CSS, an element that is assigned an id is marked with a #, and an element that’s assigned a class is marked with a .(period). Here we will use the latter. For this example, we’ll name the class, “special”. Here’s an example of the CSS that was used for the box at the top of this post. You can use something similar in your stylesheet. Of course, you can edit and adjust it any way you want.

That was easy enough, huh? Now those of you who are not at all familiar with a stylesheet, I can assume you are wondering where in the stylesheet this code would go. Truth is, it doesn’t really matter. I placed mine around the other post-related styles, just to make it easier to go back and find if I want to.

Now all that’s left, is to place that div around our text. Here I’ll use the same text from the example at the top of this post.

You can also set up different colors pre-loaded in your theme. Just give each one a different class name. Now the great thing about this, is the next time you want the same box to wrap around a block of text, the div and class is all you have to add to the post. The style is already in your stylesheet!

1. The first step is to create the message:

*Notice to Readers – On December 25, I’ll be spending the entire day with my family and visiting relatives, so I will not be posting this year on Christmas day. I will resume my posting immediately after the holidays. Have a Merry Christmas!

2. Next, we’ll wrap the message in a div and add some style:

The orange text is the code to be placed around the message.

3. There is no third step. That’s it!

I love that you can make this an effective part of your website, and it’s just not a difficult process to include. Even if you’re not familiar at all with CSS, you should be able to look at the code and distinguish what controls each element. Enjoy!

If you’re like me, the term generally opens the mind’s eye to different color schemes, different layout choices, and a host of other elements that shape and form the way a website looks. However, the more I learn about design and information architecture, the more I realize that perhaps both the architecture and appearance play equal roles in web design. I’ve spent some time lately trying to improve my website. Part of that has been tweaking the visual design, but more importantly, making my best content as easy as possible to find. I’ve had a few goals in mind for a while now, which I think are a good starting point:

• Rather than try to impress with graphics, keep usability the central focus.
• Create better navigation that high-lights some of my better posts.
• Create an original standards-based theme that focuses on my content.

Getting Started

The primary change I’ve made thus far has been in the navigation/sidebar, where my priorities have changed. No longer do I have page navigation in both the sidebar and a horizontal navigation menu. I’ve realized that if I have the horizontal menu above my content, there’s really no need in putting those same links in the sidebar. Not only is it a waste of precious space, but it can also be confusing to someone who doesn’t already know their way around my site. Aside from cutting out duplicate links, I also wanted to bring some of my best content to the forefront.

Possibly, The Most Important Aspect

I decided to bring what I feel are some of the primary articles that bring traffic from search engines toward the top of the sidebar, where they’re much more visible. Perhaps these are my “flagship” posts. Whether calling the list “Best of Antbag” is the best choice, I’m not sure. I’ll be thinking about that one. I think the main point I’m trying to get across here is that “this information gets me the most attention, maybe this is a good place to start”. While the content and the site navigation are by far the most important elements of a website, wrapping that content in something that’s appealing is a huge help in gaining the interest of a visitor.

A Work In Progress

I’m certainly not through analyzing this site and trying to make it the best I can. One major goal of the future is getting my tags and categories organized better, which I think will lead to being able to build a proper sitemap. Presently, I have around 15 different categories on this blog. I would like to have all of my posts broken down into maybe 4 or 5 categories, which would be a nice list to go in the sidebar. It’s all about making the information the site contains, easy to find. I’ve also got to do a major overhaul of my about page, and outline exactly what I have to offer.

What About You?

What are some tips you would share on making a website more “usable”? What role do you think “usability plays in design? Or is design just the theme or appearance of a website? Have your say in the comments.

Since I started offering WordPress themes, I’ve noticed that a far majority of new bloggers want to customize their theme. I don’t blame them, that’s what I did too. Many of these new bloggers who are using one of my themes, contact me when running into things that they can’t figure out. I realize that there is a real blind-spot when it comes to how a page is laid out. In this post, I hope to shed a little light and hopefully clear up some of the confusion.

All Themes Are Not The Same

Generally speaking, I think that most of us have probably tried to change a few things on a CSS stylesheet before. It would make sense that what works on one, will work on the next. Unfortunately, there’s a little more to the equation. I’ve noticed that many will assume changing the width of the header, for instance, will have the same effect on all themes, however, this isn’t the case. It truly depends on how the theme is laid out in the first place. Remember, any styles applied on the stylesheet, are adding style to the HTML elements as they are defined within the HTML. So header isn’t necessarily the same from one theme to the next. It depends on how that component is defined within the HTML.

Two Common Layouts

Probably the most common way that a web page is laid out is like the one in the illustration below. One of the main components of this layout that I believe confuses a lot of people is the wrapper…..let me try to explain.

The wrapper in this illustration is nothing more than an invisible line that surrounds the other components of the design within the body of the page. It’s not always called wrapper, it can be called anything. It’s whatever name the theme designer assigns to this particular div within the HTML. I usually use the name wrapper because it makes sense to me. Now when you open your stylesheet, and apply styles to the #wrapper{} section, those styles apply to everything within this invisible line in your layout. You can add a different background color than the rest of the page, or add a border to surround the components within the div, etc. That’s easy to understand, right?

What if the design is more like the current design on my site?….where the header stretches across the entire width of the screen? That brings me to my second example of common layouts.

You’ll notice that the header is outside the wrapper in this example. If the header were included in the wrapper, it would not work right. There are a few other tricks that can be done to achieve this effect with the header inside the wrapper, but there’s not much reason. So in this example, if I set the width of the header to 100%, it will span the entire width of the screen. If I set the width to 100% in the first example, the width of the header would be 100% of the width of the wrapper. Are you still with me?

Determining Your Themes Layout

I was in the same situation at one time, because I didn’t yet understand the underlying structure. Now, when I set out to customize a theme(whether built on WordPress or not), my first step is to determine which files are the main components of the design. In a WordPress theme, that usually consists of the header.php and the index.php files. The other files that are included with the theme are also important files, but the two mentioned are generally the ones you need to look at to see how the layout is structured.

For instance, in the header.php file you’ll find the code for the site title, and possibly the navigation menu. Sometimes the site title/header and the navigation menu will be included in this wrapper. Other themes may include the menu, but not the title. Maybe neither one is included. But that’s what you need to find out before making a lot of changes on the stylesheet. If you can figure out how the site is layed out before starting your customizations, it can save you a ton of frustration.

I realize this is a simplistic look at layout, but from the questions that I get, I would say this is the biggest roadblock that bloggers run into when trying to pimp their site.

Other Posts In This Series

• Replace Your Blog Title with a Logo
• How To Change the Width of Your Blog Design
• WordPress Theme Tips: Text

Have you noticed a new trend in blog design? There are several actually, but it seems to me that blogs are getting wider. I think this is due to the fact that more people are now using larger computer monitors that easily handle a wider screen resolution, and also to make room for more information and sidebars. However, there are still those who prefer a more narrow view. Here I’m gonna take you along as I actually make one of my free WordPress themes more narrow.

The theme is Paintbrush, and it’s the second theme that became available in my line of themes. This theme comes with a width of 900 pixels. As requested by the theme user, we’re changing that width to 750 pixels to accommodate the 800 x 600 screen resolution that she and some of her friends have. When I make a change like this, the first thing I do is look at the face of the blog and determine what will have to be changed. In Paintbrush, the content of the blog is enclosed in a div that is has been given the name, “wrapper“. Inside the wrapper is the header, the posts, the sidebar, and the footer. The dark blue part of the screen is outside the wrapper. So obviously, the width of that wrapper will need to be changed from 900 pixels to 750 pixels.

Now that we know we have to change the width of the wrapper, what else will be affected by the change? Yep, basically everything inside the wrapper. Here’s what we’ll need to change:

• Header
• Header Background Image
• Horizontal Navigation Menu
• Post
• Sidebar
• Footer

I know that sounds like a lot, but it really isn’t that difficult. Here’s a tip…….we know we’re subtracting 150px off of the wrapper, right? Well, that’s the same amount that will need to be taken off of the other things on our list with the exception of the post and the sidebar. For those two, we need to take a TOTAL of 150px off, because they sit side by side. Make sense?

The Stylesheet

When you make a change in the code of your website, you should ALWAYS make a backup of the file before you change anything. It’s too easy to mis-type something and get frustrated because you can’t figure out what you did. If you have a back-up, you can fix mistakes and start all over making your changes. Now, if you aren’t familiar at all with CSS, what your looking for is a file called style.css in your theme folder. This can be done in the WordPress dashboard. Go to Themes/Theme Editor. Depending on the theme your using, this could be a breeze, or a little confusing. That just depends on how clear the code is written. This didn’t take me too long, because I coded this theme and know where everything is. But doing the same thing on one that I’m unfamiliar with would take a little longer.

What we have to do, is scroll down the stylesheet and identify the parts that we need to change. When you come to the wrapper, you’ll see a line of code that reads width:900px;. Change that to width:750px;. Now we’re gonna find the other items from our list, on this style sheet one by one. For each item, remember, subtract 150px from the width. When you come to the post and the sidebar, you have to divide that 150px between the two of them. You don’t want to make the sidebar too narrow. I think what I did was take 20px off the sidebar, and 130px off the post. This is an area you may have to test a couple of variations to see what works best. When you finish, save your changes.

All that’s left is the background header image. For the header image, the same rule applies…..subtract 150px from the width. Only thing, the image needs to actually be re-sized, not re-coded. What you need is an image editing program. There’s Photoshop, the Gimp, and a host of others. If you don’t already have one, there are quite a few free ones available that will handle this job just fine. The way I see it, there are two options here. You can crop the image, cutting out a portion, or you can resize the image to the width you want. There are advantages and disadvantages to both. Generally, I would crop the image if possible, because that doesn’t change the height of the image. Which you do is up to you. Make your decision on what you think will work best.

Next up, mmm…..hey we’re done! If all went well, everything is looking great.

Other Posts In This Series

• Understanding Layout
• Replace Your Blog Title with a Logo
• WordPress Theme Tips: Text

One very cool thing about this design, is the header image………or images I should say! First of all, this theme has random header images which is totally cool! The photos were taken by Jeff Keeton, a.k.a. Mulsanne. I used the same images before, and asked the photographer for permission to use them if I ever offered the theme for download.

It’s been exactly two months since I made the Networker theme available. It has become my most popular at this point, with over 4,000 downloads. Now obviously, I would love for Finishline to surpass it. Please check it out!

You can preview and/or download from my Themes page.

The situation has made me realize that no matter how great a tool the Theme Viewer is, to use it exclusively for offering themes is putting the availability of my themes completely in someone else’s hands. I have several new themes that will be available soon, and I’ve been waiting several weeks for the WordPress Theme Viewer to open back up for designs. I hope to continue using the site in the future, however, they will still be available here.

I’ve set up a demo site which will feature the previews of each theme. When you go to my “Themes” page, for each theme is a screenshot, a preview link, and a download link. Hopefully, this will also make the process easier for those interested in downloading…..one less click.

If any technical issues pop up with this new set up, please let me know.

This past week, I introduced you to a new design I created for my wife’s embroidery business. I had built the site with XHTML and CSS on static HTML pages. I asked for constructive criticism, and I got what I asked for pretty quickly. Based on the feedback I received plus several ideas of my own, I’ve made several major revisions. Here are the changes:

• site is now built on WordPress 2.2
• changed the domain from .info to .org – (.info address is forwarded to .org)
• new item pictures that are more consistent with each other
• did away with the sidebar – same links are in the horizontal nav bar
• h1, h2, etc. are being used more appropriately
• front page photos now click-thru to the appropriate pages
• added dialogue to the contact form

At some point, I may still change the site over to a shopping cart system such as OSCommerce. Presently, I believe this set-up will serve the purpose of the site. I also think using WordPress opens up some new possibilities, all of which I’ve yet to grasp. WordPress is such an awesome system, the possibilities are endless.

Embroidery and More