Board Optimization - Put Your Logo on CSS [vBulletin]

Info:
Put your vBulletin logo on CSS, this can optimize your pages load time.

Live Demo

Installation:

1- Add the code below in the additional.css template

#vbulletin_logo {
background-image: url(http://www.YOURWEBSITE.com/images/logo.png); 
display:block;
background-repeat: no-repeat; 
text-indent:-9999px;
height:73px;
width:183px;
position:relative;
left:5px;
top:22px;
}

Red: You will need to change it with your own logo url and other options ...




2- Find and replace the code below in the header template:

<a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a>

With:

<a href="{vb:link forumhome}{vb:raw session.sessionurl_q}" title="YOUR TITLE" id="vbulletin_logo">YOUR WEBSITE NAME</a>

use following code, if you are using the vbulletin suite version.

<a href="{vb:raw vboptions.homeurl}{vb:raw session.sessionurl_q}" title="YOUR TITLE" id="vbulletin_logo">YOUR WEBSITE NAME</a>

Note: it works fine with any version of vBulletin.

[TheGrimReaper2]

One of my users is reporting that they only see a link on the browser they are using (chrome) but It works for me (Opera). Any ideas?

It shows up as a link for me on some pages as well for some reason.

[raulin]

Thanks

[Hdeaf.com]

<font color="DarkOrange">Thanks .....</font>

[doctorsexy]

Works...thanks

[fxwoody]

Good one Logect! Cut my loading time from 10.76 seconds to 6.7 seconds!

Cudo my friend

[reddyink]

one problem with this is that if you have a forum http://localhost/yoursuite/ and after doing the changes as mentioned here, clicking on log will direct you to localhost instead of correct location of install (localhost/yoursuite)

[Akangage]

Wow.... great i change lil' bit to mine in order to avoid disorder of style template, like this one

#vbulletin_logo {
background-image: url(http://localhost/****/****/****/logo.png);
background-repeat: no-repeat;
height: 100px;
width: 270px;
position:relative;
float: left;
left: 15;
top: 30px;
}

[maxie]

nice code but my header is modefied with some code, i cant use this css, so sad

[HMBeaty]

Just a suggestion....

Instead of this:

Originally Posted by tarzan22

With:

<a href="{vb:link forumhome}{vb:raw session.sessionurl_q}" title="YOUR TITLE" id="vbulletin_logo">YOUR WEBSITE NAME</a>

use following code, if you are using the vbulletin suite version.

<a href="{vb:raw vboptions.homeurl}{vb:raw session.sessionurl_q}" title="YOUR TITLE" id="vbulletin_logo">YOUR WEBSITE NAME</a>

Use this:

<vb:if condition="$vb_suite_installed">
    <a href="{vb:raw vboptions.homeurl}{vb:raw session.sessionurl_q}" title="YOUR TITLE" id="vbulletin_logo">{vb:raw vboptions.bbtitle}</a>
<vb:else />
    <a href="{vb:link forumhome}{vb:raw session.sessionurl_q}" title="YOUR TITLE" id="vbulletin_logo">{vb:raw vboptions.bbtitle}</a>
</vb:if>

[OldSchoolDSL]

I used the above suggestion, but changed the code from the author to this

PHP Code:

#vbulletin_logo {
background-image: url(http://www.YOURWEBSITE.com/images/logo.png); 
display:block;
background-repeat: no-repeat; 
text-indent:-9999px;;
position:relative;
min-height:65px;
} 


The mid-height values and site values you can change as needed.