vb.org Archive - Forum Display Enhancements

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Display Enhancements - Fluid 3 part header (https://vborg.vbsupport.ru/showthread.php?t=228319)

Fluid 3 part header

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

Tagged as this may allow me to use my jpg's I believe?

Yes sweet too as I didn;t need the left.jpg as in the code change the jpg to your name. :)

Thanks this is exactly what i needed. Marked Installed and rated Excellent

naaa aaaa aaa aaa aaa aaaiceee :) love you man

Why are you using the Table tag with vBulletin 4.0? This will break strict xHTML compliancy, which is what version 4 is all about.

It should be coded as a div layout, not a table layout.

good modification.thanks.

Maybe something im doing wrong here, but when i use this, the right image replaces the details in top right of forum

Quote:

Welcome, Magz. You have 0 unread messages; Total 22.
You last visited: Today at 20:11; You Have 4,062 Unread Posts

that bit gets hidden, any ideas?

Quote:

Originally Posted by Magz (Post 1917405)

Maybe something im doing wrong here, but when i use this, the right image replaces the details in top right of forum

that bit gets hidden, any ideas?

Are you using VB4?

Quote:

Originally Posted by syrus.xl (Post 1917062)

Why are you using the Table tag with vBulletin 4.0? This will break strict xHTML compliancy, which is what version 4 is all about.

It should be coded as a div layout, not a table layout.

completely agree :up:

Quote:

Originally Posted by Beermonster (Post 1917867)

Are you using VB4?

Sure am, updated test site today to Beta 4

Quote:

Originally Posted by syrus.xl (Post 1917062)

Why are you using the Table tag with vBulletin 4.0? This will break strict xHTML compliancy, which is what version 4 is all about.

It should be coded as a div layout, not a table layout.

Quote:

Originally Posted by Loco.M (Post 1917870)

completely agree :up:

Feel free to re do it this was only meant to be a quick fix for people

Quote:

Originally Posted by Magz (Post 1917875)

Sure am, updated test site today to Beta 4

Not sure then because I don't have the
Welcome, Magz. You have 0 unread messages; Total 22.
You last visited: Today at 20:11; You Have 4,062 Unread Posts

Quote:

Originally Posted by syrus.xl (Post 1917062)

Why are you using the Table tag with vBulletin 4.0? This will break strict xHTML compliancy, which is what version 4 is all about.

It should be coded as a div layout, not a table layout.

So how it would be done ?

Quote:

Originally Posted by Mastergumble (Post 1918079)

So how it would be done ?

Yes, inquiring minds want to know.. :)

I try to experience

Thank you
________
Gay Arab

Quote:

Originally Posted by Mastergumble (Post 1918079)

So how it would be done ?

There is 5 serious errors in that coding, certain tags not closed, a div tag used within an 'a' tag.

It should be strict xHTML to comply with vBulletin 4.0, otherwise you are just breaking the correct coding. Google would probably penalize you, if that was in every page of your site's header code.

If it was done correctly it would require CSS to be defined and use all div's, not tables. Probably about 4-5 CSS rules is all that it requires, nothing major.

Google doesn't penalise tables or reward tableless.

Google rewards content

Quote:

Originally Posted by syrus.xl (Post 1919767)

Syrus, Would you be able to do this for us in css? This is exacty what i'd like to use when we change over the main site to vb4..

To do this just add some lines to your CSS and then call it out in the template you want it to display.

Example: for a 3 part image in the CSS add

Code:

#headerFill{

background-image: url(your/path/to image/here.gif);

background-repeat: repeat-x;

height: 120px;

width: 100%;

margin-right: auto;

margin-left: auto;

}

#headerL{

background-image: url(your/path/to image/here.gif);

height: 120px;

background-repeat: no-repeat;

width: 468px;

float: left;

margin-left: -20px;

}

#headerR {

background-image: url(your/path/to image/here.gif);

background-repeat: no-repeat;

height: 120px;

width: 175px;

float: right;

margin-right: -20px;

}

You can name it however you like, I used headerFill, headerR, and headerL. Be sure to put the correct image height and width in. THe margin-right and left is to align the edges to your forum width...you may need to adjust it or remove it.

Then in your header template add the following:

Code:

<div id="headerFill"><div id="headerL"></div><div id="headerR"></div></div>

You should now have a fluid banner :)

@ Hoof, Thankyou for that, Much appreciated!

Quote:

Originally Posted by hoof (Post 1920797)

To do this just add some lines to your CSS and then call it out in the template you want it to display.
You should now have a fluid banner :)

sorry for the newb question but v4 has me bent over a barrel witch CSS and where?

Quote:

Originally Posted by hoof (Post 1920797)

To do this just add some lines to your CSS and then call it out in the template you want it to display.

Example: for a 3 part image in the CSS add

Code:

#headerFill{

background-image: url(your/path/to image/here.gif);

background-repeat: repeat-x;

height: 120px;

width: 100%;

margin-right: auto;

margin-left: auto;

}

#headerL{

background-image: url(your/path/to image/here.gif);

height: 120px;

background-repeat: no-repeat;

width: 468px;

float: left;

margin-left: -20px;

}

#headerR {

background-image: url(your/path/to image/here.gif);

background-repeat: no-repeat;

height: 120px;

width: 175px;

float: right;

margin-right: -20px;

}

Code:

<div id="headerFill"><div id="headerL"></div><div id="headerR"></div></div>

You should now have a fluid banner :)

vb4 no longer using CSS it uses StyleVars

Quote:

Originally Posted by simonhind (Post 1921600)

vb4 no longer using CSS it uses StyleVars

vB4 no longer uses the "Additional CSS Definitions" section, it does use several CSS's in your template list. I use this in the "vbulletin.css" and it works great.

Quote:

Originally Posted by hoof (Post 1921604)

vB4 no longer uses the "Additional CSS Definitions" section, it does use several CSS's in your template list. I use this in the "vbulletin.css" and it works great.

i have attached a screenshot of the admincp with main css showing
as you may be aware it mentions

"This CSS file is obsolete and is available here for reference purposes only."

Admin panel>> Styles and Templates>>>>>Edit Templates>>>>>>>vbulletin.css Go there I believe.

Quote:

Originally Posted by simonhind (Post 1921621)

i have attached a screenshot of the admincp with main css showing
as you may be aware it mentions

"This CSS file is obsolete and is available here for reference purposes only."

That's because you're looking at main.css not vbulletin.css.. i think.

Updated to Beta 5, and my header got jacked up.

Was working 100% before the upgrade.

Bugs: The floating image incorrectly ends, the words go off the right side of the window, and there are now two grey lines between the header and the nav bar. It does not matter the size of the window.

See attached image to see bugged header.

Here is my current (bugged) header template code:

Code:

<div class="above_body">

<div id="header" class="floatcontainer">

        {vb:raw ad_location.ad_header_logo}

        <table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/header/head.back.png">

  <tr>

    <td width="464" height="121" valign="top"><a href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q} ">

    <div><img src="images/header/head.left.png" border="0" /></div></td>

    <td width="22">&nbsp;</td>

    <td width="511" valign="top"><img src="images/header/head.right.png" align="right"></td>

  </tr>

</table>



        <div id="toplinks"  class="toplinks">

                <vb:if condition="$show['member']">

                        <ul class="isuser">

                                <li>{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>

                                <vb:if condition="$notifications_total">

                                <li class="popupmenu" id="notifications">

                                        <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>

                                        <ul class="popupbody popuphover">

                                                {vb:raw notifications_menubits}

                                        </ul>

                                </li>

                                <vb:else />

                                <li class="popupmenu" id="nonotifications">

                                        <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>

                                        <div class="popupbody popuphover">

                                                <p>{vb:rawphrase no_new_messages}</p>

                                                <p><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></p>

                                        </div>

                                </li>

                                </vb:if>

                                <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>

                                <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>

                                <vb:if condition="$show['registerbutton']">

                                <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>

                                </vb:if>                                

                                <li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>

                        </ul>

                        <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>

                <vb:else />

                        <ul class="nouser">

                        <vb:if condition="$show['registerbutton']">

                                <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>

                        </vb:if>                        

                                <li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>

                        </ul>

                        <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>

                        <form action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">

                                <fieldset id="logindetails">

                                        <div>

                                                <div>

                                        <input type="text" class="textbox default-value" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/>

                                        <input type="password" class="textbox default-value" name="vb_login_password" id="navbar_password" size="10" tabindex="102" onfocus="this.style.color='black';" />

                                        <input type="submit" class="loginbutton" value="{vb:rawphrase log_in}" tabindex="104" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />

                                                </div>

                                        </div>

                                </fieldset>

                                <div id="remember">

                                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" /> {vb:rawphrase remember_me}</label>

                                </div>

                        

                                <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />

                                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />

                                <input type="hidden" name="do" value="login" />

                                <input type="hidden" name="vb_login_md5password" />

                                <input type="hidden" name="vb_login_md5password_utf" />

                        </form>        

                </vb:if>

        </div>

        <div class="ad_global_header">

                {vb:raw ad_location.global_header1}

                {vb:raw ad_location.global_header2}

        </div>

        <hr />

        {vb:raw ad_location.ad_header_end}

</div>

</div>

Any ideas? Thanks!

You have a solid colour background there's no need to use this, just chose your image in your stylevar and the background colour to match.

No solid color. There is a gradiant along the top of the header. (Dark grey.) Somewhat hard to see in the resized thumbnails that were created when I uploaded.

Quote:

Originally Posted by j.steensen (Post 1927351)

No solid color. There is a gradiant along the top of the header. (Dark grey.) Somewhat hard to see in the resized thumbnails that were created when I uploaded.

Then revert your template and use header_background in stylevar for that, add the left image to titleimage

Just making sure I am tracking properly...

Revert header templates (removing the fluid header).
Add repeating background gradient to header_background stylevar.
Add logo image to titleimage stylevar.

Correct? Thanks for the help.

Why not use the code below? Does it not work?

Quote:

Originally Posted by hoof (Post 1920797)

To do this just add some lines to your CSS and then call it out in the template you want it to display.

Example: for a 3 part image in the CSS add

Code:

#headerFill{

background-image: url(your/path/to image/here.gif);

background-repeat: repeat-x;

height: 120px;

width: 100%;

margin-right: auto;

margin-left: auto;

}

#headerL{

background-image: url(your/path/to image/here.gif);

height: 120px;

background-repeat: no-repeat;

width: 468px;

float: left;

margin-left: -20px;

}

#headerR {

background-image: url(your/path/to image/here.gif);

background-repeat: no-repeat;

height: 120px;

width: 175px;

float: right;

margin-right: -20px;

}

Code:

<div id="headerFill"><div id="headerL"></div><div id="headerR"></div></div>

You should now have a fluid banner :)

It did work with Beta 4, perfectly.

Upgrade to Beta 5 broke it.

Since it is a template or added css mod you may had to reput it back into its place again for it to work?

Quote:

Originally Posted by j.steensen (Post 1927466)

That's right, the only benefit of using this mod is it gives you the ability to add a 3rd (right) image

Are there any news regarding how to make a fluid three part header now when vB4 is in the Release Candidate stage? I searched for the string to replace (posted at the top of this page), but that code seems to have been changed.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01578 seconds Memory Usage 1,874KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (10)bbcode_code_printable (19)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: