Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2 – Part 15 – Style a Query Box with Custom Text Styles

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

The last thing I want to do in this seminar on Styling the Agility Skin for Thesis 2 is to style these boxes here so that they look like they do in this website. The way we do that is by using both a combination of background styles and text styles.

Custom Text Areas

Notice I have this section called “Custom Text Areas”. You have 3 sets of definitions for your custom text area and for custom text you can set up typical text, links, headings, subheadings and sub subheadings. Again, none of these things are for backgrounds, these all just apply to the text itself.

Create Custom Background Style

We’ll style the headings using the custom text area and then we’ll create a style-3 background. In fact, I’m going to start with that. We’ll use the extra style-3 background. And the background color is FOEEE2. We’ll just paste that background color in there. I’m going to say 26 pixels of padding all the way around and see what happens with that.

Apply the Custom Background Style to Query Box

We have to apply that style. Now in this case, we would apply the style to the query box. Let’s go edit our front page template and what we’re going to do here is add the style to the query box. So we’re going to say style-3. We can add that class to the query box directly.

Add Styling in Custom Text Areas

When we come back and view the site, it should be applied. It is, so now we’ve got this style applied here. We still have some changes to make. This has a lighter text and it’s not Georgia so we’re going to change that and then this wants to be that dark green and we want it to go on one full line. That’s what these custom text areas are for.

In our custom text area 1 headings we’ll make the font Arial, we’ll make the font size 18, we’ll make that color that dark green, 274DOO and we’re going to make the font weight normal. We’re not going to do anything else with that, I’ll make it center align though. Say okay to that.

The other thing we’re going to do is configure that typical text in there and it’s going to be Georgia and we want that color to be that 444, the dark color. That’s probably all we really need for that. Say okay to that and save our design options.

Apply Custom Text Area Styles to Query Box

The way we apply that custom text area style is to add that name custom to those query boxes. So again we come back to that, open up our query boxes and next to style-3 we’ll say custom-1. So custom-1, custom-2 and custom-3 are the ways you apply that style to the query box.

Where You Can Use the Custom Text Styles

It doesn’t just apply to query boxes, of course, you could use that custom text style in a text widget or in a text box. You can really use it on any place where there is text. You can use that custom text style to create a custom style and then the custom-1, custom-2 and custom-3 to apply that style.

0 Comments… add one
0 comments… add one

Leave a Comment