Build Your Own Business Website header image

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 -

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.

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.

Create a Vertical Gradient Using ColorZilla Gradient Generator

We’re going to come over here to ColorZilla Gradient Generator. And in fact, we’re going to start off by creating a vertical gradient and I am going to not use their tool here, I mean I’m not going to use their colors and ultimately what it’s going to do is look like this except it’s going to be our color scheme and not this color scheme. I’m just going to drag it stop marks out then come on over here.

I want this color as my dark color and footer area bottom, that’s this color here so this is going to be the dark color in the gradient so I pick that and change the color and then the light color in the gradient is going to be the menu color which is this color here so I’m going to pick this and it’s my light color.

Then, I’m going to select my dark color and then I’m going to put a stop about the middle and I’m going to lighten this dark color up a bit so I’m just going to drag it down here and then I’m going to select my light color and I’m going to click again and that’s going to bring my light color to the 4 here.

I think my dark color needs a little bit even lighter in order to really get that effect, I don’t know maybe that’s too light and then just drag this so that they’re 1% away from each other. See this is that 50% and the other one is that 51%. So we have a continuous color and then a lightening to dark color and in fact, actually maybe I’m just going to take the light color and darken it instead so we take that so that color looks like it blends a little bit better.

Creating a Variable for the Gradient Colors

So here’s our little gradient and I’m going to just copy this now then come over and create a variable. I got to go to the Thesis 2 Skin Editor and then to CSS and then I’m going to just create a variable here. I’m going to call it Typical Gradient and grad1 then just paste that value in and hit save.

While I’m here, what I want to do then is the hover condition is going to be darker and is going to go to this light color. Let’s see, let’s make this a radial and see what happens here, there we go.

So we’ll have our light color and our dark color but it’ll just go straight and it’ll be a radial instead and this radial color will be obviously lighter in the middle and darker on the edges. And so we’ll copy that to the clipboard and then come back over to the Thesis 2 Skin Editor and create another variable and we’ll call it Hover Gradient and then grad2 and then paste that information in there and hit save so we’ve created our two different gradients.

Add Background Color to the Menu Area

Now, what we need to do is give this menu area, give this whole thing, this new background color that is our gradient background. This is going to seem kind of funky but what I’m going to do is create a widget style for this.

So it’s menu-simple-menu so we’ll come back over to our select packages and I’m going to come down to Agility Widget Styles, add a package and say, Menu Background and we’ll just say, demo_menu_background.

Instead of .widget, it’s going to be #menu-simple-menu, that’s the CSS Selector and now, we’re just going to ignore this whole question of widgets here and we’re just going to come over here to Additional CSS here. Let’s grab this selector and opening and closing brackets and then we’re going to put that Background Gradient. So it’s going to be $grad1 and that should put that gradient in there for us.

Let’s see what it looks like right off the bat here. I haven’t added it to the reference list yet, &demo_menu_background, there we go so now, we’ve got that happening.

0 Comments… add one
0 comments… add one

Leave a Comment