You know that you have to write great content on your WordPress blog to be successful. Plus you have discovered all the SEO tips to get you on the first page of Google. But, you want more! You want change the design of your WordPress blog.
In order to blog with WordPress like a pro your blog needs to look clear, simple, readable, presentable and elegant.
One option you would have would be to purchase a professional theme from one of the big theme sites. I would recommend Genesis from StudioPress, Elegant Themes, Thesis or WooThemes.
However, if you don't want to go that route, or even if you do, here are some how to's for tweaking your blog's design.
Locate your theme files
The files in your WordPress package that determine the look of your site are called the theme files. They are stored in your WordPress files under wp-content/themes/[theme_folder] where [theme_folder] is the name of your theme. If you're not sure what your theme is called head over to Appearance > Themes in your WordPress administration area and see which theme is activated.
Inside your theme folder there will usually be just one file that determines the look of the website. This is a file usually called style.css. You can look at it and edit it if you go Appearance > Editor in the back end.
If this file makes no sense to you at all, don't worry! Read on and all will become clear.
Use Firebug and Developer Tools There are fantastic tools available to help you re-design your blog.
If you're using Chrome you can view Developer Tools (you can also use Developer Tools in Internet Explorer but I seriously recommend that you don't use that browser). In Chrome go View > Developer > Developer Tools (Cmd/Ctrl-Opt-I). And if you're using Firefox you can use the Firebugextension.
Both these tools will open a panel in your browser that will show you all the styles pertaining to any element on your site. You can make a change in this panel and see it take effect in your browser before you decide on the change and edit the style.css. This is a fantastic way to learn CSS.
Click on the cursor (it can be an arrow or a magnifying glass), click on the element that concerns you and then the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel. So, if you click on a subheading you may see if it is controlled by the h2 element in your main CSS file.
For example you may see that the subheads in the blog post have a font size of 25px, a line height of 30 pixels with a 10 pixel margin above and a 20 pixel margin below. And on the right hand side you can see where this is stipulated: on such and such line of a file called style.css (9 times out of 10, that's what the CSS file is called).
For example, another CSS declarations for the headings may be "clear: both;". This means that the heading will always start on a new line and clear any floated images that may be to the left or right of it.
Finally, there are some more general styles that maybe affecting the heading. For example "color: #333;" means the text color should be a dark gray. "font-weight: normal;" means the heading shouldn't be bold. There should be no padding around the heading can be denoted by "padding: 0;" and no text decoration (underlining) "text-decoration: none;".
Now, the crossed out styles are the styles that are superseded by other styles. These are general styles that would be adhered to if another style hadn't been specified. The style takes precedence because it is more specific to what we are looking at. The style of the h2 ont size declaration will be accepted as the true size of the heading rather than the body style which is too general as it applies to the whole body of the website.
By the way, this is why it's called Cascading Style Sheets, because the style declarations cascade down from general to more specific declarations.
Design rules for your WordPress blog
Now that you know how to edit the CSS of your WordPress blog, here are some basic style rules to help you on your way. But first, here's a crucial tip for editing your theme files.
Always keep a copy of everything! Just before you start editing your style.css or any file in your theme folder, please, please, please back it up. Locate the theme folder using an FTP client such as Filezilla, locate the theme folder at wp-content/themes/[theme_folder] where [theme_folder] is the name of your theme and copy the file to your computer.
So, once backed-up, tweak your styles to your hearts content! Here are some important design tips to keep in mind:
Always make sure your text is readable! Not only should you pay attention to font size but also the color of the font versus the color of the background. If you are young with perfect vision, remember not everyone is as able as you to read the small text! This text is 15 pixels in size. I try not to put body text smaller than 14 pixels. The line height (or line spacing) should be 25% greater than the font size or more. So if the font size is 15 pixels; your line height should be 19 pixels or more. If the font size is 1 em; your line height should be 1.25 em or more. Line heights are especially important for headings as many theme designers never check to see what headings look like if they go over one line. Paragraphs should have a space between them and this should not be created with a double return. The space after each paragraph should be around half the line height. So, if your line height is 20 pixels, there should be around 10 pixels between paragraphs. This is usually done with either padding or margin on the <p> tag. In the WordPress HTML editor two returns equal one in the Visual editor! Look at the tab on the top right of the WordPress text editor where you write your posts, it will either say HTML or Visual. To create a new paragraph in the HTML editor hit return twice; to create a new paragraph in the Visual editor hit return just once. To create a line break (new line with no gap) in the HTML editor hit return once; to create a line break in the Visual editor go shift-return.Remember, make your site easy to read and you visitors will reward you!
0 comments:
Post a Comment