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/
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