Lesson 8:

Customizing Your Website, Part 2

Chapter 1: Introduction Now that you've taken a tour into the world of CSS and HTML, let's spend a little more time

practicing how to use these tools to refine your website's look and feel.

In this lesson, I'm also going to introduce you to an amazing application that will speed up your

work by helping you match your site's HTML tags with their corresponding CSS values. Then we'll

use this app to help us make a few more cosmetic changes to our project website.

And from there, we'll examine widgets—plugins that will fill your sidebars with user-friendly

features and information. Let's get started!

Chapter 2: Using an Element Inspector to Customize Your Site

Unfortunately, the people who developed HTML and CSS never created a standardized list of

elements, the properties that define websites. They left it up to designers to name the properties.

As a result, the element that one theme refers to as a header might be listed as a banner on

another theme! And while one theme describes its main content property as text, another might

call it paragraph, and a third theme could refer to it as entry text.

Clearly, this makes it difficult to identify which HTML elements we might want to change in the style

sheet.

But a browser tool, the element inspector, goes a long way in solving this problem.

The original version of this utility, designed for the Mozilla Firefox browser, was called Firebug. It

became so popular that versions were created for most other kinds of browsers. Although its

developers stopped supporting Firebug in 2017, other element inspectors are now available to take

its place. All have similar displays and work on the same principles.

How to Find an Element with the Inspector

All browser inspectors will work on any Web page. The easiest way to identify the element by name

is to put your cursor over it, right-click, and select Inspect or Inspect Element.

Let’s give it a try. In this case, we want to identify the CSS rule that controls the page title.

Firefox

If you’re a Mac user, follow this Firefox Page Inspector example. (Chrome or other browser users

can skip down to the next section.)

Open the inspector tool from the Firefox menu:

Tools > Web Developer > Inspector. Or use the keyboard shortcut Ctrl+Shift+C. (In Chrome, open

what’s called the Developer Tools by CTL+Shift+I; in IE, press F12)

Now open the class project website’s home page, put your cursor over the page title, and right click:

Then in Firefox or IE, click Inspect Element. In Chrome, click Inspect. As you can see, the process is

pretty much the same in the popular browsers, so I’ll just focus for now on Firefox. However, shortly

I’ll show you how to work with this utility in the other browsers.

The Page Inspector panel will open at the bottom of the screen:

The left window displays the Web page’s HTML coding. Check to make sure the Inspector grabbed

the element you want to identify. Then turn your attention to the window on the right: This

displays the CSS rule governing the element you right-clicked. To the right of the rule, you’ll see its

line number in the style sheet.

When you put your cursor over the line number, it tells you whether the active rule is in the

theme’s style.css file or your child theme’s Edit > CSS area. In this case, the right column tells us

that the rule is around Line 488 in the original style sheet.

Now, if you want to change this CSS element, you can paste it from the original style sheet into the

Additional CSS (Edit CSS) column, as we did in Lesson 7.

As I said, the other browsers’ element inspectors look and act much the same. Pay particular

attention to the description of the app in your own favorite browser:

Google Chrome

It’s called the Chrome Web Inspector. To open it from the menu, go to More Tools > Developer

Tools. Or use the keyboard shortcut Ctrl+Shift+I. Or right-click the element you’re interested in and

choose Inspect from the context menu. Right-click the headline on the front page titled: Build a

Water Garden.

Make sure up top in the inspector that the option is set to Elements. If you didn’t right-click the

headline element and select Inspect from the context menu, you can now click the arrow icon on

the left and then hover your cursor on the item to be identified.

Here’s what you’ll see for an H2 headline’s code in Chrome:

In the figure above, step 1 shows right-clicking the headline Build a Water Garden, then choosing

Inspect. Step 2 shows the h2 (second-level headline) rule. Then you look over in the column on the

far right side to see the CSS code that defines what an h2 headline should look like. You’ll see both

.title h2 a and .title h2 rules.

In Chrome finding the code’s location within its style sheet is pretty easy: The line number is

displayed. And in this example, style-CSS indicates that this rule comes from the site theme’s CSS

file (Appearance > Editor).

If this were a rule you had typed into your child theme (via Edit CSS), you would see custom-CSS,

like this:

Tip: Sometimes you don’t see the style rule code you expect to see. (Especially if you’ve already

looked at one rule, but are now trying to look at a different rule.) In other words, you see a

headline h2 rule over on the right side, but you are now clicking or hovering over the body text to

see it, not the headline. Usually the most reliable way to see any rule is to right-click the element

(some body text for example), then choose Inspect from the context menu. But if this isn’t working,

you can also try just clicking the body text a few times. Or click the arrow icon again up top, then

hover your mouse over body text, until that code finally shows in the right side of the screen. Also

try pressing CTL+SHIFT+R to hard reset your browser. Whatever works.

OK, now you know that the H2 headline rule can be located in the theme’s style sheet (Appearance

> Editor) at line 616. So you can copy that rule, then go to your child theme (Appearance > Edit

CSS), paste the rule, and modify it as you wish.

Microsoft Explorer/Edge

The app is known as Microsoft Developers Tools; and if you don’t right-click and click Inspect

Element, you can open the panel by clicking the F12 key, or using the keyboard shortcut Ctrl-Shift-I.

Make sure DOM Explorer is selected in the menu; and if you want to locate the element from

within the inspector, click the icon outlined in green above.

Here’s a link at the Microsoft Explorer’s right panel:

Notice that the Microsoft app selected a different rule, the title link, instead of the title itself. To

find out the rule governing the title, go back to the left panel and move your cursor up one line to

<h2>. This will display style sheet line 488 on the left.

Safari:

Before using the Safari Developer, go to Settings > Preferences > Advanced, and check the box next

to “Show Develop menu in Menu bar.”

Then go to the Safari Menu and click Develop > Show Web Inspector. Or use the keyboard

shortcut Command + Alt + I.

Or you can right-click the element on the Web page, and select Inspect Element.

The Safari inspector doesn’t include an icon that lets you pinpoint the element from the panel

menu. But it’s like the others in displaying the HTML element description on the right side.

And the left panel is also similar, displaying the element’s style sheet location.

Let’s Go Exploring

This time, I’ll use the Chrome Web Inspector to demonstrate how to change the color of the titles

on our “What’s New” blog page.

Open the front end version of the website, and click the What’s New link in the menu.

Now put your cursor over the headline, "Keeping Your Water Clear." Right-click, and then select

Inspect.

Chrome Inspector shows style sheet line number

The rule's name is .boxtitle h2 a, boxtitle h2 a:link, .boxtitle h2 a:visited. Let's dissect that to

figure out what it means:

These CSS properties signify that a blog page headline will appear light blue (indicated by the color

value #076daf ). Because there's no font size specified, the headline is inheriting its size from an

earlier rule. I want to change that so the headline is black and a bit larger.

Unfortunately, you can't make the actual change in Chrome, so we'll have to make a note of the

rule's location in the style sheet. You'll find that in the right column: style.css refers to the theme's

main style sheet, and line 570 pinpoints the exact rule.

To make the change, follow these steps:

1. In the WordPress back end, open the Theme Editor (Appearance > Editor), and scroll

down to line 570 (or thereabouts).

2. Copy both the .boxtitle h2 a rule and also the boxtitle h2 a:hover rule below it.

3. Open the Appearance > Edit CSS style sheet and paste these two rules below the other

rules from Lesson 7.

4. In the .boxtitle h2a rule, change the color value to black, so the property line looks like

this: color: #000;

Now let's also make the headline font style a little larger.

5. Create a new line of code underneath the background-color property line (so it now looks

like this):

background-color: transparent; font-

size: 24px;

6. Now move down to the second rule, .boxtitle h2 a:hover. This controls the headline

style when a visitor hovers over it with her mouse. When it changes color, shows her that

the headline is also a link.

7. Change the hover color to blue: color: #0000EE;

8. Here are how the rules should now look:

.boxtitle h2 a, .boxtitle h2 a:link,

.boxtitle h2 a:visited { color:#000;

background-color: transparent;

font-size: 24px;

}

.boxtitle h2 a:hover { color:

#0000EE;

background-color: transparent;

}

9. Click Publish.

10. The headline should now be black, turning blue when you put your mouse over it.

The browser element inspector utilities include many more features than we have time to review in

this chapter. So when you have some time, play with them and discover all they can do. For now,

let's proceed to Chapter 3, where we'll use the inspector to make a few more cosmetic changes.

Chapter 3: Continuing the Website Facelift In Lesson 7, I showed you how to use CSS to change the look of fonts, lists, headlines, and margins.

Let's explore some other modifications.

You'll sometimes want to adjust the way WordPress has placed images on your pages and posts.

They can be out of alignment with the text, too close to the content, or you might not like the way

they're decorated.

One common style fix is to add space between a picture and the text that wraps around it. Because

our waterfall image is aligned to the left of the content, let’s increase the photo's right margin to

add some extra whitespace. On the rule governing this image (the selector is img.alignleft), the

right margin now is 10px. Go ahead and increase it to 20px and see how that looks. Remember to

copy the img.alignleft rule from the Appearance > Editor screen (around Lines 125 to 131), and

paste it into Appearance > Edit CSS before you make the change.

The values are currently written like this: 5px, 10px, 10px, 0px. When you see four values, the first

will apply to the top; the second to the right margin; the third to the bottom; and the fourth to the

left margin. They'll always start with the top and move clockwise. Therefore, you'll be changing the

second value in the list, so the right margin becomes:

5px 20px 10px 0px

There are many more attributes and properties you can control with HTML and CSS, but it would

take an entire course to explain them. Whole books have been written.

Some Styling Shortcuts

CSS isn't for everyone. If you're still hesitant to customize style sheets, WordPress offers a couple of

plugins that will change your site's appearance without requiring you to get up close and personal

with the code:

1. TinyMCE Advanced. TinyMCE is the text-editing app built into WordPress. This plugin

adds up to 40 more buttons to the Visual editor toolbar, helps you create tables, and

makes it easier to style your text.

TinyMCE Advanced toolbar

2. Easy Google Fonts (author: Titanium Themes) is a plugin that gives you loads of fonts to

choose from. It's a good way to change font styles without touching the CSS. And it

gives you the great advantage of WYSIWYG editing (no clicking an Update button and

repeatedly switching between the back and front end).

After installing the plugin, go to Appearance > Customize. Then choose Typography > Default

Typography. Now you’ll see a list of the various elements. Let’s take a look at the paragraph

typeface. Click Edit Font under Paragraph:

Now, to see the many options offered with this tool, click the Appearance and Positioning tabs:

Then click the Styles tab to go back to that set of options. Then click the arrow icon to open the

Font Family area:

This plugin shows you in realtime how your pages will look when making adjustments. Our theme

default for paragraph text is a perfectly nice serif font in the classic Times Roman style. The theme’s

default CSS for the paragraph element is:

font-family: Merriweather, Georgia, serif;

But let’s see how the page would look if you click the Arial option:

This, too, looks nice enough at first glance. But it’s uncomfortably close to boldface. Aggressive.

I've always been strangely fond of a sans font named Roboto. I'd perhaps choose that font (it's in

the list of Font Families in the category Google Sans Serif Fonts). Either type Roboto into the search

field, or find it by scrolling the Font Family list. Then I'd change the weight to 300 to lighten it a bit,

and decrease the default font size slightly to 15px. All easily done with this nice plugin! Here's the

result:

With Easy Google Fonts you get great control over most aspects of typography, and you can

instantly see the effect of your modifications as well. You can even adjust things like letter spacing

(global kerning). Kerning—tightening letter spacing—can improve the appearance of some text,

headlines especially:

If you need even finer control, like word spacing for example, I recommend giving the YellowPencil

plugin a try. And it offers easy customization of many elements, not just typography.

Changing the Website's Header

Like many WordPress themes, Marina comes with a plain-vanilla, text-only header. But it's easy to

replace it with a more distinctive banner containing a logo, image, and any font you want to use.

On your own site, you'll need to begin with a banner created in a graphics application, like

Photoshop or PaintShop Pro. I've put together a sample you can use for the water garden site.

Right-click this image below and click Save Image As or Save As Picture. When you save it, be sure

to name it header.png. (This saving might not work in the PDF version of this lesson. You can

download it from here: https://wp.me/P3zJlg-3m)

Header image

It takes two steps to add the banner to the website:

1. Find and change the CSS rule that controls the header.

2. Upload the new header image.

Open your element inspector to see how Marina defines the header element. Firebug tells us it's

called .blogname, and we'll find it around Line 221 of the style sheet.

Go to Appearance > Editor to open the style sheet, scroll down to the line, and copy the

.blogname rule.

Then go to Appearance > Edit CSS, and paste it into your updated style sheet. Here's what it looks

like:

Original .blogname rule

Currently, the .blogname element is 400 pixels wide by 50 pixels tall and has a 30 pixel top

margin. You're going to insert a banner that's 700 pixels by 100 pixels, so you'll need to create some

more room.

1. Change the width property to 700px, and change the height property to 100px. This will

increase the element's size to accommodate the banner without affecting any

neighboring elements.

2. We have to reduce the top margin to make it fit. Change the first number in the margin

property (currently 30px) to 5px.

3. Now, we'll add the image property so that it will be displayed inside the element. Insert

the following line anywhere inside the rule:

background:url( );

Shortly well adjust this so it will add the header.png file as a background image and

tells WordPress where to find it. We'll identify the URL a little later on.

The remaining three properties apply to the title text that we're going to remove. Let's

leave them, in case you want to switch back to the text-only header.

When you're finished, the .blogname rule will look like this:

.blogname { width:

700px; margin: 5px 0 0

20px; height: 100px;

text-align: left; float: left;

font-family:

Georgia, Arial,

Tahoma, Century gothic,

sans-serif; background:

background:url(

);

}

4. Click the Publish button.

So now we've used CSS to create a space for the new image header. Next, we'll upload the image

file to the website. There are two ways of doing it:

• Using the Media Library's image uploader, or

• File Transfer Protocol (FTP), which we discussed earlier.

The principle is the same for both—we want to send the header.png file to the server where the

WordPress files are stored. When you use the Media Library image uploader, WordPress adds the

file to wp-content/uploads, its default image folder. With FTP, you can specify the folder where

it ends up. So if you want more control over your images, use FTP and decide exactly where to

place the header image in storage. But when you don't really care about the file's destination, using

the Media Library uploader is a little easier.

Below are instructions for uploading the header in the Media Library. If you want to try the FTP

method, take a look at the first question in the FAQs section.

Upload Header Using the Media Library:

1. In the WordPress menu, click Media, and then click the Add New button at the top of

the Media Library screen.

2. Click Select Files, and find the header.png file you saved on your computer.

Click the file to select the filename, and click Open to upload it.

Now that the file is on the server, you'll need to get the URL representing its exact

location.

3. Locate the thumbnail image of your newly uploaded file. Then on the right side of this

field click the Edit button to open the Edit Media screen.

Click to open Edit Media screen to see URL

Edit Media screen with File URL field highlighted

4. In the Save module on the right side of the Edit Media screen, put your cursor inside the

File URL field and copy the image's URL. (Double-clicking should highlight the URL, then

copy with CLT+C.) Please be sure you've selected the entire filename. It will be in this

format (though your site name will and the date info be different):

http://watergarden.richa.sg-host.com/wp-content/uploads/2018/05/header.jpg

5. Now go back to Appearance > Edit CSS to insert the URL into the .blogname rule.

6. Find the background property and insert the URL inside the parentheses, so it's set up

like this:

Background:url(http://yoursitename.com/wp-content/uploads/2018/05/header.jpg

background:url(http://yoursitename.com/wpcontent/uploads/2018/

05/header.png);

(Remember that your own URL will be different.)

7. Click the Save and Publish button.

That's it! Check the front end to see if the new graphic header is there.

Banner with leftover text

Oops! A little yardwork left to do. . . the original title text is showing itself.

8. Here's how to hide the extra title text: Go back to the style sheet (Appearance > Editor)

screen, and copy the

.blogname h1 rule, which controls the title. It's around Line 232.

9. Open the Appearance > Edit CSS screen, and paste the .blogname h1 rule at the

bottom of all the other rules you’ve pasted before.

10. To hide the text, enter this below the text-shadow property: display: none;

(This value is similar to "commenting out" a property. It stops displaying

the rule's element without actually deleting the element.) 11. The rule should

now look like this:

Updated CSS to hide the text

If you decide to use the text instead of the banner later, you can delete that last line.

12. Click Save and Publish, and take a look at your home page.

The home page should look like this

Good work! You've installed the header through the WordPress Media Library.

As you’ve seen, the CSS underlying a Web page’s appearance is a web of property variables working

together, such as the interactions between position, size, margins, and such. In addition, the

cascade permits some rules to overrule other rules.

What if you’re page doesn’t look like the one above? Often there are several ways to reach a goal

with CSS. So use the WYSIWYG instant feedback provided by the Edit > CSS screen and fiddle with

the properties and values until you get the look you’re going for. This process of trial and error will

teach you CSS faster than any other approach! For example, maybe your result looks like this:

Framing is off

It would look best if the small gray area that frames the image were equal on the top, bottom, and

left sides. But here the left is too wide, and the top too narrow.

What’s a designer to do? Here’s a trick that works well, even if you don’t yet know everything about

CSS. Go to your Edit > CSS page and first try temporarily removing a rule that seems related to this

image, such as .blogname H1. Select this entire section from .blogname to its closing } and then press

SHIFT+Del to cut it (remove it but save a copy). Well, doing this has no effect in the right side of the

screen where you see your web page. So press CTL+V to repaste it back in.

Now try the same thing, but temporarily remove the .blogname section. Big change, so we probably

need to adjust some value or values here in this element in order to center our image within the light

blue background.

The margin element seems a likely suspect so make some changes to the value (the numbers) in here

and see what happens on the right side. If it currently reads: margin:5px 0 0 10px; then try perhaps

margin:6px 0 0 7px; Whatever looks good to your eye.

Editing Page Templates

Although it’s dangerous, until recently the WordPress Theme Editor (found at Appearance > Editor)

also allowed us to directly edit our theme’s page templates directly. But WP has essentially blocked

that capability. To change a page template now, you’d need to either create a child theme or edit

the template file on your own computer and send it to the website via FTP>

Chapter 4: The World of Widgets Up to now, we've discussed sidebars and plugins, but we haven't looked at widgets, a type of plugin

designed especially for sidebars. (Some themes call a sidebar a widget-ready area.)

WordPress widgets are installed as plugins, but you control them much the same way as you

manage the links in your custom menu.

Let's head to the back end Widgets page, which you can reach by going to Appearance > Widgets.

Widgets on the left side; sidebars on the right

The theme developer usually includes some of the most common WordPress widgets in the basic

theme. You'll see these, along with any others that you upload, in the main column's Available

Widgets section. The Inactive Widgets area is for previously configured widgets that were removed

from a sidebar. The right column displays the available sidebars in your theme. Marina has two:

Sidebar is to the right of the main content area, and the second, Footer, is above the footer. You

can open the sidebars to see what's inside them by clicking the triangle on the right side of the box.

You

might have noticed that our Marina sidebar is cockeyed. It's because of a bug in the theme's Search

widget that's knocking the other widgets out of alignment. In the Sidebar column of the Appearance >

Widgets page, grab the Search widget with your mouse and drag it to the Available Widgets area. After

you've removed it from the sidebar, things will look much better!

Removing Widgets

It's often a temptation to add lots of widgets to the sidebar, but too many can distract visitors from

the main content. For that reason, let's delete some pre-installed widgets. Besides dragging them

like you just did with Search, there's another way to delete unwanted widgets. Open it (click the

down-arrow next to its name), and click Delete in the lower left corner of the widget box. I'm going

to do that to five widgets I found in the sidebar: Recent Posts, Recent Comments, Archives, Meta,

and Categories. If you have any of these widgets, please remove them.

Installing and Configuring a Widget

Now let's add a sidebar feature, a contact widget for our fictitious water garden supply store.

1. Because widgets are installed as plugins, go to Plugins > Add New.

2. Enter rich contact widget into the search bar.

3. Under the Rich Contact Widget title, click Install Now, then Activate.

4. WordPress will install the contact widget on your Appearance > Widgets screen. Go

there now and find it in the Available Widgets column.

5. Drag the Rich Contact Widget to the top of the Sidebar column.

6. Open the widget and configure it according to the example below:

Inside the Rich Contact Widget

You don't need to specify the image map dimensions or fill out anything below the "Show image

map" drop-down.

Click the Save button inside the widget, and go to a front end page to see how it looks.

Widget as it appears in the sidebar

Assigning Widgets to Your Pages

Now that you've installed the contact widget, think about whether you need to add any others, and

if so, which ones. As I cautioned earlier, don't overload your sidebars with widgets. Stick to those

that can best help your visitors or achieve your goals.

Since our practice site sells merchandise, we're going to set aside some sidebar space for product

links and AdSense, a Google advertising tool. I'll show you how to install those widgets in the next

lesson, which explores how to monetize a website.

A great way to use more widgets without overloading sidebars is to assign different widgets to

certain pages only. You can do this with the widget visibility feature that's automatically included

during the Jetpack installation.

Let's go to Appearance > Widgets to see how it works.

In the Sidebar column on the right, open the Rich Contact Widget we recently installed.

Click the Visibility button on the bottom to open this panel:

Using the Visibility feature

The first option allows you to choose whether to show or hide the widget. If you want to limit the

widget to a small number of pages, select Show. Then select Page from the next drop-down box.

And choose the page where you want to display the widget in the third drop-down.

To add it to more than one page, click + and select the next page on the new line.

When you're finished, click Save.

Conversely, if you want the widget to be seen on most or all of your pages click Hide. Then select

Pages, and from the third drop-down, the pages where you want to hide the widget.

For the widget to appear on every page in the site, you don't need to use the Visibility feature at all.

There are thousands of free widgets available to do just about anything you can think of. You can

find them by searching in Plugins > Add New, or by doing a Google search using the words

"WordPress widget." Check out the Supplementary Material section for a recommended list of

good widgets.

Common widgets to consider:

Text widgets: It's the most versatile type of widget. You can add a custom message, an image

or video, a shortcode (to display a form or poll), or even an advertisement.

Categories: If you're blogging and don't list categories in your main menu, display them in a

sidebar.

Tag Cloud: If you tag your posts, this widget will show those tags in a sidebar.

Visitors can click a tag to see a list of the articles you assigned it to.

Common widgets to avoid:

Meta: This widget puts links to your WP administration area inside your site's sidebar. It's

maybe helpful while you're building the site, but remove it before you go live. If the Meta

widget is installed on your site, I suggest you delete it.

Calendar: The standard widget only highlights the dates when you added posts. If you want

to use a real events calendar, find a better one in the WordPress plugins collection.

Links: If you don't configure this widget, it will be displayed in your sidebar as "Blogroll" and

will have links to WordPress.org sites. You can avoid this and display more appropriate

outside links by entering your own choices in the Links submenu.

Akismet: Akismet is a terrific spam filter, but this widget won't enable it. It merely displays

how many spam messages it captures—and that won't interest your visitors.

Widget Tips and Tricks

Warning

This is where I must warn you about a counterintuitive WordPress behavior. Each time you use your

browser's back arrow to return to the Widgets page, you must refresh your screen (with your F5 key

Take advantage of the widget title option if it's available. Changing a widget's generic heading into a

customized title can reinforce your website's branding and message. For example, we could add a

widget whose generic default title is "Recent Posts." But changing the title to "Water Garden Tips"

would be more likely to grab your readers' attention.

Don't like the way your sidebar looks? Its appearance is controlled by the style sheet, so you can

use your browser’s element inspector utility to help you find the elements you want to change.

That's it for widgets! Head over to Chapter 5 for a summary of everything you've learned in this

lesson and a look at what's to come.

Chapter 5: Summary Element inspectors are a Web developer's dream. This lesson showed you where to find them in

your browser, and how to zero in on the website elements you want to change. By activating an

element inspector and putting your cursor on any part of a WordPress page, you can find out its

HTML tag and CSS properties.

Then you used the element inspector to help change the style of a class of headlines. You also

discovered how to reformat images and change a website's header using CSS.

Finally, we examined widgets, the plugin features that appear in WordPress sidebars. You found out

how to configure and install them. We added a Contact widget, which included a map. And you

installed a plugin to control which widgets will appear on each Web page.

Next time, we'll explore ways of monetizing—how to make money—with an affiliate or ecommerce

WordPress site and by participating in Google's AdSense program.

I look forward to seeing you in Lesson 9!

or the browser's Refresh button). If you don't , you won't s ee the latest changes you made on the

Widgets page, and you could lose your work.