User login

Theme dropdown select form element

Adapted (taken) from All Drupal Themes:

form#place-taxonomy-terms-dropdown-form {
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}

form#place-taxonomy-terms-dropdown-form input,
form#place-taxonomy-terms-dropdown-form select {
padding: 1px;
border:1px solid #eee;
font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
color:#777;
}

form#place-taxonomy-terms-dropdown-form input.form-submit {
margin: 0;
font: bold 1em Arial, Sans-serif;
background: #FFF url(images/gradientbg.jpg) repeat-x;
padding: 2px 0px!important;
color: #333;
border: 1px solid #DADADA;
}

Input isn't used or necessary for what we're doing, the dropdown select.

Next step: put the form and the Go button on one line and/or get rid of the Go button when javascript is enabled.

As far as putting both elements on one line,
  display: inline-block;
didn't seem to work, but that may have been due to width of the elements.

In use at http://dev.wsf2008.net/

Resolution

Searched words: 
CSS Drupal theme form dropdown select list

Comments

Here's the larger outtake

Here's the larger outtake from the ADT stylesheet Agaric looked at:

/* form elements */
form {
/*ADT*/margin:5px; padding: 5px;
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border:1px solid #eee;
font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
color:#777;
}
select {
padding: 1px;
border:1px solid #eee;
font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
color:#777;
}
textarea {
width:400px;
padding:2px;
font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
form input.form-submit {
margin: 0;
font: bold 1em Arial, Sans-serif;
background: #FFF url(images/gradientbg.jpg) repeat-x;
padding: 2px 0px!important;
color: #333;
border: 1px solid #DADADA;
}

/* search form */
/***ADT***/
.block-search {
background-color: transparent;
border: none;margin: 0; padding: 0;
}
.block-search input.form-text {
width: 130px;
color: #333;
height: 20px;
padding: 2px;
vertical-align: top;
}

.block-search input.form-submit {
font: bold 12px Arial, Sans-serif;
color: #333;
width: 60px;
height: 26px;
border: 1px solid #DADADA;
padding: 3px 5px;
vertical-align: top;
}

#sidebar .block-search div.content {
margin:0;
padding:0;
}

form#search-block-form {
background:none;
border:none;
width:auto;
margin:0;
padding:0;
/* Drupal core css has too much styling!... */
}

/*** ADT Theme Switcher ***/

.block-switchtheme form select {
width:120px;
margin-right:5px;
}

And the form element it applied to on their site:


<div id="block-switchtheme-0" class="block block-switchtheme">

<h2>Theme</h2>

<div class="content"><form action="/preview/node/2" method="post" id="switchtheme-switch-form">
<div><div class="form-item">
<select name="custom_theme" title="Change the way this site looks." class="form-select" id="edit-custom-theme" ><option value="adt_bluebusiness">adt_bluebusiness</option><option value="adt_bluepigment">adt_bluepigment</option><option value="adt_envision">adt_envision</option><option value="adt_higherground">adt_higherground</option><option value="adt_pixelgreen" selected="selected">adt_pixelgreen</option><option value="bluemarine">bluemarine</option><option value="garland">garland</option></select>
</div>
<input type="submit" name="op" id="edit-submit" value="Switch" class="form-submit" />
<input type="hidden" name="form_id" id="edit-switchtheme-switch-form" value="switchtheme_switch_form" />

</div></form>
</div>

Haven't been able to

Haven't been able to do:
drupal theme form elements to be on one line
drupal theme form elements side by side

And resources I didn't use:

Pretty good CSS dropdown menus
http://www.cssplay.co.uk/menus/final_drop.html

theme dropdown form
css dropdown form
http://www.outfront.net/tutorials_02/adv_tech/funkyforms5.htm

input.red {background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;}
input.pink {background-color: #ffcccc;}
textarea.violet {background-color: #ccccff; font-size: 10px;}
option.red {background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;}
option.pink {background-color: #ffcccc;}

Theme dropdown select form element

I'm trying to assemble the same think you are documenting here .. i think.... in my case it is:

a select dropdown list of url's to other websites and when you choose one then your browser will be directed to go to that site. I want to place this in the left sidebar block of my drupal site. I have just begun using drupal, and am not sure where to input the url's i want to go in the list, nor how to get the list to appear. Any advice?

I am running drupal 6.6 and i have views 2 and cck installed if that is any help.

Thanks!
Jeff

Well for links you'll want to add the link module

The link module for CCK:
http://drupal.org/project/link

If you can live with just a list, and not a dropdown with JavaScript send or a "Go" button, then just use a View. Otherwise, maybe there's a view handler to display a dropdown, or or one can be written, or a view could be custom themed with the same sort of code I was stealing from. Organic Groups has the same code in there also for listing groups. I'd recommend not using the form, but outputting a list with Views and making a CSS dropdown from that if you would like.

I wish there was a module

I wish there was a module for doing this.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.