2008-04-10, 08:25 PM
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:
2nd Step
Go to your Admin template manager and edit forumbit_depth2_forum:
Find:
Replace with:
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 is no more <img> requests with this Code if our Forum Index have a lot of Forums listed
PS:
As my board is guest-disabled and bots are blocked from robots.txt this is very usefull to lower CPU/Server usage
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:
/* 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:
<img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" />
Replace with:
<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 is no more <img> requests with this Code if our Forum Index have a lot of Forums listed
PS:
Ziyphr Wrote:With regards to SEO with this approach there is a danger Google will think you are trying to inject hidden keywords into the page, as from an automated perspective it would be impossible to differentiate between the two. Using span tags to hide text is a very effective way to add invisible keywords.
As my board is guest-disabled and bots are blocked from robots.txt this is very usefull to lower CPU/Server usage