Better Blogger – WordPress.com Custom CSS Quick Guide

Put your hand up if you know exactly what CSS is.

Hand not up? Don’t worry, you are certainly not alone! CSS stands for Cascading Style Sheet, and the simple explanation is it’s a type of code you can use to change how your blog or website looks. For WordPress.com users, there is a paid custom upgrade available which allows you to modify your blogs’ theme colours, fonts, and CSS. If you’ve ever wondered whether the upgrade is worth it or what it can do, this easy guide will give you a beginner friendly rundown. WordPress.com custom CSS is your ticket to the blog you really want.

CSS can be the difference between a standard wordpress.com template and something more personalised and dynamic. Don’t let the idea of working with ‘technical language’ scare you. There are some amazingly complex things you can do with CSS, but it can also be very simple.

To give you a 60 second lesson in what CSS is – think of it like this:
HTML is what makes up every website.
CSS is an effective way to change the presentation.
Now imagine HTML as a cake, and CSS as the icing. First you start with a cake (website), then you fancy it up by adding the extras (CSS). Ok, that may be a terrible analogy, but you get the idea. And you probably want cake now too (I know I do).

Just a few things you can create or change with CSS:

colours font margins & padding
forms styling footers
custom search image edits galleries
text wrap captions styled lists

Take this site for example. It is hosted on WordPress.com for free, using a basic template. I have upgraded to use custom CSS (and a few of my own design elements) to make changes like – move the navigation menu below the banner, change the menu colour/hover colour, remove photo borders, remove visible post tags, widen the width of the post area and much more.

If you decide to purchase the upgrade you can access your style sheet from the dashboard > appearance > customize > CSS. As you make any changes, a live preview is viewable so you can see exactly what is going on. All of this can be done without making physical changes to your site, until you’re ready to press save.

The style sheet starts out blank, and anything you add will reflect changes made to the original blog template. You can build the site from scratch, or just make small changes to the existing one. The choice is yours.

CSS style sheet

Live preview on the left, fly-out menu and CSS style sheet on the right

As I mentioned earlier, you don’t have to know everything about CSS to use it. A quick search on Google or the WordPress.com forums can help you find the right snippets of code to use. It’s a very good idea to backup your site before you go ahead, and to also keep record of what you’ve changed. This will make it easier if you want to go back and restore anything.

To change my theme (Chateau) menu colour to, bold, light salmon colour with a turquoise hover effect I added the following to the style sheet:

#menu a {
color: #FFA07A;
font-size: 110%;
font-weight: bolder;
}

#menu a:hover {
color: #40E0D0;
}

As awesome as the WordPress.com custome upgrade is, it’s a bit of a catch-twentytwo. So long as you stay on WordPress.com and want to maintain your customisations you will have to continue to pay the annual upgrade fee for each blog you apply it to. Other blogging platforms allow you to use CSS for free, and if you self host you can also access your style sheet free of charge. So there’s the down side.

You may be wondering – If you’re going to pay for the upgrade, why not pay to self host? That’s the million dollar question and something you will have to decide. I recommend looking at what exactly you want from your site and weighing which option is best for you. If you’re not interested in self hosting, but want customisation, then the upgrade might be up your alley.

I hope that explains WordPress.com custom CSS a little better guys! I will write a post soon showing exactly what code I use to make my site look the way it does, good luck!

23 Comments on Better Blogger – WordPress.com Custom CSS Quick Guide

  1. crazyspeedylove
    July 2, 2013 at 4:01 am (1 year ago)

    Thanks love – you are always such a help and just at the right time!

    Reply
    • Beautiful Kayekie
      July 2, 2013 at 4:16 am (1 year ago)

      You are most welcome! I hope this helps encourage others to try CSS. Even if you don’t do it on your blog, it’s a handy skill to try and learn.

      Reply
  2. Mammu
    July 2, 2013 at 6:33 am (1 year ago)

    Thanks beautiful, I always save your tutorials and guides to favorites so I can easily find them when I need to! <3

    Reply
    • Beautiful Kayekie
      July 2, 2013 at 6:44 am (1 year ago)

      If you need any help let me know. I’d be happy to expand on anything. It’s difficult trying to explain everything within one post in great detail :) xx

      Reply
  3. Tine
    July 2, 2013 at 11:57 am (1 year ago)

    Well said Kaye! When I first started out on CSS, it drive me nuts. It’s still something I’m learning even after dealing with them for 6 years!

    Reply
    • Beautiful Kayekie
      July 3, 2013 at 2:35 am (1 year ago)

      I promised myself months ago I would take the time to learn CSS so I could do it without any help. Fast forward to now and a few technical books later I still don’t really know any of it off by heart lol! But that’s what google is for! :D

      Reply
    • Beautiful Kayekie
      July 3, 2013 at 2:38 am (1 year ago)

      Thank you! And the amazing thing is its really not hard to do. Just a little code here and there can make all the difference in presentation and layout :)

      Reply
  4. simplebeauty8312
    July 4, 2013 at 9:51 pm (1 year ago)

    Thank you for this very helpful post! CSS sounds like it may be a good option for me since I’m to scared to self-host! Plus, if I can get my blog to look even half as nice as yours, I’ll feel accomplished! :)

    Reply
    • Beautiful Kayekie
      July 5, 2013 at 1:27 pm (1 year ago)

      I’m so glad I could help! If you wanted to brave CSS I think that would be fantastic! You are absolutely right, you don’t have to self host but can still get a more personal theme to suit you.

      I see you are using the Forever theme which is actually a beautiful theme. It was my very second close choice for my blog, it has a very clean layout with already beautiful font! Its a great base for anything you add because it wont clash. Your site looks great, so anything you add will only make it stand out ever more.

      If you need any help with the code or what to do feel free to shoot me an email, I’m happy to help you lovely! If your stuck for where to start, think about what you want to change and google “CSS (what you want to do) WordPress.com forever theme”. Chances are others have already done what you want and the code should be ready to use :)

      Good luck!!! xx

      Reply
  5. pagebypaigebeauty
    July 8, 2013 at 6:59 pm (1 year ago)

    Thank you so much for the post. I definitely don’t think of myself as a technology savvy person at all and I’ve been a bit hesitant about upgrading my blog because I don’t know a thing about codes, but you really have simplified it for me and I think I might just go for it. Thanks!

    Reply
    • Beautiful Kayekie
      July 11, 2013 at 1:09 am (1 year ago)

      I’m so excited your willing to give it a try! I had a quick look at your theme and what CSS is available out there to try and there’s plenty to play around with the look of your site :)

      All the best with your experimentation/redesign, kudos to you for wanting to do it xx <3

      Reply
  6. abigail
    July 17, 2013 at 5:44 pm (1 year ago)

    Omigod I am so glad I stumbled upon your gem of a site. This is incredibly useful and its like a lantern in the dark confusing mess of wordpress. Thank you thank you thank you for saving my sanity on this haha! All the way from Canada, you are the best!

    Reply
    • Beautiful Kayekie
      July 18, 2013 at 12:36 am (1 year ago)

      SO GLAD I could help Abigail! It feels so good to know I was able to help you, I have meet that helpless feeling with wordpress more than a few times. There’s so many amazing things you can do with wordpress, I just think there needs to be better info out there! Thanks for stopping by and commenting! Sending love all the way to Canada :D <3

      Reply
  7. Luchessa
    August 4, 2013 at 1:51 pm (1 year ago)

    Now how did i miss this post earlier?! O.o
    very useful one. Saved for just in case & shared with my Twitter audience ;)

    Reply
  8. keithsakata
    August 29, 2013 at 6:50 pm (1 year ago)

    Such a great blog! I love how everything is clear and user-friendly. How long would you say it took you to get to where you are today? :)

    Reply
    • Beautiful Kayekie
      September 1, 2013 at 5:45 am (1 year ago)

      Thanks so much Keith! I’d say around 18 months was the time it took to grow into the site it is now. I’ve slowly taught myself everything I’ve wanted to know/do with the site over time. I’d say the three things that have helped me are: working on my photography/editing skills, relationships with bloggers and readers, and my never ending want to learn more about blogging :)

      Reply
  9. Hajy Radcliffe
    December 15, 2013 at 9:08 pm (1 year ago)

    wow finally i understand what does it really means, every time i google it, pepople explain it in such a complicated way! thank you so much for taking time to creat such a helpful post, simple and right on the point, thank you again! <3

    Reply
    • Beautiful Kayekie
      December 23, 2013 at 4:00 am (12 months ago)

      Yaaaay! I’m so beyond happy to know it helped you. I felt just as confused when I first started trying to read about it, I just knew there were others that felt the same way. Good luck with it!! :)

      Reply
  10. Susaye Rattigan
    July 23, 2014 at 6:20 am (5 months ago)

    I really live your blog. Your blog header is to die for. Can you please share with me how I can create something like that?

    Reply

Leave a Reply