CSS for code block

shakir    Information Insemination     html

If you're wondering how do I actually get the nicely boxed code block in my blog as this;

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 Smiletag Shoutbox in Wordpress

shakir    Information Insemination     blog, html, script, wordpress

Smiletag Shoutbox is the shoutbox that I have on my website’s sidebar. I’ve been using it since I was using Joomla for my website, and now that I moved to Wordpress, Smiletag is still my shoutbox of choice.

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!