Written by Daniel Mundy | 12 November 2008

 

Put the following code in /templates/templatename/css/template_css.css

pre.code {

        margin: 10px;

        padding: 6px;

        border: 1px inset;

        width: 600px;

        height: 338px;

        text-align: left;

        overflow: auto;

        white-space:nowrap

}



pre.shortcode {

        margin: 10px;

        padding: 6px;

        border: 1px inset;

        width: 600px;

        text-align: left;

        overflow: auto;

        white-space:nowrap

}

Then in your article, just wrap the code like this:

<pre class="code">
example
</pre>

If you only have a few short lines of code and don't want the code box expanded to take up the whole page, use the "shortcode" class. The box just above this paragraph shows what it looks like.

Old method:

Use the following CSS to create a custom style for code snippits:

.code { /* use p class=code when you want to fake it, sometimes handy */
    background: #f2f2f2 url('../images/utilities-terminal.png') 10px 5px no-repeat;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    margin: 5px auto;
    padding: 20px 20px 20px 70px;
    text-align: left;
    font: 1.1em 'Courier New', Courier, Fixed;
}

Note: You'll also need to upload the image file to your templates directory, eg:

~/public_html/joomla/templates/rhuk_milkyway/images