Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
 FAQ: Customize your Moderation Options dropbox
Before you go adding a lot of stuff you don't need to your board, there is no need to touch the custom language set if you want all your options to look the same, and you can simply define all drop boxes like so:
select {
background:#DDD;
}
option {
background:#EEE;
margin: 1px;
border: 1px solid #ccc;
color: #00C;
}
That said, it is possible to make each option look different from the others with some custom language set hacks and extra CSS, as you will see in the screen grabs within this thread. If this is what you want to do, then read on...
Note: Images and certain other customizations will not work in Internet Explorer, and will only work in web-standards-compliant browsers like Firefox and Netscape.
Click the image for a representation of this.
What will work in each browser?
All the major browsers, including Internet Explorer, Firefox and Netscape:
• border
• background-color
Firefox and Netscape, but NOT IE:
• border
• background-color
• background-image
• padding
• margin
• font-family
• font-weight
• text-align
• display
• visibility
As you can see, Internet Explorer is quite limited when it comes to customizing drop boxes, just so you know before you attempt this customization.
I'll repeat the standard advice here whenever making customizations. Try this out on a test board first, especially if you're a novice, and ALWAYS back up your existing code before trying this on your "real" board. That way, you can just paste the old stuff back in if you screw it up. Since so many fields are involved in the custom language set, your best bet is probably to save that entire page using File » Save from your browser's toolbar. Notepad will suffice for saving your CSS.
Step one: Custom Language Set
Find the appropriate fields and replace the text like so. Feel free to change any text you want (Moderation option, Delete, Close, Reopen, etc), but do not change any of the code itself.
topic_list_moderate_moderationoption
</option><option class="moderationoption" value="0" selected>Moderation option</option>
<option value="0" disabled>-----------------</option><!--
topic_list_moderate_delete
--><option class="nukenukenuke" value="nukenukenuke">Delete</option>
<option class="enoughofthat" value="enoughofthat">Close</option><!--
topic_list_moderate_close
--><option class="jumpinthefire" value="jumpinthefire">Reopen</option><!--
topic_list_moderate_reopen
--><option class="yougonnareadthis" value="yougonnareadthis">Sticky</option><!--
topic_list_moderate_sticky
--><option class="noonereadsohwell" value="noonereadsohwell">Unsticky</option><!--
topic_list_moderate_unsticky
--><option class="iliketomoveitmoveit" value="iliketomoveitmoveit">Move to...</option><!--
topic_list_moderate_moveto
--><option class="omgthatissensitive" value="omgthatissensitive">Hide</option><!--
topic_list_moderate_hide
--><option class="allrightnobiggie" value="allrightnobiggie">Unhide</option><!--
topic_list_moderate_unhide
--><option class="hidethisstupidoption" disabled>-----------------
Step two: Custom CSS
In the above code, I have underlined the class names you will use for each option. Since everyone's customization will be different, I can't possibly write the exact code you'll be using, but this first one you will probably want to use:
.hidethisstupidoption { display:none; }
This will hide the last field in Firefox and Netscape. IE users will see the dashed line, so feel free to also give it a background color and/or border if you wish.
.hidethisstupidoption {
display:none;
background-color:#c9c9c9;
border: 1px solid #d9d9d9;
}
To add a 15px icon to the left side of the text:
.whatevertheclassishere {
background:url('your_icon.gif') no-repeat;
padding-left: 18px;
}
In the above example, replace "whatevertheclassishere" with the appropriate class name (underlined in the above code), and replace "your_icon.gif" with the full url to your icon.
If you want a background image to fill the option box with your text in front of it, you can leave off the padding-left, add text-align:center;, define a height to accommodate your image and use padding-top to vertically center the text.
.whatevertheclassishere {
background:url('your_icon.gif') no-repeat;
height:30px; padding-top: 9px;
text-align:center;
}
Play around with it
That should get you started. Just play around with this on a test board and check it in both Firefox and Internet Explorer to see what you can come up with. For more help with CSS, check out their tutorials at w3schools, following their list of links on the left, under the heading: CSS BASIC.
Last revised by Lesigner Girl, 7/8/2006, 5:19 am
|
|
6/8/2006, 8:05 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
The Mooseman
Citizen
Registered: 03-2005
Province: Looking for my brain...
Posts: 592
Karma: 8 (+8/-0)
|
|
ReplyQuote
|
|
Re: Customize your Moderation Options dropbox
topic_list_moderate_delete
--><option class="nukenukenuke" value="nukenukenuke">Delete</option>
<option class="enoughofthat" value="enoughofthat">Close</option><!--
You have put two classes in this one, and then a new class in the unhide box.(last one)
This is not necessary as far as I can see, and it is much easier keeping the right classes in the right boxes
And there is no use for the last dashed line either 
---
~ Quickly, I must hurry, for there go my people and I am their leader ~
|
|
6/8/2006, 7:44 pm
|
Link to this post
PM The Mooseman
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Customize your Moderation Options dropbox
There are two classes in that box because there are two options, and every option has its own class so each option can be styled differently. If someone wants all of the options to look the same, then there is no need for this hack, and everything can be handled with pure CSS.
I put that last option in there, in case having an </option> without an <option> messes up on some browsers. I recall someone having issues with drop boxes on her PDA, so I wanted to have the code as solid as possible. With that, it was either a blank option or a dashed line, and I chose the dashed line to match the other dashed line. People can try leaving out the last <option> and see if they have any problems with it. Since only admins and mods will see it, it shouldn't be too hard to get feedback.
|
|
6/9/2006, 3:21 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
The Mooseman
Citizen
Registered: 03-2005
Province: Looking for my brain...
Posts: 592
Karma: 8 (+8/-0)
|
|
ReplyQuote
|
|
Re: Customize your Moderation Options dropbox
Basics of my CSS :
option.term{display:block;margin-left:27px;height:25px;background:url('http://www.addis-welt.de/smilie/smilie/kampf/sterben095.gif');background-repeat: no-repeat;}
---
~ Quickly, I must hurry, for there go my people and I am their leader ~
|
|
6/9/2006, 5:49 am
|
Link to this post
PM The Mooseman
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Customize your Moderation Options dropbox
Those are cute, Moose. 
I don't see a need for the display:block, and you should be able to center the background image without having to add margin...
option.term{height:25px;background:url('http://www.addis-welt.de/smilie/smilie/kampf/sterben095.gif') center no-repeat;}
|
|
6/10/2006, 9:49 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
The Mooseman
Citizen
Registered: 03-2005
Province: Looking for my brain...
Posts: 592
Karma: 8 (+8/-0)
|
|
ReplyQuote
|
|
Re: Customize your Moderation Options dropbox
I did it without display:block first, but then it wouldnt show up right :lol
---
~ Quickly, I must hurry, for there go my people and I am their leader ~
|
|
6/12/2006, 5:52 am
|
Link to this post
PM The Mooseman
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Customize your Moderation Options dropbox
CSS can be a bit fussy at times, lol. I'm glad you got it to work.
|
|
6/13/2006, 11:33 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
