[Tip] ON/OFF status image with CSS Text Replacement

[aglioeolio]

I was searching google for some tips to lower my CPU usage with mybb and found this.

http://wellstyled.com/css-replace-text-by-image.html
http://wellstyled.com/files/css-replace-...ple03.html

Ho to Do it:

1st Step
create 3 new styles in your CSS theme:

Code:

/* trocando txt por imagem */
#on {
    margin:0; padding:0;
    }

#on a {
    display:block;
    width:100px; height:100px;
    margin:0; padding:0;
    background: url("images/pesbrasil/on.gif") top left no-repeat;
    text-decoration: none;
    }
#on a:hover {
    background-image: url("images/pesbrasil/on2.gif");
    }
#on a span { display:none }
/* new messages? */
#off {
    margin:0; padding:0;
    }

#off a {
    display:block;
    width:100px; height:100px;
    margin:0; padding:0;
    background: url("images/pesbrasil/off.gif") top left no-repeat;
    text-decoration: none;
    }
#off a:hover {
    background-image: url("images/pesbrasil/off2.gif");
    }
#off a span { display:none }

#offlock {
    margin:0; padding:0;
    }

#offlock a, #offlock a:hover  {
    display:block;
    width:100px; height:100px;
    margin:0; padding:0;
    background: url("images/pesbrasil/offlock.gif") top left no-repeat;
    text-decoration: none;
    }
#offlock a span { display:none }

2nd Step

Go to your Admin template manager and edit forumbit_depth2_forum:

Find:

Code:

<img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" />

Replace with:

Code:

<h2 id="{$lightbulb['folder']}"><a href="forumdisplay.php?fid={$forum['fid']}" rel="nofollow"><span>status</span></a></h2>

Notes:
1) replace backg.image folder "/pesbrasil/" with your theme name
2) create file off2.gif if you want rollover effect
3) change "width:100px; height:100px;" to your image dimensions
4) rel="nofollow" is optional, I added because there are 3 links in my template to the same place


Now there are no more <img> requests with this Code if our Forum Index have a lot of Forums listed