We just finished making the main menu in the Agility Skin for Thesis 2 span across the page using supplemental styles and now I want to show you how to add a border to the menu using these styles.
Set Bottom Border on Main Menu
Let’s come to the main menu and we want main menu link supplemental style. We’re going to come down and say for our border width 0 top, 0 right, 5px for the bottom and 0 left. Let’s say the border color is that. So this is the link style. Say okay to that.
Then we can come over to our hover supplemental style and choose a border color. Say okay to that one. Then we have one last one, the current supplemental style, and for our border color let’s do that. Now, if we reload this, whoops I forgot to set up the border style.
So let’s come back over to the main link supplemental styles and choose a border style of solid. Let’s change the hover color so that’s a little bit more distinctive and let’s make the hover color this color.
Obviously you can set something for the menu that makes the menu standout and gives it a bottom border. I recently saw this and I thought the effect that they had looked really good, obviously the color matters. You’ve got to pick a color that looks good when you do that.
Remove Border from Submenu
Then we can, of course, turn the border off on the submenu by simply saying border style none for that. Let’s refresh this and now we don’t have a border showing up for the submenu. So you can use something like that as a way of making the menu standout and changing up colors.
Wendy asks, “Is there such a thing as RGBA Gradients?” Yes, I believe there is Wendy, I mean you can try it but I’m pretty sure there is. There’s certainly such a thing as RGBA drop shadows and RGBA text shadow so I suspect there is such a thing as RGBA gradients as well.
Next I’m going to show you how to create menu buttons using the supplemental styles in Agility.