Put Your Logo on CSS [vBulletin]

[LOGECT]

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

Live Demo (http://www.logect.com/)

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 ...

https://vborg.vbsupport.ru/attachment.php?attachmentid=127723&stc=1&d=1301246071


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.

[tarzan22]

Thanks, but when you click on the logo redirects to:

http://www.foroxxx.com/www.foroxxxx.com

Greetings

[LOGECT]

Thanks, but when you click on the logo redirects to:

http://www.foroxxx.com/www.foroxxxx.com

Greetings

Please change the url to:


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

The following url will only works with vbulletin suite.
href="{vb:raw vboptions.homeurl}{vb:raw session.sessionurl_q}"

[tarzan22]

I have not the vbulletin suite, only the forums

thanks

http://www.foroxd.com/

[LOGECT]

I have not the vbulletin suite, only the forums

thanks

http://www.foroxd.com/

Please use the following code:


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

[tarzan22]

Perfect, thank you very much.

greetings

[mfnforex]

Thank you

[BadgerDog]

Hello LOGECT .. :)

Good idea to help performance ...

Installed for testing on 4.04 of vBulletin SUITE with thanks ... :up:

Trying to get it going, but seem to be missing something and would appreciate any help ...

I think I must have some measurements wrongs someplace and I'm not sure how to figure it out.

I installed your change on our "Light" style and left the "Brown" style for comparison, which is what it should look like. Notice from pics that on the "Light" style, our top navbar flows down into our regular black smaller navbar?

Logo measures at 498 wide by 120 high and according to element check...

position:relative;
left:0px;
top:0px;

... but, seems to screw up cosmetically and move the navbar?

Thanks ...

Regards,
Doug

[LOGECT]

Hello LOGECT .. :)

Good idea to help performance ...

Installed for testing on 4.04 of vBulletin SUITE with thanks ... :up:

Trying to get it going, but seem to be missing something and would appreciate any help ...

I think I must have some measurements wrongs someplace and I'm not sure how to figure it out.

I installed your change on our "Light" style and left the "Brown" style for comparison, which is what it should look like. Notice from pics that on the "Light" style, our top navbar flows down into our regular black smaller navbar?

Logo measures at 498 wide by 120 high and according to element check...

position:relative;
left:0px;
top:0px;

... but, seems to screw up cosmetically and move the navbar?

Thanks ...

Regards,
Doug

Hello

the reason could be either your costume 'Header template' or incorrect values for 'width' and 'height'

[BadgerDog]

Hello

the reason could be either your costume 'Header template' or incorrect values for 'width' and 'height'

So, even though the 498x120 is the correct size of our logo banner, you're saying to fake it out and modify the settings (height I assume) until the navbar moves back into alignment?

Thanks for the feedback .. :)

Regards,
Doug

[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:
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


#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.

[hgleigh]

Hi, I am a newbie at CSS code let alone the whole forum idea! I read a forum post on how good and easy vBulletin is so I purchased it and yes I do find it pretty self explaining though I am stuck and have been for 2 days now. I have vBulletin 4.2.0 suite and have succesfully installed it and wanted to add my own logo. Found this post and have completed the code change and it works fine my only question is how do I get it to center on my page? I can increase the px from the left but it does not load evenly on other devices or screen sizes. Many thanks for any help.

Leigh

[Arrogant-One]

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

Cudo my friend ;)

How do you measure this?

I just installed this mod and the load times seem only slightly better.