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.
WPFolio Settings
Fonts
- 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.
Colors
The colors are chosen with a javascript color picker, which makes it super easy. This is a new feature. If you didn’t have it the old way, you have no idea how much better it is!
- 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!
Using Background Option
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.
Loading ...
16 Comments
Hello
I’m trying to change the background colour from #E0E0E0 to #FFFFFF but even after saving the changes it reverts automatically to the default.
Is there something else I should be doing?
Thanks
Kate
ps: I really the theme by the way!
Oops, sorry, should’ve also mentioned that I’m having the same problems with trying to change the fonts too.
Not sure why this is happening. It hasn’t happened for me yet, so it’s hard to trouble shoot. I did post something about it on the WP forums here.
Thanks Steve. I’ll keep an eye on the forum.
I believe it may be the browser you’re using. I was having the same problem when I was trying to update in Google Chrome, but once I changed to Internet Explorer it worked perfectly. However, I did find a code error on the page Catchable fatal error: Object of class WP_Error could not be converted to string in /home/bridpeek/public_html/wp-content/themes/wpfolio/functions.php on line 539
Hi
I tried to change the background color to Black, I also changed the fodt colors to light ones like white etc.
However, the text in the content of BIO pages etc. are still being showed in the balck font, not readable in Black background.
Is there a way to fix it and keep the black background?
thanks
Thanks for the heads up on that issue. We will fix it in a future release. As far as how to modify CSS, you could do that in a child theme. You should also read this support article about how to learn how to do that.
When I try to change the colors it keeps saying that the Page Container Color is invalid – it’s set to the default and I tried changing it but it says the same thing.
This is a known bug and that link will tell you how to get around it. If you can help fix it, that would be splendid.
Hey There!
Excellent theme and user manual! Thanks a million!
Quick question, is there anyway to have a logo as your headline? I would like to insert an image for the headline?
Please let me know.
Best,
Aubrey
Yes, it is possible. (Almost anything is possible) In the style.css file of the included child theme it is used as an example.
Hi. The headline font size doesn’t seem to be working on my site. Seems like there is a default of about 24 that it’s defaulting to.
Thanks.
Post it on the wordpress support forum & tag it wpfolio. And mention if you’re using a child theme or changing options.
Hello,
I would like to replace the text title by an image, i guess I have to modify the child theme for that, but do you have any hints on how / what to modify? if any of you have done this before it might be of great help for a non nerd like me.
thanks very much!
You’ll need to add some CSS to the child theme’s
style.css. w3schools has a decent tutorial to get you started. You’ll want to use a tool like Firebug to find out the appropriate styles to add to `style.css`. But for example’s sake, I’ll write this one for you:To replace the title with an image, you’ll want to start by hiding the title:
.headertext {display: none;
}
Then add an image to the header:
#header {background-image: url(link to yoursite.com);
}
Hope that helps!
yes it does!
thanks a lot!
One Trackback
[...] to the WPFolio Owner’s Manual for more detailed instructions on fonts, [...]