a few menu styling questions

[Live Free]

Alright, I've been messing around with this for a while, and I'm slowing getting the hang of it. I have a few questions though, since I'm not sure where to find the section or colors to edit for these. I've attached an image with numbers that should help illustrate what I'm trying to do.



For #1, some of my tabs - namely the tabs that have a drop-down menu - have a sort of shadow around them when hovered. I'd like to possibly intensify this effect, and would like to apply this effect to all tabs when you hover over them. Currently - my home, forums, and members tab only have the shadow on the left, whereas the about and help tab have the shadows on the left and right (how I'd like it). The "Find your city" link doesn't have the shadows at all. How can I standardize these? What should I be editing?

EDIT: okay, so regular nav hover and nav hover with a drop down menu have different properties. I'd like them to be the same.

What can I edit to do this?

#2 & #3 - I'm trying to edit the color of the drop-down background and hover background, but for the life of me I can't find where to edit these.

EDIT: looks like I found this one, under popup menus. Not sure how I missed that! :/
EDIT: Okay, so I'm having an issue with the menu link background color in the popup section. I'd like the drop-down menu background color to be white, and blue when hovered - however, the secondary menu uses the same properties, and I'd like the secondary menu to have separate css properties.

See here:

How can I keep the drop-down properties, but have them not affect the secondary menu?

#4 - the default for this theme had it so an image would act for tabs when they are hovered or selected (viewing that page). Can I edit a color to change the gradient color with css without actually editing the gradient color in photoshop?

Not really a styling question so much, but if I want to add a drop-down section to a custom menu item, how might I go about doing this?


Also, one last question. When making edits to a theme, is it okay to edit the css in, say, navigation.css, or should I be making these edits in extra.css? With extra.css overwrite values defined elsewhere?

Thanks for your help.

Daniel

 

[Jake Bunce]

This post shows the navbar CSS:

http://xenforo.com/community/threads/change-the-color.8749/#post-120671

Some of them have style properties, others don't. In either case you can always duplicate that CSS into the EXTRA.css template and set any colors you want using your own CSS definitions. It's best to use EXTRA.css instead of modifying the other .css templates.

More generally, this video shows how to find any CSS:

http://xenforo.com/community/threads/how-to-change-almost-anything-quickly-and-easily.33239/

If you have trouble with any specific color then post your forum URL and I will find it for you (using the method from the above video).

 

[Live Free]

Hey Jake,

Thanks. The first link helped me solve the issues with the secondary navigation. The main thing I just can't solve is the box-shadow hover effect.

My url: www.peoriaunited.com. Hovering over Help show the shadow on the left and right, but the other menu items aren't showing it the same way, in some not at all and in others just the left shadow. This might just be an issue of me not knowing the proper css, but I can figure out why help is showing it correctly but not the others. Would you mind taking a look?

 

[Jake Bunce]

Those shadows come from this property:

Admin CP -> Appearance -> Style Properties -> Popup Menus -> Menu

The box-shadow is in the Misc area.

 

[Live Free]

My problem is that it doesn't seem to be applying to all the menu items, only a few...

Edit: I had to remove the shadow-box css because it was adding a shadow box for the drop-down menu, not the main tabs. The issue is with the main tabs. I removed the box-shadow css and it continues to be displayed for the main tabs, so I think that's the wrong section/element...

I thought maybe there isn't enough space to the right to see the shadow and that's why it's only showing on the right-most tab. But I added padding 5px to the right in the Menu section to no effect (which makes me think it's still the wrong section).

All tabs (1) should display like 2.



This is the code that was displayed in Popups > Menu:

overflow: hidden;
box-shadow: 0px 5px 5px rgba(0,0,0, 0.5);

removing box-shadow completely, however, does not impact the shadows.

 

[Jake Bunce]

I found it in this selector in your style:

.Popup .PopupControl.PopupOpen,
.Popup.PopupContainerControl.PopupOpen

Which is in the xenforo_popup.css template, or in this property:

Admin CP -> Appearance -> Style Properties -> Popup Menus -> Popup Control (open)

 

[Live Free]

Thanks, that helped. I added a 2 pixel margin to that section, as well as the .popup css file, and that allowed the right shadow to show on all the tabs.