Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Align Logo with Header Advert 2 (No Drop) Details »»
Align Logo with Header Advert 2 (No Drop)
Mod Version: 1.00, by syrus.xl (Coder/Designer) syrus.xl is offline
Developer Last Online: Nov 2014 I like it Show Printable Version Email this Page

vB Version: 4.0.0 Rating: (6 votes - 4.67 average) Installs: 48
Released: 06 Jan 2010 Last Update: 06 Jan 2010 Downloads: 234
Supported Template Edits Code Changes  

I originally coded this for my vBulletin 4.0, but so many people have been asking on vBulletin.com how to do this - so I thought I would release it on here, as well.

What it does:

By default if you add any advertisement to the header, you will find that your header logo is 'pushed' upwards. Many people prefer that logo is aligned with the advert and not placed above. ** See attached screenshot **

DEMO:
http://www.digitalport.co.uk
I have coded this little modification so that if you place an advert in ad area 2 of the header it will appear next to your logo, and will not affect your logo's position whatsoever. It is coded to accept a standard banner size of 468x60 in the header ad 2 section. You can adjust this to suit other banner sizes as required.

In the #logo_main adjust the width and height values to suit your own logo. The margin-top value adjusts the distance between the top of your logo and the top of the toplinks. margin-left I have set to 20px, but you can adjust this to suit where you want the logo to be from the left side.

The best way is to adjust the values gradually if you are not sure about CSS coding.

Installation:

In the vbulletin.css template find:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Add after:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


In the header template find and remove:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


In the header template find and remove:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Replace with this code:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Important:

One additional StyleVar you will need to change is the doc_minWidth to around 800px or more depending on your layout width. This will stop the advert div from dropping below your logo in the header, if someone is using a low resolution to view your website.

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	Capture6.JPG
Views:	3608
Size:	73.5 KB
ID:	109285

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Comments
  #2  
Old 06 Jan 2010, 12:24
forumtester forumtester is offline
 
Join Date: Nov 2009
Where do you find the
#logo_main
Reply With Quote
  #3  
Old 06 Jan 2010, 12:26
forumtester forumtester is offline
 
Join Date: Nov 2009
Sorry, stupid question
Reply With Quote
  #4  
Old 06 Jan 2010, 12:36
Alecsmith's Avatar
Alecsmith Alecsmith is offline
 
Join Date: Sep 2009
Real name: Nick
Header banner is not align it moved to right hand site.
Reply With Quote
  #5  
Old 06 Jan 2010, 13:07
syrus.xl's Avatar
syrus.xl syrus.xl is offline
 
Join Date: Jun 2005
Originally Posted by Alecsmith View Post
Header banner is not align it moved to right hand site.
The ad banner should be right aligned, it is set by the CSS float:right parameter. It should have a 20px margin as well, which can be changed to suit your forum/cms header.
Reply With Quote
  #6  
Old 06 Jan 2010, 13:07
forumtester forumtester is offline
 
Join Date: Nov 2009
Brilliant Mod.

Just one thing. The mod makes the header taller. I have tried changing the header wrapper height value from 140 to 80, but the header stays at around 100. Any idea's?

Also it doesn't work in the CMS

Found the 100 value (98) it was the logo value.

Last edited by forumtester : 06 Jan 2010 at 13:49.
Reply With Quote
  #7  
Old 06 Jan 2010, 13:49
syrus.xl's Avatar
syrus.xl syrus.xl is offline
 
Join Date: Jun 2005
Originally Posted by forumtester View Post
Brilliant Mod.

Just one thing. The mod makes the header taller. I have tried changing the header wrapper height value from 140 to 80, but the header stays at around 100. Any idea's?
The height is dependent on a few parameters set in the CSS.

#banner_ad_top has a margin-top of 50px - You can reduce this as required.
The same applies to the
#logo_main which has a margin-top of 20px - again adjust as necessary.

Also it doesn't work in the CMS
This will work in the CMS, but because of a current bug in vB4.0 Gold it will only work if this modification is done on the default template. Hopefully, when the next release is ready, this will be fixed.
Reply With Quote
  #8  
Old 06 Jan 2010, 13:59
forumtester forumtester is offline
 
Join Date: Nov 2009
Found my height issue, it was this variable

#logo_main {
float:left;
display:inline-block;
width:274px;
height:98px;
margin-top:20px;
margin-left:20px;
position:relative;

Still can't get it to work in the CMS and the mod is done on the default style.
Reply With Quote
  #9  
Old 06 Jan 2010, 21:50
forumtester forumtester is offline
 
Join Date: Nov 2009
Sorted it.
You have to hover over the section title in the CMS, then click the pencil icon.
Then set the "Style" to Inherit.

Superb Mod
Reply With Quote
  #10  
Old 06 Jan 2010, 22:35
forumtester forumtester is offline
 
Join Date: Nov 2009
Header banner is not align it moved to right hand site.
I think I know what he means.
In IE7, the banner slides off the edge of the forum on the rhs. It site halfway on and halfway off the forum.

It doesn't do it in IE8.
Reply With Quote
  #11  
Old 06 Jan 2010, 23:39
slackin-jer slackin-jer is offline
 
Join Date: Feb 2009
How did you integrate that shopping cart into your header?
Reply With Quote
  #12  
Old 07 Jan 2010, 07:07
tafreeh's Avatar
tafreeh tafreeh is offline
 
Join Date: May 2008
Location: Canada
Real name: DON
nice mod... got quick question..
after editing those temp.. we would be able to select the logo and condition via admin cp riht?
__________________
Vb Forum
Reply With Quote
  #13  
Old 07 Jan 2010, 09:34
Dr.osamA's Avatar
Dr.osamA Dr.osamA is offline
 
Join Date: Aug 2004
Location: Syrie
Real name: Dr.osama
try it
Thanxx

brb
________
Black Xxx

Last edited by Dr.osamA : 04 Apr 2011 at 01:50.
Reply With Quote
  #14  
Old 08 Jan 2010, 10:58
syrus.xl's Avatar
syrus.xl syrus.xl is offline
 
Join Date: Jun 2005
Originally Posted by tafreeh View Post
nice mod... got quick question..
after editing those temp.. we would be able to select the logo and condition via admin cp riht?
It is coded to use the default logo and the default header ad position 2 which is the right side. So, everything will still function from the AdminCP.
Reply With Quote
  #15  
Old 08 Jan 2010, 13:11
bandare bandare is offline
 
Join Date: Nov 2004
Where did you get that bottom widget type thing that includes twitter/facebook etc?
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 20:50.

Layout Options | Width: Wide Color: