then the answer to it is just to have this in my CSS:

pre {
        padding: 10px 15px;
        margin: 5px 0 15px;
        border-left: 5px solid #666666;
        background: #222222;
        font: 1em/1.5 "Courier News", monospace;
        color: #bbbbbb;
        overflow : auto;
}

and later I would just wrap whatever text I want to be in the box with the pre tag in my HTML codes, like this;

<pre>
This is a code example
</pre>

and should get this output (including the dashed-box):

This is a code example

and that's all. It's just so easy..

Installing it in Joomla is very straightforward, while it’s not really the case with WordPress, as it requires a little bit of coding.

The application can be downloaded from Hivemind’s website (requires free registration)  and it can then be installed as any other WordPress plugin. The shoutbox however doesn’t immediately show up in the page, and there’s no option in the admin console for that.

To add it to the page we must add some codes, and in our case, to the sidebar’s code. Edit it from the admin panel;

Presentation -> Theme Editor -> sidebar.php

or can be edited with any editor;

/path/to/current/template/sidebar.php

This is an example of a very simple WordPress template with widget support;

The sidebar uses <ul> for its items, and so we need to add <li> element to add our shoutbox (and probably any other static stuff) to it. We also need to add a header (<h2> probably) for the item’s title, and add the shoutbox’s code to it. The final sidebar should look something like this;

Shoutbox



        
                



        

              Name

              URL or Email

              Message



            

This might not exactly be the case with every template, but the idea is about the same. Happy blogging!