Because WPFolio features Theme Options, you can change the colors and fonts of the WPFolio theme without changing the scary, scary, CSS code or template files – which really are not that scary.
1. In the WordPress dashboard click on the tab Appearance.
2. Choose the option Current Theme Options These options allow you to customize your site’s fonts and colors.
- The selection of fonts provided are web-safe fonts that will work on most computers. One should work well for you. (Super fancy fonts may not be available on everyone’s machine. Getting around that involves some coding. That’s just the way it is.) To change the fonts simply select the font you want from the drop-down menu and remember to hit save.
- Fonts in WPFolio are displayed in pixels, while this is a debatable web design practice, it makes the most sense since most people understand what a pixel is. Using pixels to define font size means that the font will be relative to the resolution size of the screen. Don’t worry about all that but it is worth noting.
- So when you change a font size in the theme options section remember to add px at the end of the number, so 96px for example.
- Headline Font is the font of the website title.
- Headline Font Size is the size of your website title font.
- Highlight Font Color controls links and rollovers,
- Secondary Font Color controls the color of the tagline if you have one, as well as your links and the comments links if you have comments enabled. Don’t feel you have to make this color different from the Highlight Color.
- Body Background Color controls the color of the site’s background. Starting in version 1.6+ (with WordPress 3.0) this is controlled in Appearance > Background.
- Body Font Color controls the color of the font used in the main content.
- Body Font Size controls the size of the font in the content.
- Body Foreground Color controls the color of the content box, default color is white.
Experiment with different colors, save them, then refresh your homepage and see how it looks. Do this a few times and you can see how they all relate to one another.
Tip: if you want to look at some color schemes to inspire your design, check out kuler.adobe.com.
You can’t really break this, so go nuts. You can always hit reset to go back to the default colors.
Changing the Backgound
Starting with WordPress 3.0 and WPFolio 1.6 you can change the background color AND add a background image if you like. The background image will appear on every page. You can tile it or have one image that spreads across the whole background. Solid colors, gradients, tiled wallpaper, big images, yes you can now have any of these options at your fingertips. Exciting!
Note: the background color is called as a color elsewhere in the theme so remember not to leave it blank.
Tip: If you’d like to create a custom wallpaper for your site, check out bgpatterns.com.
For the nerds
All of these options are handled in the header.php file, not the css file. If you have familiarity with these things and want to make changes, you should know that. But you should also be making changes in a child theme anyway.