Money-back guarantee. We're so confident that you can learn your

platform with our classes and our help that we'll refund your money at any

point during your membership.

Site Navigation

Site Map | Affiliate Program | Refund Policy | Subscriptions | Blog | Login

Section Activities - Modifying Themes

Before you start:

In order to complete these activities, you will first need to install Firebug for Firefox. You can find it here:

http://getfirebug.com/

.

If you do not choose to follow these steps on a localhost installation of WordPress, keep in mind that you will need to upload any new or modified
files to the correct location after each save.

MODIFY THE DEFAULT TWENTYTEN THEME

Add Your Own Logo

Add your logo file (or an image you want to use as a placeholder) to wp-content/uploads. (On the Internet, you can use JPG, GIF, or PNG files for
images. Avoid using other formats such as TIFF or BMP.)

1.

Right-click on the logo text at the top of your website, and select Inspect Element.

2.

In the left-hand Firebug pane, make note of both the highlighted text, and the other text surrounding it.

3.

Open wp-content/themes/twentyten/header.php in your text editor, and scan down the page looking for the HTML "clues" you noticed in the
previous step.

4.

Once you find the correct area, find the "bloginfo" text and delete all the contents between the "" tags, including the tags themselves.

5.

In their place, add the following: (Pay careful attention to your quotation marks and the path to the image.)

6.

Save the changes, and reload your blog to see if the changes are showing up correctly.

7.

Remove the Header Image

Right-click on the header image in your website, and select Inspect Element.

1.

In the Firebug HTML pane, notice which HTML is selected. This is what you will be trying to delete from the theme.

2.

Open wp-content/themes/twentyten/header.php in your text editor, and scan down the page looking for the HTML "clues" you noticed in the
previous step.

3.

Delete the line that says: < img src="/< ?php header_image(); ? >" width="< ?php echo HEADER_IMAGE_WIDTH; ? >" height="< ?php echo
HEADER_IMAGE_HEIGHT; ? >" alt="" />

4.

Save the changes, and reload your blog to see if the changes are showing up correctly.

5.

Change the Color of Post Titles

Right-click on a post title, and select Inspect Element.

1.

In the CSS pane on the right-hand side, look for a line that references color. Make note of the line number where that property can be found in
style.css.

2.

Open wp-content/themes/twentyten/style.css in your text editor, and scroll down to the line number in question.

3.

Change the color value from it's current value to #cc0000.

4.

Save the changes, and reload your blog to see if the changes are showing up correctly.

5.

Home

Joomla

WordPress

Drupal

Coding

OSToolbar

About

Blog

Contact

Training

Forum

Account

search...

Section Activities - Modifying Themes - OSTraining

http://www.ostraining.com/wordpress-courses/wordpress-intermediate/se...

1 of 2