Shout-Maru Themes

So, you think the default format for your shoutbox is a bit bland. You wish this service looked nice like those others. Well, here's the deal: you can make it look (almost) anyway you want! Shout-Marus are designed to be CSS-friendly so it's a matter of brushing up on CSS, which you should do anyway, and going nuts with it.

The key is to use wrap your shoutbox call in a <div> with an id, then use CSS selectors in your stylesheet to selectively format them. It's that easy! Even an 5 year old can do it![1]

[1] All years given in dog years.

Available themes

What, you're not 5 years old yet? OK, well there are some pre-built themes that you can use without mucking with CSS. They are listed below and were inspired by things around my house. What you can do is add another line of HTML to your web page to use them, as indicated below. Note that the themes provided here require you to wrap your shoutbox call in <div id="shoutmaru"> and </div> and that you are using the default template so if you are having trouble, check that you are meeting both those requirements.

Note: the view css links may launch another application, display blankness, or otherwise not display when using an irritating browser.

Akwa	Preview	view css
Black	Preview	view css
browntones	Preview	view css
CivilWar	Preview	view css
GunslingerGirl	Preview	view css
LightGray	Preview	view css
Metamucil	Preview	view css
sxo	Preview	view css
Win3.1	Preview	view css

Theme Tester

Submitting Themes

If you've created your own theme and think others might like to use it, let me know and I can include it here. Of course, the theme doesn't have to reside on this server for it to work: just change the "href" part of the stylesheet reference to point to wherever you put yours. But you knew that.

Here's a reference on how to target specific parts of the default shoutbox:

To style this:	Use this selector
Title bar	`#shoutmaru h1`
Message block	`#shoutmaru p`
Message author	`#shoutmaru strong`
Message date	`#shoutmaru small`
Links	`#shoutmaru a`
Alternating message blocks	`#shoutmaru .odd` and `#shoutmaru .even`
Form headings ("Name", "URL", "Message")	`#shoutmaru th`
Form inputs cells	`#shoutmaru td`
Form input widgets	`#shoutmaru td input`
Form button cell	`#shoutmaru th span`
Form buttons	`#shoutmaru th span input`

Some guidelines follow. Please peruse the theme css files above for examples and use as templates.

Your theme can assume that the shoutbox will be in a <div id="shoutmaru">; consequently, all selectors in your stylesheet should be prefaced with #shoutmaru.
You should provide styling for #shoutmaru h1, which is a title bar for the shoutbox, although this may not be present.
You should provide overflow:auto for the div to prevent posts with long unbroken words from wreaking havoc with the layout.
Your theme should not make any assumptions about inherited colors and backgrounds; please specify explicitly.
You should not specify a width for the div or any child elements; this is up to the user to specify and should not be hardcoded by a theme. Conversely, your theme should work reasonably with various width divs. Please test on something other than one fixed size.
When possible, please test your theme in multiple browsers (ie something other than Internet Explorer). I'll reject any theme that only works in IE and then laugh at you. Ideally, test in IE, Mozilla/Gecko, and Safari.

Discuss Themes

You can discuss themes here: ask question, share your themes, etc.