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.
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!
The post Better Blogger – WordPress.com Custom CSS Quick Guide appeared first on Beautiful Kayekie.
