Lesson 10: Site Work and Social Networking Chapter 1: Introduction If you've ever been involved in a building project, you're probably familiar with the punch list, the minor details remaining after the big jobs are out of the way. In this lesson, we're going to work on the website equivalent and take care of a few final items to polish for our class project. Specifically, we're going to organize the home page slider, change the website's color, and tweak the sidebar a bit more. We'll also make some additional style changes. Then we'll switch gears and discuss how to take advantage of the many social networking features available in WordPress. I'll show you how to link your WP site to a Facebook page and a Twitter feed, how to share your content with others, and how to use a blog to turn casual visitors into loyal fans. There's plenty to cover, so let's get started by putting the finishing touches to our website. See you in Chapter 2! Chapter 2: Getting Our Website Ready for Launch We're going to pick up where we left off, a few lessons back, by improving our theme's look and feel. The goal is to achieve a consistent style among the site's major elements. In Lesson 8, we used the Google Fonts plugin to change the website's main fonts to Open Sans. But it didn't affect the sidebar headlines. Let's see if we can adjust that now. 1. Open the home page in your browser. Then open it’s element inspector (CTL+SHIFT+I in Chrome; F12 in IE or Edge). Right-click the Sponsors title in the first sidebar widget. If necessary, choose Inspect from the right-click menu, to locate the style. The inspector will tell you that this rule is at line 769 (or thereabouts).
19
Embed
Lesson 10: Site Work and Social Networking€¦ · Lesson 10: Site Work and Social Networking Chapter 1: Introduction If you've ever been involved in a building project, you're probably
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Lesson 10:
Site Work and Social Networking
Chapter 1: Introduction
If you've ever been involved in a building project, you're probably familiar with the punch list, the
minor details remaining after the big jobs are out of the way. In this lesson, we're going to work on the
website equivalent and take care of a few final items to polish for our class project.
Specifically, we're going to organize the home page slider, change the website's color, and tweak the
sidebar a bit more. We'll also make some additional style changes.
Then we'll switch gears and discuss how to take advantage of the many social networking features
available in WordPress. I'll show you how to link your WP site to a Facebook page and a Twitter feed,
how to share your content with others, and how to use a blog to turn casual visitors into loyal fans.
There's plenty to cover, so let's get started by putting the finishing touches to our website. See you in
Chapter 2!
Chapter 2: Getting Our Website Ready for Launch
We're going to pick up where we left off, a few lessons back, by improving our theme's look and feel.
The goal is to achieve a consistent style among the site's major elements.
In Lesson 8, we used the Google Fonts plugin to change the website's main fonts to Open Sans. But it
didn't affect the sidebar headlines. Let's see if we can adjust that now.
1. Open the home page in your browser. Then open it’s element inspector (CTL+SHIFT+I in
Chrome; F12 in IE or Edge).
Right-click the Sponsors title in the first sidebar widget. If necessary, choose Inspect from
the right-click menu, to locate the style. The inspector will tell you that this rule is at line
769 (or thereabouts).
Sidebar headline CSS in Firebug
In the right window, you'll see the title's font is included in the rule covering the element
h3.sidetitl.
2. Go to the Edit Themes page (Appearance > Editor), and scroll to Line 769 on the style sheet.
(If your browser has an Edit > Find feature, you can also find the element by clicking the
Find link (or CTRL + F) and entering h3.sidetitl in the search bar.)
3. Copy this entire rule (appx. Lines 769- through 783), open Appearance > Edit CSS, and paste
the rule at the bottom of the column. (It may be necessary to click Additional CES to open
the code window.)
4. Change the font-family properties to Open Sans, sans-serif to match the Google font we
chose for the main content. Then change the color to #000099.
Remember to end both lines with a semicolon. Changes to the sidebar won’t be
immediately visible in the right side until Step 6 below.
5. Change the font weight from Normal to Bold. When you're finished, the rule should look
like this:
Sidebar headline with the changes highlighted
6. Click Save and Publish, and check the home page sidebar. The widget box titles are now
formatted in the same font and color as the content area headlines.
7. If you don’t like the drop-shadow on the sidebar title text, remove this entire line:
textshadow:1px 1px 0px #ced6db;
Changing the Theme's Overall Look
What do you think? Are the theme's grayish background colors a bit bland? I'd prefer a bluegreen hue
(as in water garden color). In fact, I tried this out, using an image editing app to recolor all of the
background images we can now add to the theme.
Download background images and all other files you'll need for this lesson below.
Download Lesson 10 material
When you open the folder titled Theme Color files, you'll find six image files. We're going to use these
images to replace the ones that came with the theme.
To make things easier, I've kept each replacement filename very close to the original. For example,
bot2.jpg is the revised version of the original bot.jpg (which provides the background for the footer).
If you have an FTP client like FileZilla or CoreFTP, you can use it to move the files. It’s generally easier
though to do what we’ve been doing in earlier lessons. Just use the WP File Manager.
1. Go to Media > Add New.
2. Click Select Files, and a window showing your computer’s hard drive will open.
3. Navigate to the place on your computer where you saved the downloaded background color files,