Build Your Own Business Website header image

BYOB Agility Nude Skin

How to Upgrade Agility 3.2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We just finished upgrading Thesis to 2.2 so now let’s do an upgrade of the Agility Skin. Go to Thesis and Manage Skins. This site is ready for a skin update to 3.2. But you should always make sure you update inactive skins too. We’ve got Classic Response that we aren’t using but we still

Style the Phone Number Link

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Before we go on to our next subject, Configuring Google Analytics, I want to make a change to this link color up here. Now that we are looking at it on this page I see that I can’t read that link easily. We can make that change in Skin Design. Let’s come down to Typical

Style the Main Sidebar Widgets

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In the Styling Widgets in Agility 3.2 video we talked about all the different areas of this Thesis skin that have built in widget areas. One of those areas you are likely to use widgets in is the main sidebar area so we are going to take a look at that now. Each widget area

Styling Widgets in Agility 3.2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We have created 3 different widgets here for the professional WordPress website we’re building. We have a contact information widget, a Call to Action widget and a Testimonial widget. In order for us to style the widgets we have to come over here to Skin Design. First we are going to look at our built

Style the Footer Widgets

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The final thing we are going to do in this lesson, Understanding and Using Plugins and Widgets, is to style the Footer widgets. Obviously, this isn’t what we want it to look like. And so the first thing to do is set up the style of the headings. And we’re going to do that over

Style the Footer Using Skin Design Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The last thing to set up on the home page of our professional services WordPress website is our Footer. We want our footer to be dark and darker not light and dark. So we can come back over to our top footer area background. Show the background color and we’re going to choose canonical red

Style the Background of the Feature Box Area

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next background we’re going to style on this professional services website is the background for the Feature Box area. And we do that by coming over to the feature box area background and choosing a background image. First we should say new media. Select the file and here it is. Except it’s way too

Style the Menu Using Skin Design Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we have created our menus for this Professional Services Website let’s style the main menu. Come back over here to Menu Style Options and we’re going to grab the main menu. With a menu like this when you are styling the colors you essentially have two different elements to style and three different

Style the Header Using Skin Design Options

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now that you know where you can style all the built in background areas in the Agility Skin for your professional services website, we are going to look specifically at styling the header. Right now I’ve got a white background through here and I don’t want that. I’ve actually got this graded background from kind

Styling the Built in Background Style Areas in Agility 3.2

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We are continuing to add style and content to the Home Page of this professional services WordPress website. We just finished setting up the color scheme and now we are going to work on styling the backgrounds. We have this background to customize and this background to customize. Also, the feature box area to customize

Set our color scheme

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we have looked at how to use the Agility Skin Color Scheme system we are going to setup our own color scheme on this professional services architectural site. This is my base color, this orange here, and I’m going to use Triadic. And save it. And it’s mostly there but not entirely. I

Using the Agility Color Scheme System

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We have just looked at what you can style using Agility 3.2 Skin Design Options. And one of the things in Skin Design that you can use to customize your site is the color scheme system. So that’s what we are going look at next. The Agility color scheme generator consists of a couple of

Overview of Agility 3.2 Skin Design Options

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Before we begin styling the home page of this Professional Services Website we are going to start off with an overview of the Agility 3.2 Skin Design options. You get to Agility’s Skin Design options by coming over here to Skin Design. One of the things that makes Agility so powerful is the very large

Agility Featured Content Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We are adding style and content to the home page in this lesson of our Build a Professional Services website with WordPress and Thesis. We just showed how to use the Call to Action box and now we are going to look at these Featured Content Boxes. Right now on the front page it’s just

Agility Call to Action Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Next in lesson 11, Add Style and Content to the Home Page, of this Build a Professional Website using WordPress and Thesis course we are going to look at the Call to Action box. So far we have looked at the Featured Content Box, Icon Content Box, widget areas and Thesis text box. The Call to

Setup the Header

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that we've created the menu for our Professional Services website it's time to set up the header. When we talked about the parts of an Agility page remember I told you that the header consists of three parts: the top header area, the main header and the top menu area. Each of these can

Create the Menus

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing we need to do before styling the header is to create the menu for this Professional Services website we're creating. We’ve created all these pages but we don’t have any menus. When we look at the site as it stands we don’t have a menu here at all. We can’t go look

Setup Default Font Styles

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we are going to do is work on the default font styles for our professional services website. Let’s come over here to the dashboard and then over to Thesis and Skin Design. Again, the reason why we set up these default font styles at the beginning is because they're the other piece

Setup Agility Display Styles

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We are going to start setting up our pages in Agility for this Professional Services website. And we’re going to begin by setting up the Agility display styles. Let’s come over to Thesis and skin content. That's where you’ll find the display styles for Agility. In my display styles I've got 6 different settings. Global