Runboard.com
You're welcome.



       Use the black navigation bar to log in or create your account.

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
posticon 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.

Image
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


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
6/8/2006, 8:05 am Link to this post PM Lesigner Girl Read Blog
 
The Mooseman Profile
Live feed
Blog
Friends
Miscellaneous info

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 emoticon
And there is no use for the last dashed line either emoticon

---
~ 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 Profile
Live feed
Blog
Friends
Miscellaneous info

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. emoticon

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. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
6/9/2006, 3:21 am Link to this post PM Lesigner Girl Read Blog
 
The Mooseman Profile
Live feed
Blog
Friends
Miscellaneous info

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;}

Image

---
~ 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 Profile
Live feed
Blog
Friends
Miscellaneous info

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. emoticon

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;}

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
6/10/2006, 9:49 pm Link to this post PM Lesigner Girl Read Blog
 
The Mooseman Profile
Live feed
Blog
Friends
Miscellaneous info

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 Profile
Live feed
Blog
Friends
Miscellaneous info

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.&nbsp; I'm glad you got it to work. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
6/13/2006, 11:33 pm Link to this post PM Lesigner Girl Read Blog
 


Add to this discussion




You are not logged in (login)
Back To Top

This board's time is GMT.

Board's time is GMT