Devir Kahan

Take a look at the top of this site. See that colored bar running along the top purely for stylistic purposes? That’s what we’ll be learning how to make today.

These bars are becoming increasingly popular these days. While sites like Shawn Blanc have had theirs since the dawn of time, others like The Brooks Review, Alex Leiphart, or my own site have only recently added theirs.

But don’t I hate cliché? If everyone’s doing it, wouldn’t I want to stay away from it? Well, the truth is that not everybody is doing it. There are still far more sites without it then with it. Thus, now is the best time to hop on board if you’d like to have one on your site - before everybody else does. Plus, keep in mind that you will be able to style it just the way you like it - your own color, thickness, even texture. But we’ll get to all that. In the meantime, I think that it genuinely looks really nice, and adds to the overall style of my site. Think of it like a tie bar, but for a website. Maybe.

And now, down to business.

1. Decide on the color that you’d like to use
   Keep in mind that just mentally choosing a color doesn’t help here. As we’ll obviously be adding this style bar using code, CSS to be exact, you’ll need to know the hexadecimal number of your color. If you have a color sample on your computer of the exact color you’ve settled on, you can use the Macs built in Digital Color Meter app to get the RGB (Red, Green, Blue) values of that color. Then hop into an image editing app such as Acorn, open the color palette, switch the the RGB pane and enter in the values, then switch to the # pane and copy the color code to your clipboard.

   On the other hand, if you do not have a color sample, have yet to decide on a color, or have absolutely no idea what I just ran through above, take a look at this to choose a color and its corresponding number.

2. The code
   html { border-top: 5px solid #069CAD; }

3. Insert the code
   If your site is hosted on Wordpress, you’ll no doubt know where to insert the code - it’ll be somewhere within the header tags. If your site is hosted on Tumblr, like mine, just head to your dashboard, click on customize appearance, and then click on the Advanced tab. Simply paste the CSS into the Custom CSS text field, and you’re all set.

4. Customize
   The above is relatively straightforward CSS code, and this is relatively easy to alter. Obviously now is the time to swap out the default #FFFFFF color value for your number code. You can also adjust the thickness of the bar by simple changing the thickness number to a different value - be it smaller or larger.

5. Bonus: Texture your bar
   This is already more advanced, so if you want to do this, I’m going to assume that you already have some background in the matter and thus am not going to go as in depth as above. Essentially, if you want to give your bar a little texture like mine has - and from a design perspective, a little is all I suggest - you’ll need to get a super small PNG file colored and textured just how you like it. Upload the PNG to a server of your choice and then use the following code to tile it as your bar at the top of your site:

   body { background-image:url('paper.gif'); background-repeat:repeat-x; }

And that’s it. You got yourself a bar on your website.

If you liked this little How-To article I plan on doing some more in the near future, so stay tuned.