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

Copy & paste the contents of the following into the <head> section of your web page to use the active theme (highlighted in yellow above). This should be one long line, unbroken.

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.

Discuss Themes

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

Shout-Maru Themes