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.
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
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
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
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
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
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
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.
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
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,
In this session we talk about using vertical menus in Thesis 2. We explain how to create a menu, use a menu widget and drag the menu widget into the sidebar and style it. We can also change the list style with the kinds of bullets in the Agility Skin for the widget area. Member:
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
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