Blog Topic #4: Customize this!

Easy tweaks

If you start with the default Twenty-ten theme, or some others like Skeptical, you can easily customize it by adding a header graphic and by changing the background color. These options do not require any knowledge of CSS and can be found under the Appearance section of the WordPress Dashboard.

Customizing the Header

Customizing the Header

If you want to do anything beyond customizing the header graphic and the background color, you have to mess with the CSS yourself. Luckily, WordPress.com will let you do that, but it will cost you $30. Under Appearance > Custom Design, choose the Custom CSS to get to this CSS Stylesheet Editor.

Appearance Sub-Menu

Appearance Sub-Menu

You can choose to leave the theme’s CSS styles in place and simply override a style rule or two by naming it the same thing and overriding or adding properties. I just tried out previewing my changes, but I didn’t want to pay the $30 to save them!

Customizing the CSS

Customizing the CSS

So, I just focused on customizing the widgets and the things I could change for free.

I really like the theme I have been using all along, Skeptical. It just has a clean look to it. I love its little call-out feature that highlights a post’s date, tags, and comments. I would never be able to create something like this on my own, so I decided to start with the Skeptical theme and tweak it just a bit.

Bubble callout with date, tags, and comments

Bubble callout with date, tags, and comments

Skeptical had a choice of a few colors so I chose blue to complement my header graphic, and chose to keep the RSS button visible in the header. I had the option to change my background color, but I stuck with the light blue from the blue version of the theme.

I noticed that as soon as I chose the blue version, any text I had tagged with <h2> or <h3> became a matching blue font  – cool! Now I am glad that I tagged all of my headings properly within my past blog postings.

Sidebar Widget Area

To add Widgets to your Sidebar, go to Appearance > Widgets, and drag the Widgets you want into the Sidebar box.

Gravatar

As far as Widgets for my “Sidebar Widget Area”, I chose to display my Gravatar, which is an image uploaded to a separate Gravatar web site. This image should show up when I comment on other WordPress blogs now.

Pages

Pages are permanent pages, different from blog posts, so chose to link to my Pages here, which for now just includes an “About” page.

Category Cloud

For the Sidebar Widget Area, I also liked the blog post archive, and especially the category cloud, which makes a word cloud out of my tags, and seems to render the more frequently used tags in a larger font. This really gives someone a good sense of what the entire blog is about, and you can actually click on those words to get to that category.

Blogroll

I’m not an expert in blogging but it seems that your blogroll is important. It’s here where you connect to other blogs. More links to others helps them, and more links back to you helps you, so it seems like a mutually beneficial thing to have. When you add the blogroll, a generic set of links comes up, so to edit it, you need to go to Links.

Customizing Links in your Blogroll

Customizing Links in your Blogroll

Twitter Feed

I also included my Twitter feed, if I ever decided I wanted to tweet! All you have to is enter your Twitter username and your tweets will show up. Now if I could only think of something to tweet about.

Adding a Twitter Feed

Adding a Twitter Feed

Footer Widgets

I placed a bunch of social media widgets at the bottom, in the footer area. I didn’t know much about some of these things so I figured this would give me a chance to try them.

First Widget Area: Facebook “Like” Box

This widget allows your readers to Like you right on your blog. It kind of makes the footer area look tall and weird but I like having it there. You have to have made a Facebook Page for it to work, and I believe if the reader wants to Like you, he or she has to be logged into Facebook, just like for any other Like button.

Second Footer Widget Area: Del.icio.us Bookmarks

Del.icio.us is a social bookmarking web site, which is basically a way to share your favorite web sites with others. I first had to visit the Delicious web site, set up an account, and then start bookmarking some sites. I had to bookmark five sites to make a “stack” and then I could make that stack public.

Delicious offers a fantastic Chrome extension that allows you to bookmark sites very easily. It’s that little tag icon in my toolbar below.

Delicious Chrome Extension

Delicious Chrome Extension

I was actually really becoming stoked on this whole Delicious thing, but I was bummed to find that the WordPress Delicious Widget is not working properly at the moment, apparently ever since ownership of the Delicious web site has changed hands. Various workarounds will get your feed to show up, according to this article, but I haven’t fiddled with any of them yet.

http://startier.wordpress.com/2011/10/04/wordpress-delicious-work-around/

Third Widget Area: Blog Stats

I placed all sorts of Blog Stats in this column, from Hits to Top Posts and Pages. I am not really sure how each of these different statistics are calculated yet, but it seems like interesting information so far.

Fourth Widget Area: Comments

This is a handy little widget that displays all of the recent comments on my blog, no matter what post they were attached to. I like it because I can see everyone’s icon, and because all of the comments are in one place. My theme is not set up like that, so I can’t normally see the comments in this way. I might think about moving this widget up to the sidebar so it will be more visible.

Meebo

I originally had a Meebo Widget in the Fourth Widget Footer Area, but it didn’t seem to stay there, and would stick right in the middle of the page, which was kind of annoying, so I removed it. I was pretty cool since it would allow blog readers to message me instantly. I just wish I could get it to stick on the side of the browser window or something.

Meebo started out as a service that allowed you to sign in to all of your chat programs at once, but it also seems like it’s evolving into something else, kind of like a bookmarking site, where you check in at web sites you like.

So, I made an account, installed the little Check-In bar, and starting checking into sites. You can set it up so it will automatically check you in to sites that you specify. So, the site that I check into, as well as any comments I want to add, are displayed on the Meebo web site.

Checking in at the Lost Type web site

Checking in at the Lost Type web site

I am not sure if my check-ins are actually displayed in my Meebo widget though. The widget might just be for chatting. I’m still trying to figure out this whole Meebo thing, and maybe I’ll put the widget back up on my site at some point.

Other customization

So, it costs $30 to customize a separate CSS style sheet, but there are some things you can do if you really want to. You can add inline CSS styles, although you really don’t get the control of an overarching stylesheet. Say, you wanted to insert a div and color it with CSS, you could do that in HTML view! But, just remember anything you style inline in your post will override the styling from a theme, so keep it fairly flexible. You probably want it to be able to pick up the same font as the rest of your text, and maybe some other properties.

You can also mark your headings with the proper H1-H6 tags so that they will display properly with whatever theme you choose. I have not seen a way to apply these tags in the “Visual” version of the post editor, but if you switch to HTML view, you can add them in manually.

Advertisements

About Carla's CSS

I'm starting a Wordpress blog so I can play with the new CSS feature!

One response to “Blog Topic #4: Customize this!”

  1. Ady says :

    Hi Carla,

    Great advice here, and many thanks for linking to my work-around blog post. It works well for me, and I’ll stick with it until WordPress start using the v2 Delicious API. It’s the “Noted” section in the right-hand column on my blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: