Detailed color and font customization instructions:
This tutorial gives you detailed instructions on how to edit colors and fonts and sizes all throughout your blog, by editing ProPhoto's "Stylesheet." All of the edits shown below can be made by editing this one file, which is accessed in your WordPress administration panel under "Design ('Presentation' in WP 2.3 and earlier)" --> "Theme Editor." This tutorial is broken up into the following chunks for your learning enjoyment:
- Changing Background Color
- Adding a Background Image
- Modifying the Top Black Bar
- Changing Font Styles
- Changing Link Appearance
- Editing Bio Area Header/s
- Changing Appearance of Post Titles
- Edit Color of Sidebar-Footer Area
- Changing Comment Name and Color
Background color:
The default background color is a lovely grey
To change the background color, edit line 30 of the "Stylesheet" (aka: "style.css") file in your Theme Editor. (Hint: use the line number comments to help you find the right spot.) Where it says: background-color: #878787; change the 6-digit color code to whatever you want it to be. Use the color-eyedropper in Photoshop to pick exatly what 6-digit color code you want.
Background image:
ProPhoto comes installed with no background image (actually it has an invisible image installed), but you may want to add one like the lovely paisley on this blog. To do so, save your background image as "bg.gif" and upload it into the "images" folder of the "prophoto" theme folder, overwriting the existing "bg.gif" file. If you are using a ".jpg" instead of a ".gif" for your background image , you'll need to modify line 29 of the "Stylesheet" (style.css) so that it says "bg.jpg" instead of "bg.gif."
Top Black Bar:
The top black bar can be modified to suit you
To change the color of the top black bar, edit line 44, replacing #000000 with the color of your choice. If you don't want to display that top solid bar at all, remove the "x" on line 42 so that it reads display: none; instead of xdisplay: none;.
Changing Fonts:
To change the main font used throughout the site, edit line 31 of the "Stylesheet" file, shown below:
font-family: Arial, Helvetica, sans-serif;
Unfortunately, when it comes to web design, you're kind of limited when it comes to fonts. You can specify whatever font you wish, but if your users don't have it installed on their machine, they won't see it. That's why almost all web typography is done in very generic fonts. Also, there is always one or two 'fallback' fonts. This means, that, in the example code above, the browser should use "Arial" as it's first choice. If the user doesn't have that font, they should us "Heltivetica." If they don't have that, the browser will display a generic 'sans-serif' (that means without the pointy accents of some fonts) font. To make it simple for you, I recommend choosing from the following list of font families. Just copy and paste a single whole line of the below code, and experiment with the results. [Note: any fonts with multi-word names need to be enclosed in quotes]
font-family: Arial, Helvetica, sans-serif; font-family: "Times New Roman", Times, serif; font-family: "Courier New", Courier, monospace; font-family: Georgia, "Times New Roman", Times, serif; font-family: Verdana, Arial, Helvetica, sans-serif; font-family: Geneva, Arial, Helvetica, sans-serif;
Changing line 31 will affect all the typography throughout the whole site. If you want to be more selective and have certain fonts for certain parts of the site, you will have to add a "font-family" line to the areas you want to style selectively. So for instance, you might want just the post titles in a different font. To do this, you would change lines 88-90 from this:
/* edit these to affect the headers of the "bio" area */
#indexbio h2 {
color: #3333CC; /* color of 'header' in bio area - default is blue */
font-size: 18px; /* font size for header in bio area */
}
To this:
/* edit these to affect the headers of the "bio" area */
#indexbio h2 {
color: #3333CC; /* color of 'header' in bio area - default is blue */
font-size: 18px; /* font size for header in bio area */
font-family: Georgia, "Times New Roman", Times, serif;
}
Changing Link Appearance:
To change how the links appear throughout your blog, use lines 50-62, shown below.
/*styles all links, blogwide */
a:link {
text-decoration: none; /* no underlining default */
color: #3333CC; /* color of links not yet visited */
}
a:visited {
text-decoration: none; /* no underlining default */
color: #663399; /* color of links already visited */
}
a:hover {
text-decoration: underline; /* underlining as hover default */
color: #000000; /* color of links when being hovered over */
}
Change the 6-digit color numbers to whatever you want. The three different sections correspond to what the link looks like normally (under where it says a:link), what the link looks like if it has already been visited (under where it says a:visited), and what the link looks like when someone is hovering over it (under where it says a:hover).
The "text-decoration" field can be filled in with any of the following: none, underline, overline, or line-through.
Editing the Top Links area to the right of your logo:
To edit the appearance of the top links area to the right of your logo, use lines 67-82, shown below:
/*edit these if you want the top-area links to look different*/
#ppt_topnav a:link {
text-decoration: none; /* no underlining as default */
color: #3333CC; /* color of links not yet visited */
}
#ppt_topnav a:visited {
text-decoration: none; /* no underlining as default */
color: #663399; /* color of links already visited */
}
#ppt_topnav a:hover {
text-decoration: underline; /* underlining as hover default */
color: #000000; /* color of links when being hovered over */
}
#ppt_topnav li a {
font-size: 16px; /* font size of top links */
}
Edit the links the same way I described in the above section. Also, you can change the font size on line 81.
Change the color and size of the headers in the "bio" area:
Edit lines 87-91 to change the color and size of the headers in the a "bio" area.
/* edit these to affect the headers of the "bio" area */
#indexbio h2 {
color: #3333CC; /* color of header */
font-size: 18px; /* font size for header in bio area */
}
Change the appearance of the post titles;
Edit lines 95-103 to change the appearance of the post titles.
/* edit these to affect styling of Post Titles */
h2.entry-title a, h2.entry-title,
body.search h3.entry-title a,
body.archive h3.entry-title a {
color: #3333CC; /* color of post titles */
font-size: 20px; /* font size of post titles */
margin-bottom: 3px; /* spacing below post titles */
text-decoration: none; /* underline off, change to "underline" */
}
Change the background color of the "footer-sidebar" area at the bottom of the page:
Edit line 111 to change the background color (default is a very light grey) of the sidebar-footer area at the bottom of every page.
Change comment name color and background:
Edit the color of the commenter's name, and the background grey
Use lines 117-123, shown below, to change the color of the commenter's name, and also the background color of the comment box.
/* the color of commenters on main page, and bg of comment area */
body.home .comment-author {
color: #3333CC; /* color of name of person commenting on mainpage */
}
body.home #comments {
background-color: #E3E3E3; /* bg color of mainpage commment area */
}
Learning is fun! Keep reading! More tutorials: