HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [349]
Modifying the CSS files
Of course, the most powerful way to change the appearance of your pages is to modify the CSS files. Here’s how:
1. Identify the class you want to modify.
This can be surprisingly difficult in a system you didn’t create. Use the Inspect feature of the Firebug extension to quickly identify which styles act on a particular element and what its class hierarchy is.
2. Find the class definition in the CSS sheets.
Note that a system may have more than one CSS file, so find the one containing the class information you’re interested in.
3. Make incremental changes.
Make small changes and test frequently.
4. Test on a local server.
You can make changes directly on the files in your local server. Just reload the page after every change to make sure the changes are being reflected. Of course, you need to have the template installed in your system.
Packaging your template
A template is nothing more than a set of PHP and CSS files (and perhaps some images and other files). It’s pretty easy to port a template for installation. Just follow these steps:
1. Create a stable version of the template.
It doesn’t have to be perfect before you package it, but at a minimum you need to change the info.php page to reflect the new template’s name.
2. Package the entire directory into a Zip file.
Use a utility like IZArc for Windows or the Zip utility that comes installed with Linux or Mac. Save the Zip file with the same name as your template. Note: Don’t include the template directory itself in the template; just include any contents of that directory (including subdirectories, if you have them).
3. Install the template into your copy of Website Baker.
Install your template the way you do any other template.
Chapter 4: Editing Graphics
In This Chapter
Introducing Gimp
Managing the main tools
Selecting image elements
Working with layers
Understanding filters
Creating a tiling background
Building banner images
XHTML and CSS are powerful tools, but sometimes you still need to use a graphical editor to get the look you want. In this chapter you learn to use Gimp, a free and powerful graphic editor.
Using a Graphic Editor
You’ll find using a graphical editor handy for a number of tasks:
♦ Modifying an image: The obvious use of a graphical tool is to modify or create an image that will be used on your Web page. This could involve changing the image size, correcting the color balance, or cropping the image.
♦ Preparing a background image: As I discuss in Book II, Chapter 4, background images can be distracting if you aren’t careful. Making a lower contrast image (either lighter or darker than normal) might make sense so the text is easier to read. You might also want to prepare a tiled background.
♦ Building banners: Many Web sites include a special banner image that’s prominent on every page. The banner image usually has a very specific size requirement.
♦ Modifying existing graphics: You might be modifying a template from the jQuery UI project (see Book VII, Chapter 4) or from a CMS (see Chapter 3 in this minibook). In both cases, you often have images that are close to, but not exactly, what you need.
♦ Changing colors: Frequently, you have the right pattern, but not the right colors. Modifying colors with a modern graphical tool is surprisingly easy.
Choosing an editor
Fortunately, great programs that make all these tasks quite easy to perform are available. Raster-based graphics editors are designed to solve exactly this type of problem and many more. A number of important graphics tools are used in Web development:
♦ Adobe Photoshop: The industry standard for Web graphics, and indeed for all digital imagery, Photoshop is powerful and capable but quite expensive. A slightly cheaper and less powerful version called Adobe Photoshop Elements is available.
♦ Adobe Fireworks: Designed specifically for Web developers,