Here is a great technique for intermediate CSS users. I use this technique often for Social Media icons, buttons or any objects that have similar yet different declarations. While this technique works in all major browsers you may have trouble getting this to work in browsers OLDER than IE6. I’ve noticed that WordPress uses this technique as well.

So let’s get the ball rolling. Let’s say we’re going to have 3 squares like below.

Here is the code I used.

.square {
width:30px;
height:30px;
display:block;
border:1px solid #333;
float:left;
margin:10px;
}


<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

Now let’s set up three colors for our squares.

.red {background-color:#f00;}
.orange {background-color:#f39720;}
.blue {background-color:#00f;}


<div class="square red"></div>
<div class="square orange"></div>
<div class="square blue"></div>

How about we make one a circle using CSS3 because that’s how I like to party.

.circle {-moz-border-radius: 15px;-webkit-border-radius: 15px;}

<div class="square red"></div>
<div class="square orange circle"></div>
<div class="square blue"></div>

Here’s how this looks all put together. You can switch the colors or the circle class to any of the three squares.

<style type="text/css">
.post p {clear:both;}
.square {width:30px;height:30px;display:block;border:1px solid #333;float:left;margin:10px;}
.red {background-color:#f00;}
.orange {background-color:#f39720;}
.blue {background-color:#00f;}
.circle {-moz-border-radius: 15px;-webkit-border-radius: 15px;}
</style>
 
<div class="square red"></div>
<div class="square orange circle"></div>
<div class="square blue"></div>


Hope you enjoy this tutorial, it can really come in handy if you get creative. You could for instance make a class called .right and the only declaration could be that it floats the element to the right. If you have any questions let me know in the comments.

Working with a team

In the past my experience working with other designers/developers has been limited. I now work directly with programmers as well as a few graphic designers from time to time. Having like minded people to bounce ideas off of has helped me think differently about how and why I do things as I’m designing.

As a freelancer my only source of feedback was from the client and anyone in my Twitter feed who took notice of my project. Feedback is crucial in this line of work because it’s very easy to get lost in what your doing and lose sight of the big picture.

Designing with less restraints

During my first big project with the company one of my interviewers had commented that my work was looking better than what I had in my portfolio. The reason for this is that a majority of my clients were interested in web design packages that were competitively priced.  With keeping things competitive I could only produce a limited number concepts. I’m now in an environment where I am free to conceptualize my ideas.

In conclusion

Making the switch from freelancer to full time employee has been a great move for me personally. It’s shown me that on my previous career path that I could not have gotten as far on my own as I have now. I feel more challenged now than I have in the past six months and I feel this is where I need to be. If I were to have chosen full time freelancer over taking a position I think I would have had to work even harder to keep from becoming stagnant. I see how important it is for freelancers to network and take on bigger fish than they’re used to.

I’d love to hear your comments or questions, thanks.

body {
     background-color: #000;
     color: #fff;
}
     
#container {
     height: auto;
     width: 960px;
     margin: 0 auto;
}

If using Adobe Dreamweaver’s Source Formatting it will appear like the above. Now when I started getting into WordPress style sheets I found that some authors would code a little different.

body {background-color: #000; color: #fff;}
 
#container {height: auto; width: 960px; margin: 0 auto;}

This code writing style is a result of the WordPress coding environment. Since your probably at some time or another going to be modifying your style sheet through the WordPress Admin you won’t be able to use the Tab key in order to space your properties below your selectors. Even though this is a coding style that is a result of problem solving around the Tab key function, it also has some things I find attractive about it. This technique significantly reduces your lines of code. Since the code is being entered in a horizontal orientation you also benefit from heavy vertical scrolling. The first example I find much easier to scan through to find the desired selector.

The last thing I want to touch on is order of the properties. When I first start writing a style sheet I try to organize them but I sometimes end up breaking that order. I always try to keep related things together like dimensions, visual elements, sorting functions etc. In some of the books I read they recommend having multiple style sheets like one for appearances, fonts etc but I just don’t find that to be very efficient sometimes.

In conclusion I use a combination of these two methods. If a selector only has one property below it for example…

p {
     padding: 10px 5px;
}

I will sometimes make it one line like this

p {padding: 10px 5px;}

There is no confusion for me to find that property because it’s singular. Only thing I don’t like about making it one line is that it sticks out and is not consistent but I do like that it takes up less space. I am pretty particular and always striving to do things that make the most sense. Of course it’s going to work either way but I like to have a higher standard and good reason for doing anything.

I’d love to hear your thoughts on this, please leave a comment if you have something to contribute. Do you use the first or second example?

The site is built on a WordPress install and I modified a free theme called ComicPress to my likings. Now that I’ve had a few months to see how this is going to shape out I’ve come to the conclusion that this blog style format is really not the best solution. Since these comics are not sensitive to time I can use them out of order without it making a difference. Recycling content is going to be a key factor because those unfamiliar with the site aren’t going to dig three pages back unless they’re really seeking it out.

So after finding some sources of inspiration I have created a new concept which I am hoping to improve upon some of the things I have mentioned. We (The other authors and myself) have also talked about expanding the site to include videos, store front and possibly a blog. So below you can see that we have the current design (top) and the new concept design (bottom).

Header

The old design is dark and doesn’t reproduce well between monitor settings, so in this new design I made improvements to the look and play of the navigation. The site will grow by two pages and I think this works well.

Content Area

One thing I’m not happy with in this new design is that the comics are roughly 40 pixels smaller in width. Not a huge loss but a reduction is a reduction. The content to the right of the comic is going to go through some changes as I’m not happy with it at the moment. I’ve thought about putting the comic title above everything else and running the width of the content area. I do like the new look of the highly visible social media button which will illuminate into their respective colors upon hover. The images below the main comic will be a gallery of old comics that scroll to the right.

Footer

The footer will be the new home of the twitter feed. Some other ideas could be to post a user submited #pissmeoffand tag line and possibly have the users vote on it they like it or and maybe award the winner with a prize. The new blog post section at the moment works for me and helps get the new content up front.

So in conclusion I think this new design is going perform better and improve the look of the site. If you have any comments or suggestions I would love to hear them. I also might be creating a VLog of this process because I’d really like to share more of what I am doing for others to benefit from. Thanks!

Description:

WP FollowMe is a wordpress plugin that allows you to add a twitter “Follow me” badge on your wordpress blog.

What is nice?

This plugin is very easy to install. Setup is as simple as going to the plugins setting and entering the path to your Twitter URL. You have a decent amount of icons to chose from though at this moment it doesn’t appear you can use your own. Changing the color is simple by using Hexadecimal code under settings. Your also give the option of size and position on the page.

What is NOT so nice?

I don’t agree that what you have in the end is a “badge” on your page. It’s much more a tab that is fixed to the side of the browser. A rollover effect would help to give it more user feedback. Seeing that it already uses CSS, a rollover effect would be utilized quite easily.

In conclusion

Because this plugin is so easy to install and setup I would suggest it to anyone with limited CSS knowledge looking to achieve this look. This author is a young freelance designer and I think this plugin will get better as they continue to develop. I installed this plugin hoping it would allow you to display your followers as well.

My Rating: 2.5/5

Plugin Homepage: http://wpburn.com/wordpress-plugins/wp-followme-plugin

Now you can see “Jen” has a nice personal image of herself that is associated with the email she used to leave a comment with. A well chosen image will add a bit of depth to a comment and give you more of a human element. Below is my comment I left for Jen, see the difference? My comment looks cold and generic, like the persona you would associate with spam or some other faceless brand. Below I will show you how to fix this by updating your “Gravatar”.

What the heck is a Gravatar?

Good question, I found myself asking the same thing. If you use online forums or certain social media sites then you may already be familiar with an Avatar. An Avatar is an image that you (most times) are allowed to chose that is associated with your account. If you use multiple login accounts for Windows XP or Leopard then you might be familiar with these and not even know it. What makes a Gravatar special is that it allows you to associate an email address with an image that is globally recognized. So no matter whose blogging website you are commenting on you will see the image you setup at Gravatar.com

Steps to fix your “gray man” blues

1. Go to Gravatar.com in your browser
2. Sign up/Login (If your not already a WordPress user)
3. Click “Get your Gravatar today”
4. Use “Select an email address (below) to modify or add a new email”
5. Upload your image

Now no matter whose website you leave a comment with, your image you uploaded will appear next to your comment (Assuming the blog has comment images enabled).

• Image Editing Software (ie: Adobe Photoshop)
• An average understanding your editing software
• Notepad or other code editing software

I believe this is the best way to create any type of image rollover. Other ways are to use JavaScript but I find this unnecessary because the CSS way is very straight forward and easy to do. A example of this would be my “Portfolio” button I have on the front of my website. You’ll see when you roll your mouse over the button (On the main page) changes from a shade of green to a shade of blue.

Now let’s open your image editing software. I prefer to use Adobe Photoshop because it is the most common editing software available. For this tutorial I am going to be using a button I made when I designed this website.

This image is 222 pixels wide and 57 pixels in height. With the image opened in you edit software we’re going to change the “Canvas Size”. You can find “Canvas Size” in Photoshop under “Image” in the overhead menu.

Now the way I’ve learned to do a proper CSS Image Rollover is to use 1 image for both actions (normal position and hover position). This makes the loading of the images smoother and requires 1 less image. Let’s double the height of the “Canvas” and make it 114 pixels (Original height of 57 pixels X2). Note: Make sure you select the top center box for “Anchor:” so that we are adding the extra 57 pixels of canvas BELOW our existing image.

Make sure this image above looks like what your looking at. Next under “File” in the above menu you want to select “Place” and select the same image you’ve started with but place it underneath using snaps to ensure that it is exactly under neath.

From this point we need to alter the bottom image so that it differs from the image above. I’ve chosen to just make my button green using my original files. You can use some form of “Blending Options” to achieve a different look.

Save your file and put away your image editing software. Now open the page you want to add your button to in your favorite code writing software (ie: Notepad, Coda, Dreamweaver etc). Now lets go to your style sheet or inline styling section and add the few lines of code we need to make this work.

Ok, I’m calling this “.button_folio”, name it whatever you want just remember it so when you write your code you don’t confuse yourself. The height and width are what we want to be visible and since we are telling this to display as a block we wont see anything below 57px of the height. With the background we will be linking to our single image that we created earlier. Note that in background we have “0 -57″ this very important because we’re telling the browser to start this background 57 pixels below what it normally would.

.button_folio {
width:222px;
height:57px;
display:block;
background:url(images/button_folio.gif) 0 -57px no-repeat;
}

This is the final CSS that will tell the browser to move the background position to “0 0″ (which is 57 pixels higher) when you “hover” your mouse over it.

.button_folio:hover {
background-position:0 0;
}

Now to use this new “Class” on your page. Since this is a button and we’re using it to link to a page it only make sense to use this class on a link. Just add the code below to a link before “href” or after the URL.

class="button_folio"

Pow there you go! We made two new classes in a style sheet and called it out on the page. I believe this to be the best way to do this. I’m sure if you are a “text replacement nut” you can add text within the link instead of leaving nothing in between the tag and use a span to indent the text off the screen but I don’t really understand catering to people who don’t use style sheets.

I hope I did a good job of explaining this, this is my first tutorial on here so any feedback would appreciated.