Build Your Own Business Website header image

Styling Menus

Part 21 – Set Up the Feature Area Content Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

The last time we met for this convert an HTML website to Thesis 2.2 we set up the page templates and got the menu styled. Now what we want to do is style this content section. It will look reasonably close to this. Some of these styles we can take from the Thesis Classic Styles.

Part 20 – Set up the Menu Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing we are going to do is to set up our styles on the new site. We're going to start off with our menu style and the way we're going to style this is with this new box I just created. It is the Thesis Style Manager Box and will be available to

How to Right Align a Menu in Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to right align a menu in Thesis 2.1 where we set an explicit width to top nav and when the browser window gets below that width we reset that to 100% wide. Member: Can you please narrow the width of the screen of your browser. Further, further. The menu

Thesis 2 – Troubleshooting Menu Styling

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

In this session we troubleshoot menu styling in Thesis 2. The submenu isn’t taking the same styling as the main menu and there is an extra border. We review the code and show how to fix the problems. We also show how to give the submenu an absolute width in the Custom CSS to give

How to Create an apple.com Style Menu in Thesis 2 – Part 4 – Add Border and Corner Radius

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is give our apple.com style menu a border and give it some corner radiuses. We'll come back over to this and our border, we're just going to give it a 1 border width. It's going to be solid but the border color is going to be slightly darker

How to Create an apple.com Style Menu in Thesis 2 – Part 3 – Create the Gradient Background

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We have the structure of our apple.com style menu spread out across this and now we're going to create the gradient background for it. Actually, I'm missing one color but I'll get that in a moment. We're going to come over here to ColorZilla Gradient Generator. And in fact, we're going to start off by

How to Create an apple.com Style Menu in Thesis 2 – Part 2 – Adjust the Menu Item Widths

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we've discussed the characteristics of an apple.com style menu and created the basic menu in Thesis 2, we'll move on to styling the menu and specifically we'll begin by adjusting the menu item widths. First we're going to get rid of the background color that extends all the way across here. This background

How to Create an apple.com Style Menu in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this seminar we show how to create a simple, clean menu with no drop downs for a Thesis 2 website just like the menu you see on the apple.com site. We take you through the steps of adjusting menu item widths so they spread evenly across the page, creating a gradient background using your own color scheme in ColorZilla and adding border and radius to the menu. We demonstrate how to create this type of menu in our Agility Nude skin but you can do this in any Thesis 2 skin.

Styling Sidebar Menus in Thesis 2

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

In this session we demonstrate how to style sidebar menus in Thesis 2 by changing the class of the sidebar menu that is interfering the styles that we want to apply. We talk about installing the Widgets Reloaded plugin to be able to change the class of the widget menu. Member: So, now another menu

Configuring a Header with Menu to be Responsive in Thesis 2

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

In this session we show how to configure a header with a menu to be responsive in Thesis 2. We talk about what to do with the header image and discuss the different ways of displaying the menu by adjusting its sizes and using a background. Member: The header banner that you helped me with,

How to Add Multiple Menus to Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we demonstrate how to add multiple menus to Thesis 2. As usual, the menus themselves are created using the WordPress Menu system. We show how to add them using the Nav Menu box in the the Skin Editor which gives us a choice of menus to display.  We talk about how to

How to Add a Background Navigation Image to the Nav Menu in Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we show how to add a background image to the Nav Menu in Thesis 2. The Nav Menu doesn’t have a way for us to add a background image other than by creating a new single element styles package. We show how to make the background transparent by using the menu package