Forums / Templates, Stylesheets, Page Layout / styling manufacturer and alphabetical dropdown

styling manufacturer and alphabetical dropdown

Locked

Views: 1,666

Results 1 to 9 of 9
This thread is locked. New replies are disabled.
24 Jan 2010, 2:43 AM
#1
newbie76 avatar

newbie76

Zen Follower

Join Date:
Aug 2009
Posts:
100
Plugin Contributions:
0

styling manufacturer and alphabetical dropdown

Hi,

I have been looking through my files for ages now and have searched the forums and found no answer.

What I would like to do is change the background hover and text colours for the munufacturer and alpha dropdowns so that they match in with my dropdown navbar and my site, whereas the white then blue when hovered doesn't look too bad, it doesn't really fit with the rest of my site and as I am about to embark on another few changes (I know how to do the rest) but am stuck on this and would like it to match :(

Any help would be greatly appreciated!

Gary

24 Jan 2010, 2:58 AM
#2
newbie76 avatar

newbie76

Zen Follower

Join Date:
Aug 2009
Posts:
100
Plugin Contributions:
0

Re: styling manufacturer and alphabetical dropdown

forgot to say and the text colours obviously :blush:

24 Jan 2010, 4:17 AM
#3
newbie76 avatar

newbie76

Zen Follower

Join Date:
Aug 2009
Posts:
100
Plugin Contributions:
0

Re: styling manufacturer and alphabetical dropdown

In firebug I have figured out to give name="manufacturers_id" an ID, then adding that ID in the css to use the darker background with lighter text so partially there as I could obviously copy that over to my files.

BUT

I still cannot figure out how to change the hover colour from the default blue and to be able to use a different colour again for the text?

24 Jan 2010, 4:33 AM
#4
newbie76 avatar

newbie76

Zen Follower

Join Date:
Aug 2009
Posts:
100
Plugin Contributions:
0

Re: styling manufacturer and alphabetical dropdown

but I can't find where to give the manufacturers_id an ID in the actual zencart files either (though I can on the html bit in firebug)

I going to call it a night (been trying to figure this out for hours - Please advise!

Thanks In Advance

Gary

24 Jan 2010, 1:57 PM
#5
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: styling manufacturer and alphabetical dropdown

Something like:

#manufacturersContent select{background-color:#000000; color:#ffffff;}

24 Jan 2010, 3:44 PM
#6
newbie76 avatar

newbie76

Zen Follower

Join Date:
Aug 2009
Posts:
100
Plugin Contributions:
0

Re: styling manufacturer and alphabetical dropdown

stevesh:

Something like:

#manufacturersContent select{background-color:#000000; color:#ffffff;}

Thanks Stevesh, that saves having to name the manufacturers_id but only does the top layer, is there a way which I can do that and also change the hover colour from blue, basically I want to reverse the background and text colours if possible when I hover over each manufacturer?

ie.

#manufacturersContent select{background-color;#0a0a0a; color:#dcdada;}

but when hovered have #dcdada as the background and #0a0a0a as the text

Also would like to do the same with the filter results dropdowns so they all match, I cannot see what the id is for the filters.

so in firebug I have placed the code <div id="filtersContent"> above the <form name="filter" part then added to the stylesheeet:

#filtersContent select{background-color;#0a0a0a; color:#dcdada;}

Which seems to have got that the same for now, though I do not know where to add the <div id="filtersContent"> in my actual files or how to alternate colours on hover.

Any ideas?

T-I-A

24 Jan 2010, 4:26 PM
#7
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: styling manufacturer and alphabetical dropdown

OK, I thought you wanted those dropdowns to behave the same as the dropdowns in your header and they seem to do that with:

#manufacturersContent select, #indexProductList select{background-color:#000000; color:#ffffff;}

except the background on hover is gray rather than blue, so maybe I'm not getting it.

24 Jan 2010, 5:17 PM
#8
newbie76 avatar

newbie76

Zen Follower

Join Date:
Aug 2009
Posts:
100
Plugin Contributions:
0

Re: styling manufacturer and alphabetical dropdown

stevesh:

OK, I thought you wanted those dropdowns to behave the same as the dropdowns in your header and they seem to do that with:

#manufacturersContent select, #indexProductList select{background-color:#000000; color:#ffffff;}

except the background on hover is gray rather than blue, so maybe I'm not getting it.

Thanks again, another easier way than I was finding to get the same result (I didn't know the indexproductlist name), but it's still blue on hover (at least on mine), when I click to open the dropdown it's a dark grey / blacky colour (#0a0a0a which is the colour that I want there), but when I put the pointer over any of the items in the dropdown they still hover blue, which is all I need to find out how to change now?

I really do appreciate your help so far and it will still look better than it did before just wish I could get the hover the same colours as the navbar.

Thanks again

30 Jan 2010, 8:42 PM
#9
lissae avatar

lissae

Totally Zenned

Join Date:
Oct 2007
Location:
Australia
Posts:
814
Plugin Contributions:
0

Re: styling manufacturer and alphabetical dropdown

The drop down select menus get their hover color from the viewer's operating system colors, so for example users of xp will see them in blue, and if you've customised your operating system or use a different one, version etc, it will be seen in a different color, like stevesh I also see the hover in gray rather than blue.

From what I can gather by a brief google search you'll need to use javascript to change this...I used the keywards "select box hover color" without quotes to search and got some listings you might want to check out....hope that helps as I don't know enough about it to help you more LOL :)

HunnyBee Design
"A man's manners are a mirror in which he shows his portrait." ~ Johann Wolfgang von Goethe