MyBB Community Forums

Full Version: [Tip] New/Old status icons with Text Replacement (CSS and not IMG Tag)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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:

/* 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 Big Grin


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
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. I'm not sure how they currently treat this method and whether they can be detected or not, but long term they will be cracking down on added keywords more and more so for me this is not worth the risk.

From a CPU usage point of view, it would be interesting to compare stats, if there are any.
it saves me a lot of http requests
Im using MediaTemple gridserver and GPU usage its lower using this

My Forum is not indexed by bots nowadays because I disabled it in robots.txt
but Thanks for this tip, I´ll add to 1st post
Hımm very nice..Thank you.
That's pretty cool!

I just use a basic tweak with the code of my skins though, which shows an online status icon. This is interesting though =)
~Kerrang!