pgp糖蛋白

書名： WordPress 2.7 Cookbook
作者名： Jean-Baptiste Jung
本章字數： 622字
更新時間： 2021-04-01 13:55:48

Modifying your theme colors

Have you ever come across a WordPress theme available online and thought, 'Wow, this is a great theme but it would look even better if it had a green layout!'? This happens to me really often, and I'm pretty sure it's happened to you as well.

Luckily, changing the theme color scheme isn't as difficult as it seems to be.

Getting ready

Of course, you'll need at least one readily available WordPress theme. You'll also need a text editor. In this example, we shall use the Vi text editor—which is my favorite text editor; however, even other decent text editors can do the job (TextEdit on Mac, gEdit on Ubuntu, or Notepad on Windows).

If you don't have a favorite text editor, you can use Vi text editor—which is available by default on Mac and Unix systems and freely downloadable from the link: http://www.vim.org/download.php#pc

On Mac and GNU/Linux systems, just open a terminal and type vi in order to open the Vi text editor. Type vi myfile.php in order to open a file in Vi.

How to do it...

The first thing we need to know is the hexadecimal color codes for each of the theme colors. Most WordPress themes use a color scheme of three to five different colors.
In order to know which colors are used on the theme, we'll have to open the theme CSS file, named style.css.
The CSS property used to define a background color is background color (or simply, background). For the foreground color, the property's name is color, and for the border colors, it is border color (or simply, border). For example, here's the color scheme which I use on the OpenBook theme:
- Background color: #151515
- Content background color: #fff
- Header blocks: #222
- Green (used for links): #49AB0D
- Blue (Titles, hover links): #109dd0
Once you have known about the colors used on the theme, you'd want to modify the theme. Open the style.css file in Vi:
vi style.css
Vi has a very useful command to replace all the occurrences of one sting with another. This way, you'll have to run the command only once for changing each color. If you choose to use some other text editor, then look for the search and replace command, which achieves the same result.
For example, suppose we are using the OpenBook theme, and you want to replace the dark grey background with a white background. Run the following command in Vi:
:%s/151515/ffffff/g
Save your modification with the help of the save command:
:w
Repeat the search and replace command as necessary.

How it works...

The command used above is a powerful find and replace feature of Open Source text Editor Vi.

In case you want to learn more about the Vi's features, visit the following link: http://www.catswhocode.com/blog/100-vim-commands-every-programmer-should-know

There's more...

Following are a few important points, for your information:

All themes use a style.css file, but some themes also use extra stylesheet (for example, using a specific stylesheet for Internet Explorer is very common). Thus, make sure to replace colors in all stylesheets that are part of the theme.
This trick can only replace CSS-based colors. To modify image colors, you'll need to use a design program such as Adobe Photoshop or The Gimp.
If you changed your theme colors and some parts still display the old colors, make sure that the CSS colors are written in hexadecimal codes (for example: #151515). Some theme designers use color names instead of hexadecimal codes (for example: they may use background color: white instead of background color:#ffffff).
Some color codes can be written by using shorthand, for example, #006699 can be written as #069—therefore, make sure that you've checked for that too.

官术网_书友最值得收藏!

WordPress 2.7 Cookbook

Modifying your theme colors

Getting ready

How to do it...

How it works...

There's more...