Customizing ProPhoto:
Now that ProPhoto is installed, you'll need to customize it. To do this, you need to create and upload three pictures, and edit at least one file. This tutorial shows you how. It is broken up into the following sections:
- Replacing the default images
- Editing the top main links area next to the logo
- Editing the "Bio" text
- Changing the color scheme and fonts
Other related tutorials that may be helpful:
- Activating the Flash slideshow header feature
- Detailed, line by line instructions for editing the "Stylesheet" to make all kinds of precise color and font customizations
Replacing the default Images:
Start by replacing the three main images. When you look at your blog with ProPhoto installed, you will see three images that you will need to replace: the logo image, the main header image, and the bio picture.
The 3 default images that need replacing
The default picture that comes with ProPhoto itself will give you the dimensions of the picture and basic instructions as to how to replace it. Create three new images with the correct dimensions, name them as indicated on the sample images, and upload them into the "images" subfolder of the "prophoto" theme folder. Refresh your browser, and you should see your new images replace the built-in images.
[Note: the main "header-masthead.jpg" file can also be replaced with ProPhoto's built-in flash movie slideshow feature. For instructions on how to activate this feature, click here.]
Video: Changing the default images
Editing the main links in the blog's upper right:
The main links area of your blog
You can edit any of the ProPhoto theme files directly from within your Admin area of your Wordpress blog. To edit files, click on "Presentation" and then "Theme Editor." The rest of these instructions will assume this is how you are editing your theme files, although you can also edit them on your computer (using WordPad for PC's or TextEdit for Macs -- NOT Microsoft Word OR NotePad ) and then upload them again, overwriting them on your web server.
To edit your main links on the top right area of your blog, click on the "topnav.php" file in the column on the right in the Wordpress theme editor. The link that says "Portfolio" should be edited to point to your professional portfolio, or deleted if you don't have one.
Edit the portfolio link to point to your website
The rest of the links should be left alone unless you're an advanced user. The categories, archive, and links (blogroll) sections will work automatically with your blog and generate drop-down menus.
Video: Editing the top links area
Editing the Bio text:
Editing your bio text is very similar to editing the top links area. In the Theme Editor select the file "bio.php" from the list of available theme files. Edit only the text between the <h2> and </h2> tags and between the <p> and </p> tags. You'll want to keep the amount of words about the same so that your bio section looks good. When you're satisfied, click the "update file" button to save your changes.
Edit only these areas
Video: Editing your bio area
Editing the color scheme and fonts:
If you want to change the background colors and font you'll need to use the Theme Editor to edit the file called "Stylesheet" or "style.css". It's pretty self-explanatory, so you should be able to just read through the code and understand what's going on and make simple edits.
All of the simple, common edits you will likely want to make can be made by editing the rules contained in the top section of the file. These are clearly commented to help you understand. Further down are advanced styles that you shouldn't edit unless you're an advanced CSS user.
Mostly it will be you changing out hexidecimal color values which you should be familiar with from Photoshop already. The image below shows part of this file and highlights and labels parts of the file to help you feel comfortable editing.
Study this hard. It might make you smarter.
Video: Editing colors and fonts with CSS
Detailed Customization Instructions
Detailed customization instructions, including line references for all basic color, font, and background changes can be found in our CSS Guide.
Learning is fun! Keep reading! More tutorials: