Freshening your WordPress.com Theme

spring pathSuppose you find a free WordPress.com theme among the hundreds available that you love, but you aren’t quite crazy about the color scheme. You cannot build or use your own custom theme built from scratch at WordPress.com, but you can spring forward and green, or blue, or red or otherwise bring some spring into your your blog by purchasing a CSS editing upgrade.

Green is a popular color in most cultures because of its natural association with spring, nature and the environment, growth and abundance. In the US the color green is often associated with money and wealth and in this way can be a good color choice for a website concerned with marketing a product or service. — Designing in Green: Spring Designs Inspirations

spring leavesBy CSS editing any free theme you can include a logo in the header or background or in a text widget at the top of your sidebar, and change font colors and sizes to match the new color scheme you choose to create for your blog. There are two free themes,  Sandbox and Toolbox designed to allow maximum flexibility for CSS editing and creating new “skins”. Toolbox is more modern and includes a lot of support for CSS3 and HTML5, so it is really only limited by your skills and knowledge.

If you have CSS editing experience the upgrade will allow you to stylize the appearance of themes you find here > Appearance > Themes, but will not allow you to change the functionality, by editing the underlying template. It does not allow you to remove footer links to the theme designer or to WordPress.com. Also note that CSS is theme specific, so you cannot use the CSS stylesheets from other themes with the themes  at wordpress.COM.

spring grass I recommend that you don’t buy the upgrade unless you have at least moderate understanding of HTML and CSS because you must be prepared to do the work on your own. If you are considering purchasing the upgrade, you can go to Appearance > Edit CSS. There wordpress has provided a preview function where you can try before you buy.  If you do purchase the upgrade, it’s important to know that when you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing.  It’s also important to know CSS is theme specific. If you have custom CSS and later change themes, you need to delete whatever CSS you have in the Editor, otherwise, you’ll get undesired results. To ‘reset’ a theme, you need to delete the CSS in the Editor, make sure the “add to existing CSS” radio button is checked, then save. Things should go back to normal.

Discussion

When the CSS upgrade was announced I was disappointed that it was a paid upgrade. Since then I’ve viewed some really fabulous looking CSS edited sites, and now  I’m considering buying a CSS upgrade for my two blogs. I really enjoy changing themes, colors and headers frequently and would also like to be able to change font colors and links colors throughout my blogs.  The Zen Garden site is so inspiring CSS Resources for Bloggers and I’m an artist so I don’t think I will ever be happy with a single unchanging theme on my blogs. How about you? Are you consdering “freshening” your WordPress.com blog theme this spring with CSS editing?

Related posts found in this blog:
Changing Your Blog? Start With the Colors
Blog Design: Which colors do you use and why?
Crayons, Colors and Blog Design
Swing into Summer: New Themes and Headers

50 thoughts on “Freshening your WordPress.com Theme

  1. TT, I can’t remember in which of your posts this was, but someone was asking you about a custom header image size and you tried it out in your test blog for them to find out. I was just browsing some stuff in my bookmarks and came across WordPress Support’s list of header image sizes, so thought I’d give you the link in case it’s of any help:
    http://en.support.wordpress.com/themes/custom-header-image/

    Also, I’m not certain, but didn’t Panos do a list of header sizes?

        1. Panos is into detail and when I need that kind of information or others do I immediately go to his blog. He also has excellent workarounds that I likewise share with other wordpress.com bloggers. :)

  2. Hi Timethief,
    I was wondering if you could help? I am using Inuit Types theme like you and noticed yesterday (completely out of the blue) that the white space margin on the left of the ‘home’ page and each full post page had disappeared. I contacted WP Support but haven’t heard back yet. I wasn’t sure if it was just my blog (http://rupertstreetdigest.com) or on others using Inuit Types. I’ve noticed it is on yours also. Am I going mad?
    Do you know how this could be fixed? I haven’t made any changes to the CSS or style sheets or anything – I’m not that clever.
    Anyway, hoping this will/can be fixed as I am a very visual person and it is giving me the creeps to have headings, pics and text hard up against the left hand edge of the browser window.
    Thanks very much.

    Laura

    1. Hi Laura,
      Staff frequently adjust themes behind the scenes and the Inuit Types theme has always had a lack of margin on the left hand side. The paid version of the theme has a column for advertising that we don’t in the free version and that column appears on the right hand side. I asked Staff about this some time ago now and the theme staff said the theme was displaying correctly so I accepted that.

  3. This is indeed a good post. Recently, I also wanted to change my worpress theme because my old one wasn’t that great to work with. I always had problems editing & posting my new posts. It was more a hassle then anything else. I didn’t want to blog anymore,…I didn’t buy the updated css because my blog is written just for fun! I am not a stylist or professional so I didn’t buy that, I just changed my theme so that I could do more in my theme then before,…!

    Many greets from Brussels, Belgium to you! :)

  4. I actually never really thought of switching to Duster as a means to better highlight my photos..because I don’t aim to professional/great on the photography side at all. Composing blog posts with related visuals, appeals to the artsy side of me.

  5. Great article on freshening up a WordPress theme, TimeThief.

    It took me some time to finally settle on my current WordPress theme. Even though my blog is relatively new, I flirt with the idea of switching things up from time to time. There are so many great themes available, making it quite difficult to decide on the best one. CSS definitely helps if you’re updating your design in anyway.

    1. When I have the time to I’ll do a post on the theme and some workarounds. Sadly, placing a text widget (empty) in the sidebar does not eliminate the Links Widget and Meta widget from the sidebar on this theme like it does on other themes.

  6. The link formatting still annoys me though. Why do the links need to be baby blue and underscored? It makes the text look too busy.

    Underscores are OK and colour is OK (although a less hysterical colour would be preferable)… but why double the effect and use both at once? As if people would not notice them otherwise… or as if it was a disaster if they did overlook a few links.

    I suppose there is no way it can be modified without buying the CSS upgrade? (hm… then it will just have to wait).

  7. When you view a static page in Duster, the default header image is replaced by whatever image you set as a featured image to that page. If you want your featured post to display an image that will not become a header image as well then you have to use a workaround to prevent this.

    I am not sure I understand this (yet). I have the same static header image on all pages, since I have not yet featured any images. What you say is that if I select an image as ‘featured’ on a post or a page, then it will become the header image for that post or page, right?

    If it is just on that page/post (and not all over the blog), then I don’t necessarily see it as a problem. I guess the purpose of featuring an image is to bring attention to it within that page/post… which supposedly writes about that image, or the topic that the image illustrates. So it seems like a good idea to me.

    Otherwise, I guess the simplest workaround for an annoying image that doesn’t look good in the header could be to not feature it.

  8. The designer of the Duster theme aimed to “showcase” content, not only on the Showcase template page which becomes the front page of the blog, but by focusing on content on single pages and posts, and that was accomplished by not coding in a sidebar display on the single pages and posts. To me Duster and Structure are themes that are designed in a way that may make them more attractive to those who have photoblogs or graphic arts blogs than to those who have blogs that are focused on textual content.

    I just realised the value of this. Thanks for the tip … I have now changed to Duster for my personal blog so I can use it to showcase art/photos/graphics. That wasn’t the purpose of creating the blog, but it is a good idea, and I can combine it with my interests.

    1. @Anna
      I want to let you know I have 2 more comments from you “on hold”. They are not lost or in the spam filter. Theres’s far too much in your comments and in my replies to post them here. So I’m going to turn the comments and the replies I would make to them into a post and publish it. Please be patient as my first priority after answering questions here is to answer my comments on my personal blog and publish a post there, then I will return to this blog. I trust that’s okay with you. :)

    1. Yes I did comment and I just did so again. This is what I posted:

      My comment was removed and I do not know why that is. The OP has posted to my blog wondering why I said I commented but he cannot find the comment.

      Comments can only be removed by Moderators or Staff. Mine stated that the only way to remove inactive links from the blogroll in a wordpress.com blog is manually. There is no automatic way to do this on a wordpress.com blogs. There is no FTP access to wordpress.com blogs and we cannot upload plugins into them.
      http://en.support.wordpress.com/ftp-access/
      http://en.support.wordpress.com/plugins/

      I have no idea why Staff or a Moderator removed my comment.

  9. As to your question:

    I think many of the free WordPress themes are great. I use Fusion and Choco for my two blogs, and I would love to make some small design tweaks. However, I try to focus on the content for now and will write at least 20 posts or so before I eventually allow myself to get obsessed with design details and start playing with CSS.

    My favourite template is Fusion, but I am not so sure about the hanging sidebar and it is maybe a bit dark. I also like Duster (although not the link formatting and the sidebar links), Inuit (although I think the sidebar boxes can seem a bit heavy and the post text is very small), Oulipo (although it’s annoying that the title keeps hanging in front of the eyes), the Journalist (although not the format of the sidebar links, and where are the pages?), Bueno (sidebar links are fantastically formatted, but text and in-text links a bit too pale, and why red?), Liquorice (although not the title layout), Choco (but I wish the right corner of the posts wasn’t rounded, and that the post layout was narrower, more elegant… might change that template actually, it makes me think of grand dads) …. and so on.

    Here is the point:

    I think WordPress has designed the themes so they look great and people like them and install them. But then the users always find just a little ‘something’ that screams for a tweak … and so they buy the CSS upgrade :-)

    1. The vast and overwhelming majority of wordpress.com themes were bot created by wordpress.com employees. WordPress theme designers, who do not work for wordpress.com have never ever employed cookie cutter template building as one sees at Blogger. The theme designers each create and code their own unique templates containing the features they choose to include for running on wordpress.org installs. WordPress.com staff adapt themes that are coded to run on wordpress.org installs so they will run on wordpress.com software and some features were eliminated.

      If we are not satisfied with the appearance of the free themes then wordpress.com has provided the annually renewable CSS upgrade so we can edit the CSS stylesheet. Some themes are easier to CSS edit than others. I have just found out that the theme I prefer to use on both blogs Inuit Types is one that is not easy to CSS edit. Consequently, I’m no longer inclined to purchase the upgrade.

    2. I agree with Anna on Duster for the link formatting. But I switched to it anyway for 1 of my blogs. It was a huge change, for me. I also use Twenty Ten (.org version) for another blog.

      I wish I could have time to learn CSS and play. But now I have full time job and can barely keep up with the different blogs I manage, let alone customize with CSS. So I try to assauge my tendency to change theme design and instead focus on producing/help others produce better content with visuals.

      1. I don’t have the same concerns about link formatting on the Duster theme. Some themes display sidebar content on each and every page in a blog and some do not. The designer of the Duster theme aimed to “showcase” content, not only on the Showcase template page which becomes the front page of the blog, but by focusing on content on single pages and posts, and that was accomplished by not coding in a sidebar display on the single pages and posts. To me Duster and Structure are themes that are designed in a way that may make them more attractive to those who have photoblogs or graphic arts blogs than to those who have blogs that are focused on textual content.

        I hear what you say about administering 4 blogs. I can barely make the time to keep up with posting twice weekly to two blogs. I have had an extremely hectic week. I been coping with work and also with getting to and from multiple medical appointments. In addition I have been making flight bookings and other arrangements to be the 24 hour attendant for a sibling after an organ transplant takes place. I did not meet my blogging goals on either blog this week and I’m not beating myself up for it. I’m trusting that my readers are wonderful people who understand that blogging and learning CSS are lower priorities for me than taking care of my own health, being there for my family member, and earning a living are.

        1. I’m glad you’re jetting off to help. Hope he survives this one. Yes, blogging takes the back seat big time at certain points.

        2. That is right. A very nice detail of Duster is that it only shows the sidebar on ‘home’, not on pages or post. So a quick way to make it look great could be to remove the links from the sidebar and make a links page instead.

          I disagree that Duster is more for photographic and design blogs. I think it is one of the most pleasant blogs to read: the design of the text and posts is very calm, neat and ‘zen-like’. One of the best themes, I think.

          1. I think it’s a nice theme too. However, I still believe with a header that’s very large 1000 X 300 pixels and a featured image that takes over all the headers on all pages it seems to me it’s well suited to image heavy blogs. But that’s not so say it can’t be used on many different types of blogs. When you view a static page in Duster, the default header image is replaced by whatever image you set as a featured image to that page. If you want your featured post to display an image that will not become a header image as well then you have to use a workaround to prevent this.

  10. The best reason to buy the CSS upgrade that I can think of is that it provides an extremely cheap way to learn CSS and HTML … through (painful) experimentation and the help of free online sources such as W3 schools, without the need to invest in expensive web design software.

    1. What I see on the CSS support forum is no Staff support for the CSS upgrade and only 2 Volunteers thesacredpath and hallluke providing the CSS changes for those they help there. If they did not help then you’re right all those who purchase the CSS upgrade would be working on their own.

      What most members do not recognize is that almost all the themes here were all originally coded to run on free standing wordpress.org software installs. In order to run on wordpress.com software they were “adapted” and some features were eliminated as this is a WP_MU blogging platform we cannot access and edit the underlying php and html in the templates.

      Also the themes we use here are all derived from shared templates and CSS is theme specific at wordpress.COM so you cannot use the CSS stylesheets from other themes with the themes here. This applies even when there are themes with the same name for wordpress.com and for wordpress.org ie. the two are different versions of the same themes and are coded to run on different software.

      Those are the reasons why I do not recommend that anyone purchases the CSS upgrade unless they have at least moderate understanding of HTML and CSS. :)

  11. Hi, thanx for being kind in your response to my confused thread. Very appreciated.
    Sugar always does better than vinegar. When it comes to responses.
    I believe.
    Never have an ordinary day.
    nikla1

  12. I bought the CSS upgrade for my “casa az” blog a couple of years ago and I love it. Definitely worth the small annual fee. I didn’t know much CSS back then, and still don’t, but picked up enough knowledge to make the basic changes I wanted.

  13. My biggest reason for buying the CSS upgrade was that I liked the Enterprise theme from Studiopress, but I thought the font size was too small to be attractive.

    Apart from that I have been understated with the CSS changes I made to my site several months ago.

    I increased the font size and changed the background color to the site.

    The changes so understated that until I read your article, I had forgotten that I had done them…

    I just made the background color a bit lighter, but apart from that I have left it as it is.

    I investigated more or less all of the themes when I first started with WP.com and I more or less always look at the new themes as they are introduced. So far I have not been tempted to change from the Enterprise theme.

    1. Enterprise looks great on your blog and the CSS changess are so subtle I didn’t even notice them. Maybe a new theme will appealing to youin the future. You never know. :)

  14. Hello TimeThief Your posts are often really timely for me. That sounds like a pun, not meant to be. Only the other day I was brooding darkly about whether I should attempt to learn html/css etc, at least enough to be able to un-do what WordPress has done to the comment styling on the 2010 theme. Support tell me that I need to buy the css thingy in order to do it. And I would like to do a couple of other things. So at 2 am when (don’t tell me, I should of course have been tucked up in bed) I set off following your links above to CSS world and the Zen garden and all the rest. And they are great links and it is providing much food for thought, so thank you! I am trying very hard to spend less/more effective use of time with the internet and more time with my Tai Chi practice, neglected, so I visit your other blog too, I like them both enormously. Take care, Joanna

    1. Hi Joanna,
      I ‘m not aware of the comment styling changes on 2010 so I will check my bookmarks. I haven’t donw Tai Chi for years but I used to enjoy may classes very much and now you have made me consider joining again. It’s good to hear you enjoyed your CSS viewing adventure even if it was in the middle of the night. It’s even better to hear your like my other blog too. I’m going to be catching up on answering comments there tonight.
      Cheers

  15. Hello timethief,

    Great overview of CSS. I don’t regret getting my CSS upgrade for a moment. It costs just pennies a day for the flexibility to have the fonts, colors, etc. that I prefer. I didn’t know anything about CSS when I got my upgrade. I managed to do basic changes by hunting through the original style sheet for a theme and finding the code that seemed appropriate for what I wanted to change. Then putting that code into the CSS editor with my change and hitting preview to see how it looks. It’s been a trial and error operation. Along the way, I’ve learned a number of very useful bits of CSS from the kind-hearted volunteers at the WordPress.com CSS forum.

    I find it’s quite easy to do basic changes, but it would be far more challenging to make significant changes. One would need to really study CSS a bit to do so. I haven’t found any CSS Guides that are super easy or straightforward although there are resources listed at the WordPress.com forum. I noticed that at least one (and maybe others) of the really fabulous CSS edited sites in the link you provided were created by designers, who presumably have CSS skill.

    Because of this, I think your recommendation to have moderate CSS skill before getting the upgrade is a good consideration. I had none and I don’t regret getting the upgrade by any means. But I would have to learn quite a bit more before I could do “fabulous.” Which I would love, but I don’t know that it will happen simply due to time constraints.

    It’s also good to bear in mind that some themes have more complicated CSS than others. Duster and Inuit Types for example have more complicated CSS style sheets than 2010. Just to change the link and hover colors in Duster, for example, proved to be tedious and a bit time consuming, whereas it was a breeze in 2010.

    Thanks for raising this question. It’s a good one to discuss and consider.

    1. Hi Sandra,
      Gosh now that I’ve read your comment I wish I had thought of interviewing you.

      ” It costs just pennies a day for the flexibility to have the fonts, colors, etc. that I prefer. ”

      That’s what’s appealing to me. Learning CSS seems intimidating but I have taken great delight in watching the themes changes you have made as a person without CSS editing skills. It’s inspiring to know that trial and error learning, which is the way I learn best, has produced such beautiful changes in your blog.

      Thank you so much for sharing your experience. I appreciate it. :)

    1. I don’t know CSS either and I’m not dtrongly drawn to learning it — if I must I suppose I will. ;) I’m not the techy type. I’m artsy and I’m drawn by what it can do.

  16. Hey TimeThief,

    Probably that was the main reason I switched to .org thing. Basically, I am an sys admin too. So, it has become a natural shift toward hosting my blog on my own. But, I later understood that hosting on my own cost more than buying a CSS upgrade. :) That said, I always change my theme once in two or six months depending on the feedback (poll) I receive from my visitors.

    Pothi

    1. Hello there,
      Being free hosted at wordpress.com is free — unless we choose to purchase upgrades. It all depends on what we are willing to pay for. In the case of a serious blogger who is in this for the duration a domain name and domain mapping are $17 per year. Add the CSS upgrade to that which gives you the liberty to choose any of the free themes and modify the appearance with CSS editing, and to chnage themes and do that as many times as you want and that’s $15 per year. (Total $32 per year)

      I like variety and changing themes and playing with colors is my thing in my offline life. So it’s natural for me to want that freedom to create in. Thanks for commenting. :)

Comments are closed.