Simple CSS Web Design Tweaks for Your WordPress Theme
Do you just want to tweak your WordPress CSS web design a bit, but don’t really know how?
This post is intended to help you do just that by providing a few basic examples (don’t expect anything complicated). Aimed at WordPress beginners, and those who really aren’t that familiar with CSS, these are basic “fixes” that you can apply to almost any theme to give it a bit of personal flavor.All these tips for CSS web design tweaks should work on most any theme, because we’ll be targeting some pretty standard theme elements. If you need something that’s not covered here, go right ahead and ask in the comments below and I’ll try to help you out. But first…
Recommended ways to customize styles in your WordPress theme
- Check your theme’s options panel to see if the things you want to change are already available as options.
- Add your CSS to a child-theme style-sheet to prevent losing it when you update your theme. (Seehttp://codex.wordpress.org/Child_Themes and What are Parent and Child Themes?)
- Use the new “Custom CSS module” in Jetpack. For more on this new feature, see Jetpack 1.7 Adds Custom CSS to the WordPress Dashboard
Also see the end of this post for links to some helpful sites to get you going on your own CSS learning curve. Now, without any further ado, here are some examples of basic CSS web design tweaks you could apply to make the WordPress theme you’re using a bit more personalized.
Change the main font-family
One of the 1st things folks often want to change is the actual font used throughout their theme. The easiest way to do that is to apply the change directly to the body tag:body {
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
}
Change the post headline color/font/style/size
In almost every WordPress theme, the h1 tag is used for post titles. Likewise, the main content area is wrapped in a container called, you guessed it, content. So, to apply any modifications to the post title throughout your site/blog, you can target that by using #content h1. Here’s some sample CSS with a look at how it might display on your site:
#content h1 {
font-style:italic;
font-weight:bold;
font-size:2em;
font-color:#ff0000;
font-family:'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
}
Change other headline styles
You can also customize the other headline styles by adding something like the following. Note that we are giving this style rule more weight by adding body to the selector. This ensures that it takes precedence over, or is added to styles in your parent-theme (see “Helpful links to get you going” at the end of this post for more on CSS specificity).body h2, body h3, body h4, body h5, body h6 {
font-family:'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
}
Change the link style in the main content area
Sometimes, you might want the links in your main content area to look a bit different from links elsewhere in your theme. Here’s an example on how to italicize them and make them a darker green:#content a {
color:#006600;
font-style:italic;
}
Add background and border to your content area
#content {
background:#f1f1f1;
border:1px solid #eeeeee;
padding:10px;
}
Add a background image to your WordPress site
This is a question that often comes up in various WordPress help forums, and it’s actually quite simple to do. There are basically 2 ways to add a background image:- Add a small image and tile it so that it repeats both horizontally and vertically.
- Add a single image that sits at the top, with a solid or gradient color below it.
body {
background:url('http://FULL-URL-TO-IMAGE-HERE') repeat scroll 0 0 transparent;
}
What all the above means:- repeat means that the image will tile both horizontally and vertically
- scroll means that it will scroll with the page
- the first “0″ is the distance (in pixels) from the top of the screen
- the second “0″ is the distance from the left of the screen
- transparent is the background color (in this case, no color)
body {
background:url('http://FULL-URL-TO-IMAGE-HERE') no-repeat scroll top center #ff0000;
}
If you want a single image with a gradient color beneath, see the link to CSS-Tricks.com at the end of this post to learn how. It can be a bit complicated if you’re a CSS newbie, but go for it if you’re feeling adventurous!Helpful links to get you going
If you want to learn more about CSS web design and really dig into it to make your WordPress site look awesome, check out the following links. And have fun!- 5 Tips to Organize Your WordPress Theme Style-sheet and Make it Easier to Navigate:
http://wpmu.org/wordpress-theme-stylesheets/ - Tips on using CSS shorthand to get multiple style declarations on a single line:
http://www.dustindiaz.com/css-shorthand/ - Build a web-safe font-family using the most commonly installed fonts:
http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml - Learn how to give your CSS style rules more weight by increasing their specificity:
- Pretty cool CSS tutorial site: http://www.tizag.com/cssT/index.php
- Another cool site where you can actually test your CSS in their editor before applying it to your WordPress site: http://www.w3schools.com/css/default.asp
- An introduction and tutorial on using CSS3 gradient colors (plus a whole bunch of other fun stuff!):
http://css-tricks.com/css3-gradients/
0 comments:
Post a Comment