That’s It! I’m Pulling the Heavy Artilery!

Published in Blogging

Heavy Artillery
Photo by soldiersmediacenter

The first rule of blogging: write killer content! The second rule of blogging: write killer content! I’m gonna be honest here: I didn’t quite follow the rules. My best articles are still to come. I have a file on my desktop, called “Rubiqube Posts.txt”, where I gather ideas for blog posts. I have to say there are some winners there, is just that I never get the chance to actually write a compelling article. I’m busy with my freelance web design gigs, so ideas keep adding up.

So here’s what I’m gonna do: I want to share with you some of the items from that list. This way I will make a commitment to actually start writing those articles:

  1. Elance Tips: Is It a Good Idea to Show a Client Multiple Mockups?
  2. Elance Tips: Should I Submit a Mockup Before My Bid is Chosen?
  3. Elance Tips: Top 15 Clients You Should Run Away From
  4. Designing a Website The Jesse Bennett-Chamberlain Way
  5. My Thoughts And Experiences With Newsletter Design
  6. What Plugins Do I Have Installed And Why?
  7. Redesigning Rubiqube - The Birth Of a Memorable Wordpress Theme
  8. The Young Guns of The Web - Teenagers Who Make More Money Than Their Parents
  9. Top 10 CSS Frameworks That Can Make a Designer’s Life Easier
  10. 10 Simpler Actions That Will Definitely Increase The Number of Comments on Your Blog
  11. Rubiqube Blog Traffic Log (this will be a multiple part series)
  12. Where Do I Get Inspiration for All My Blog Posts?

Pffiu… That should keep me busy for a while. I would like to take this opportunity and set a new goal for myself: after I publish all these articles, I want to go past 100 RSS subsscribers. I’ll let you know how that goes.

Do you have any preference? Which articles do you think should go first? Let me know in the comments.

4 Comments

Wordpress Tutorial: Customizing Widgets Using CSS

Published in Wordpress

When it comes to design, I have an obsession with details. As you can see, most of the widgets on my sidebar have some relevant icons. In this tutorial I will explain how you can spice up the widgets in your sidebar, by adding icons and some other customizations, just by adding a few lines to your theme’s CSS. This tutorial is intended for people with basic XHTML / CSS skills.

The sidebar structure

First let’s take a look under the hood: how does the widget generated HTML look like. Let’s say you drag & dropped a couple of widgets on your sidebar. Widget ready themes are built in such a way that each widget acts as an item of a bulleted list. So your sidebar HTML will look something like this:

<ul>
	<li id="widget1" class="widget widget_1">Widget1 Content</li>
	<li id="widget2" class="widget widget_2">Widget2 Content</li>
	<li id="widget3" class="widget widget_3">Widget3 Content</li>
</ul>

The widget structure

Notice how each list item has an id attribute and a class attribute. Each widget has a generic style (widget) and a specific style (widget_1, widget_2, etc.). For example, the style for the Most Viewed Posts widget is widget_views_most_viewed. This is generated by the plugin and we’ll be using this style later on.

The HTML generated by each Wordpress widget is also a bulleted list and it looks something like this:

<ul>
	<li><a href="http://www.example.com">Link Text 1</a></li>
	<li><a href="http://www.example.com">Link Text 2</a></li>
	<li><a href="http://www.example.com">Link Text 3</a></li>
</ul>

Styling the widget

First you need to upload the icon file to your theme’s images folder. In this case the litle flame icon called ico_hotpost.gif. Next you have to add these lines of code to style.css:

.widget_views_most_viewed ul li {
	padding: 6px 0 6px 21px;
	border-bottom: 1px dotted #CCCCCC;
	background: url(images/ico_hotpost.gif) no-repeat top left;
	background-position: 3px 4px;
	font-size: 90%;
}

You have to replace .widget_views_most_viewed with the class name for the widget you are trying to style. How will you know that? Just drag and drop the widget, open your blog, do a View Source and search for the widget name. You should then be able to identify both the id and the class attributes mentioned above. You can also use the id, in this case I can replace .widget_views_most_viewed with #most-viewed.

It’s pretty obvious what those lines of code do:

  • the first one adds some space above, below and to the left of a list item (21 pixels left to make room for the icon)
  • the second one add that dotted border, to separate the list items
  • the third one specifies and positions the icon image
  • the fourth line shifts the icon image a few pixels, for fine tuning
  • the fifth makes the font a bit smaller than the one used for posts

The widget title

I almost forgot about it. If you look at the source code, you will notice that before the widget bulleted list there’s the widget title, between h3 tags. It also has a class called widgettitle. You can style this like any other element. Here’s my code:

.widgettitle {
	font-size: 120%;
	font-weight: normal;
	border-bottom: 3px solid #F0F0F0;
	padding: 0  0 5px 3px;
}
12 Comments

Redesign Coming Up

Published in Projects

Funny thing happened: Blogtrepreneur has a post about 9 design styles to get you into CSS galleries and I’m in it. My current theme hasn’t been featured in any CSS gallery yet, but hopefully the new Wordpress theme will be. I just started working on it. Here’s what I have so far:

Rubiqube 2

Here are some of the reasons that made me want to change my Wordpress theme:

  • Switch to a lighter theme and use more white space, as opposed to wood space :)
  • Move some of the sidebar content to the About page only
  • Better showcase my older posts: I will use some AJAX to show some tabbed content in the sidebar
  • Change the logo and make it stand out more
  • Better ad integration: 125×125 and some text ads for now
  • Get rid of all the icons (they are great, but a bit too much) and add a personal touch by creating some custom icons
  • Be featured in at least one CSS gallery ;)

This is just a draft I cooked up yesterday. I’ll spend some more time tweaking details.

Feel free to comment about what you think the new theme should contain. Is there something you feel is missing from the current theme? I’d love to hear your input. Thanks!

5 Comments

A Strong Personal Brand Means a Memorable Blog

Published in Design

Since I got into blogging about 2 years ago, I probably saw hundreds of blogs using beautifully designed custom themes. Still, there’s only a handfull of blogs that were memorable enough to remember after a long period of time. In most cases, what made the blog memorable was not the design itself, but the person behind the blog. Not necessarily because the blogger was a famous person, but because of the way he chose to visually brand himself.

Below are some examples of bloggers using visuals to build a strong personal brand. Of course there are other elements (achievements, networking, charisma, helping others, supporting a cause, etc.) that contribute to a personal brand. I’m strictly talking about visuals here:

Ayoush Saran - his site was recently featured in CSS Mania. The action figure representation of himself is the best creative idea I’ve seen recently. This is also a great example of how you can build a viral personal brand.

Ayoush Saran


Matt Brett - his blog went through a redesign since I first saw it, but it still keeps the same look and feel. Matt is famous for a lot of projects, like the standardization of feed icons, but I will always remember him as the guy with the grungy looking blog, who loves video games.

Matt Brett


Doug Dosberg - he’s probably one of the first bloggers to use the cartoon representation of himself, instead of a real picture. There are so many bloggers using it nowadays. Doug managed to stay memorable, by adding a little twist: the head band and the chopsticks.

Doug Dosberg


Brad, Ryan, Keegan aka The Big Noob - the big bold title, the navy blue background, but most of all the portraits on the header and the featured post, all these elements make this blog memorable. It’s probably one of the best blogs (certainly the most famous) making use of the blue / green color scheme.

The Big Noob


Matthew Mullenweg - the first time I saw his blog, I didn’t know he’s the guy behind Wordpress. Now I know he’s the #1 most important Matt in the world, but when I say Matt Mullenweg, I instantly think about the header collage, the mug, the childhood picture.

Matt Mullenweg


Lisa Bettany - Lisa is a “multimedia producer, blogger, photographer, 2.0 expert, model, actress” and also “Canada’s Sexy Geek Blogger”. Oau! She’s definitely a purple cow. She is yet another example of beauty and brains. The blog header pretty much sums it up and makes her blog so not easy to forget.

Lisa Bettany

Do you have other examples? Do share. ;)

2 Comments

How Achieving Blogging Success is Like Assembling IKEA Furniture

Published in Blogging

IKEA Plans

1. You go get the product cardboard box from IKEA

When you decide to buy a certain product, you probably go directly to its shelf and pick the product box. The first thing you do when you want to start a blog is download the blogging platform of your choice (Wordpress in my case).

2. You open the box and place every piece in an orderly fashioned way

You get home and start unpacking. You grab a cutter and open the box, arranging the pieces in such a way that you can have an overall view. You install Wordpress and make the necessary settings: you set the blog title and descripion, enable permalinks, pick a theme, that kind of things. You take care of every single detail.

3. You check if you need any other tools, and prepare those too

Sometimes the tools you find in the box are not enough, so you might need a screwdriver or some other tool. Wordpress is a great tool for blogging, but in order to achieve your blogging goals, you will also need some tools: they are called plugins.

4. You start to assemble the pieces, one by one

“The head-bone connected to the neck-bone”. Know that song? Well, assembling IKEA furniture is very similar. You connect pieces on by one and each step brings you closer to the final product. This is how it works with building blog content: you write article after article, promote your blog day after day and each step will (hopefully) bring you closer to your blogging goals.

5. Sure, IKEA says it’s easy, but it still takes a lot of hard work

IKEA has a clever way of building furniture and their instructions are very easy to follow, but actually assembling a product yourself takes a lot of work. Your hands will be soar, but you have to move on. It’s the same thing with blogging: before you actually do it, it seems so easy. You probably tell yourself “If that guy can do it, then I can do it!”. You’ll soon realize that blogging success doesn’t come overnight. It takes a lot of work and dedication. Sure, it may be more fun or it may be easier than doing this or that, but remember: you still have to work!

6. Your hard work will be rewarded

If you do things “by the book”, you can’t fail. You’ll have your new IKEA desk, locker, kitchen table, whatever… and you will love it! If you continue to build great content and continue to promote your blog, more and more people will want to listen to what you have to say. You’ll have more and more subscribers and generate more and more traffic. Whatever you reasons are to blog (fame, fortune, pick up more chicks, etc.), you can be sure that you will achieve your goals and your efforts will be rewarded.

PS: I made some change in the kitchen a couple of days ago, so I got the idea for this post while assembling my new kitchen table. It was during step number 5 that I realized there are some similarities. ;)

1 Comment

Most Recent Comments

  • Curtis Henson: Squeaky clean as expected Adrian. I especially like the comments design.
  • stfalx: Superb. You didn't elimitate the gradient from the current button as i suggested. I think that gradient is kinda much.
  • Computer Forum: Amazing article! Detailed and very interested. I am going to recommend this blog to my friends.
  • Chad: Looking great Adrian! Can't wait to see it live. I like the way the blog is now, but this redesign
  • Chad: Hi Adrian! Its funny that I just read this post and had sent you a request a while back which you