Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Fluid 3 part header Details »»
Fluid 3 part header
Version: 1.01, by Beermonster Beermonster is offline
Developer Last Online: Sep 2023 Show Printable Version Email this Page

Category: Forum Display Enhancements - Version: 4.0.0 Rating:
Released: 11-17-2009 Last Update: Never Installs: 68
Supported Template Edits
 

Not a difficult thing to do but I thought I would post it any way as some people seem to having trouble with getting their header image to have an align image right as you can't do it in stylevar.

This is fluid all you need to do is make 3 images, I named mine left, right and background (See attachment), you can be more creative


In your header template find
Code:
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
Replace with
Code:
<div id="headerFill"><div id="headerL"></div><div id="headerR"></div></div>
Add to vbulletin.css template
Code:
#headerFill{
background-image: url(images/headerFill.jpg);
background-repeat: repeat-x;
height: 119px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
background-image: url(images/headerL.jpg);
height: 119px;
background-repeat: no-repeat;
width: 348px;
float: left;

}
#headerR {
background-image: url(images/headerR.jpg);
background-repeat: no-repeat;
height: 119px;
width: 332px;
float: right;

}
Change sizes and paths in red to suit your own

Thanks to hoof for the CSS update.

Mark as installed for support

Screenshots

File Type: jpg pics_1.jpg (39.2 KB, 0 views)
File Type: jpg pic_2.jpg (50.9 KB, 0 views)
File Type: jpg sample.jpg (18.0 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Благодарность от:
eTiKeT?

Comments
  #82  
Old 11-11-2010, 02:10 PM
abdyel26 abdyel26 is offline
 
Join Date: Jul 2009
Posts: 16
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

[COLOR="Blue"]Sorry to be a complete noob but i cant find vbulletin.css to add the above txt ?

I done everything else but after 2 hrs scratching around the admin cp cant find it ?
been in style manager edit templates

Style & templates/style manager/ edit template/ scroll down css templates/scroll down again vbulletin.css
Reply With Quote
  #83  
Old 11-11-2010, 03:21 PM
Baf_Jams Baf_Jams is offline
 
Join Date: Mar 2008
Location: Derby UK
Posts: 106
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by abdyel26 View Post
[COLOR="Blue"]Sorry to be a complete noob but i cant find vbulletin.css to add the above txt ?

I done everything else but after 2 hrs scratching around the admin cp cant find it ?
been in style manager edit templates


Style & templates/style manager/ edit template/ scroll down css templates/scroll down again vbulletin.css
Cheers m8y
Reply With Quote
  #84  
Old 04-06-2011, 12:19 AM
Charlie98902 Charlie98902 is offline
 
Join Date: Dec 2006
Posts: 1,156
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Anyone that upgraded to 4.1.3 you need to remove the last div on that line of code. If there is a small white line on the middle to the top left then scroll down in the header template and remove the hr code line.
Reply With Quote
  #85  
Old 05-18-2011, 10:12 AM
crazymilk's Avatar
crazymilk crazymilk is offline
 
Join Date: Aug 2008
Posts: 110
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I have looked in the vbulletin.css thats fine but which header template do I change the code in? Can someone help thanks in advance
Reply With Quote
  #86  
Old 07-02-2011, 04:26 PM
Bandit8007 Bandit8007 is offline
 
Join Date: Jan 2006
Posts: 45
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

how to use repeat -x on the >>
Code:
<a href="index.php"><img src="images/andromeda/misc/logo.gif" alt= "Free PSP ISO Downloads" width="54%" height="100" border="0"/></a>
on my own image then ....

gracias

Fixed!
Reply With Quote
  #87  
Old 07-11-2011, 12:54 AM
setishock setishock is offline
 
Join Date: Feb 2008
Location: Houma, La.
Posts: 1,177
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Problem with a floating header is making it look like the filler is a part of the total overall header. Not just something tossed in to fill in the blank spot.
It's time consuming and a pain in the gazootenblatz. But if you take the time to do it right, it's beautiful. If you just toss something up there, it looks like you just tossed something up there.
The nuts and bolts of the code to make this work, while pretty cool, is just the begining. How you work the images and the filler, that's the magic...

Take your time. Get creative.
Reply With Quote
  #88  
Old 09-17-2012, 05:50 AM
znightmare znightmare is offline
 
Join Date: Aug 2012
Posts: 20
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Is there a way to do this so the logout, notifications, settings, and profile links stay under the banner instead of going inside the top part of the banner?
Reply With Quote
  #89  
Old 09-20-2012, 01:42 PM
dougdirac's Avatar
dougdirac dougdirac is offline
 
Join Date: Nov 2011
Posts: 208
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

How do you make the left image a link?
Reply With Quote
  #90  
Old 11-13-2013, 05:34 AM
K4GAP K4GAP is offline
 
Join Date: Mar 2008
Posts: 1,255
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I have used this on a couple of different sites I have built and or maintain.

For anyone that has that old vb looking header, they definitely need to check this out.
Reply With Quote
  #91  
Old 11-13-2013, 10:20 AM
john7911 john7911 is offline
 
Join Date: Feb 2013
Posts: 258
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you
Reply With Quote
Reply


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


All times are GMT. The time now is 12:20 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05373 seconds
  • Memory Usage 2,328KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (4)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (11)post_thanks_box
  • (1)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (3)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete