FOLLOW USJoomlashack FacebookJoomlashack TwitterJoomlashack Google +Joomlashack RSS

Joomlashack logo blog
Published on 18 May 2007

CSS extras for your Joomla! template

I stumbled upon this nice looking bit of css and thought I'd share. See the examples below. This is very easy to add these to a Joomla! template.
(Note: You may need to Shift+Refresh as the stylesheet may be cached.)

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

First, just add this code to the bottom of your template_css.css file.

p.warn {
    background: #FBEEF1 url(../images/warn.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #FEABB9;
    border-bottom: 2px solid #FEABB9;
}

p.alert {
    background: #FFF7C0 url(../images/exc.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #F7D229;
    border-bottom: 2px solid #F7D229;
}

p.info {
    background: #F8FAFC url(../images/info.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #B5D4FE;
    border-bottom: 2px solid #B5D4FE;
}

Then just copy the images below to your images directory and add the paragraph code below to see it.

<p class="alert">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

<p class="info">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

<p class="warn">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

Here are the images:
image
image
image

Icons credit: Silk
CSS credit: Bioneural

published in Joomla CSS

RECENT POSTS