Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Site Logo Image re-size Details »
Site Logo Image re-size
Mod Version: 1.00, by Spangle (Member) Spangle is offline
Developer Last Online: Mar 2015 I like it Show Printable Version Email this Page

vB Version: 5.0.1 Rating: (0 vote - 0 average) Installs: 5
Released: 18 Dec 2013 Last Update: Never Downloads: 5
Not Supported Template Edits Code Changes Re-usable Code Translations  

The default width for the logo image in VB5 is only 320px, which may suit the VB logo itself, but doesn't help those wanting a bigger logo, the easiest and best way to do this is by altering the css, doing it this way means you don't mess up the rest of the header area.

You only need to complete two edits to one file.

Go to :
AdminCP>Styles and Templates>Style Manager

From the drop down menu select :

Edit Templates>CSS Templates> css_global.css

Find :


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

Alter the max-width to the desired width in pixels, up to 720px works fine.

Find : (it should be directly underneath, the above)


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

Once again edit the part in red to the same figure as the first.

One point to remember is that with the height and width set to "auto" the CSS will make you image "fit" the maximum width set.

Therefore if you plan to use a larger logo, it is best to design the logo to your maximum width, if you use a smaller image, it will appear pixelated when enlarged by the CSS.

Download Now

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

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Comments
  #2  
Old 18 Dec 2013, 14:43
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Jul 2009
Real name: Chris
Why don't you just add that to additional.css that wat it is safe from upgrades, when you have go revert the templates?
__________________
You can get access to my 180 mods for vB 3.6 - 4.x at The Admin Zone as well as the professional support you are used to. New vBulletin Spider Definitions, vBulletin Spiders List Hits 1000 Spiders! ​ OzzModz down. Site has had a data breach, checking how the intrusion happened. Change your PW if you use the same one on my site and others.
Reply With Quote
  #3  
Old 18 Dec 2013, 16:19
Spangle Spangle is offline
 
Join Date: Jun 2011
I tried the lower of the two on it's own through the additonal_css but it didn't work, so I went into css_global_css and found the two instances, didn't think to try adding them both to additional and trying it again !
Reply With Quote
  #4  
Old 31 May 2014, 04:23
BWalter74 BWalter74 is offline
 
Join Date: May 2014
How do I get rid of the search bar next to the logo?



I would like the banner to be the whole width
Reply With Quote
  #5  
Old 31 May 2014, 08:23
K4GAP K4GAP is offline
 
Join Date: Mar 2008
Originally Posted by BWalter74 View Post
How do I get rid of the search bar next to the logo?



I would like the banner to be the whole width
Start your own thread and I guarantee you will get better results. Not only that but it's protocol here.
__________________

Reply With Quote
  #6  
Old 31 May 2014, 14:04
BWalter74 BWalter74 is offline
 
Join Date: May 2014
Thank you, I will
Reply With Quote
  #7  
Old 01 Jun 2014, 17:18
Spangle Spangle is offline
 
Join Date: Jun 2011
Originally Posted by BWalter74 View Post
Thank you, I will
Theres a fix on VB.com in the tutorials it moves the search bar to the Nav bar

but here it is any way :


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

If you want to reduce the size of the visible text entry box use this :


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

Hope this helps, thanks go to Wayne
Reply With Quote
  #8  
Old 01 Jun 2014, 17:24
Spangle Spangle is offline
 
Join Date: Jun 2011
Originally Posted by BWalter74 View Post
How do I get rid of the search bar next to the logo?



I would like the banner to be the whole width
The banner and the site logo are two separate images, you can load the banner via the header stylevar in edit templates.

The site logo is added through site builder.
Reply With Quote
  #9  
Old 09 Nov 2014, 14:36
posontyclanole posontyclanole is offline
 
Join Date: Sep 2014
If I put the big logo will be expected to be misconfigured on mobile devices (phones, tablets, etc.)?
Reply With Quote
  #10  
Old 19 Feb 2017, 05:49
meissenation meissenation is offline
 
Join Date: Apr 2005
Originally Posted by Spangle View Post
Theres a fix on VB.com in the tutorials it moves the search bar to the Nav bar

but here it is any way :


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

If you want to reduce the size of the visible text entry box use this :


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

Hope this helps, thanks go to Wayne
thanks for sharing, worked perfectly on 5.2.6
Reply With Quote
  #11  
Old 07 Apr 2018, 04:19
willie53's Avatar
willie53 willie53 is offline
 
Join Date: Nov 2016
This could be done using a product so would be carried over to all installed styles this is a quick one i created it lets you use the full width of the header upto 1600x200 px it also moves the search box down to the tabbar.
It has been tested on Vb5.2.6 upto Vb5.4.1
Attached Files
File Type: zip product_fullwidthlogo.zip (985 Bytes, 8 views)
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

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 16:26.

Layout Options | Width: Wide Color: