Styling the tag dropdown menu (3 posts)

  1. simplymother
    Posted 7 years ago #

    I've been searching for how to make my dropdown menu blend in better with my site but not having luck. I've come across suckerfish, of course, but I don't know if I need something that elaborate, and anyway, how would I implement it for tags? This is the code I'm using to call my tag dropdown menu (site is simplymother.com, and my tags are listed under the term "categories" even though I'm actually using tags.):

    <select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
    	<option value="#">Most Used Tags </option>
    	<option value="<?php bloginfo('url'); ?>/?pagename=tags">All Tags</option>
    <?php dropdown_tag_cloud('number=10&orderby=count&order=DESC'); ?>

    Which code I found on this support thread: http://wordpress.org/support/topic/154317?replies=11

    All I really want to do is change the font type and color, and maybe the color of the border and arrow. It seems pretty simple, I can change those things in a CSS stylesheet normally, but what heading or element or whatever it's called would I add to the stylesheet, since it's not already there?

    I did surround it with '<ul class="dropdown">, and from that I was able to move it over so it's more in line with everything else, but I still can't change the font or colors or anything. I'd much appreciate any clues you could offer. Thanks!

  2. zeniph
    Posted 7 years ago #

    #sidebar ul.dropdown li SELECT{
    	border:1px solid blue;

    though since you only seem to have the one dropdown select

    SELECT {
    	//css code here

    would also do it

    styling the arrow is kind of possible but can lead to lots of cross-browser fun


  3. simplymother
    Posted 7 years ago #

    Thank you, thank you!

    So about that arrow--what about just changing the color to be the same as the border, is that complicated?

    Also, can I change the background color for the one you're hovering over? I guessed at just adding a:hover to what you have up there first, but that's not it. Where does one find what all these things are called? Without having to be a nuisance at the support forums? ;)

Topic Closed

This topic has been closed to new replies.

About this Topic