The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
|||||||
|
#1
12-14-2010, 08:10 PM
|
|||
|
|||
Uniform Width for Left Column inside Forum vs Forum index?
I?m migrating my vB 3.8.6 forum over to 4.1.0PL2, and am struggling to get some cosmetic issues taken care of, and am editing the Header template. What I?m stuck on now is illustrated below.
  I?ve been taking code from the Header template in my working 3.8.6 implementation, and moving it to the 4.1.0 test forum ? and I think that is where my issue is, not sure. Can anyone make a suggestion? How can I make it so the left column (containing the ad, the RSS feed, the addthis widget) is the same width regardless of whether the user is in the Forum, or up a level or two? I greatly appreciate your help ? thanks! Greg P.S. If you need to see the vB4 header code, here it is (with stuff removed that is not relevant): Code:
<!-- ADDS MIDLIFEBACHELOR.COM TOP HEADER -->
[deleted this section from here as I don't think it is relevant to this issue - looks fine]
<!-- END - ADDS MIDLIFEBACHELOR.COM TOP HEADER -->
<!-- THIS ADDS THE LEFT COLUMN FOR TWO 160X600 ADS PLUS RSS AND ADDTHIS WIDGET -->
<!-- copied next three lines from vB 3.8.6 header ? could be my problem???
<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="165" valign="top" class="page" style="padding: $stylevar[cellpadding]px;">
<div id="Layer6">
<!-- AddThis Button BEGIN -->
<!-- AddThis Button END -->
<br />
<!-- feedburner and google adsense code goes here -->
</div>
<br />
<div id="Layer8">
<br />
<!-- openx ad rotator code goes here -->
</div>
</td>
<td valign="top">
<!-- END LEFT COLUMN FOR TWO 160X600 ADS PLUS RSS AND ADDTHIS WIDGET -->
<!-- note that I did not change or add anything to rest of the code from here down -->
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
<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>
<div id="toplinks" class="toplinks">
<vb:if condition="$show['member']">
<ul class="isuser">
<li><a href="login.php?{vb:raw session.sessionurl}do=logout&logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</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="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
<vb:if condition="$notifications_total">
<li class="popupmenu notifications" 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 nonotifications" id="nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
<ul class="popupbody popuphover">
<li>{vb:rawphrase no_new_messages}</li>
<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
</ul>
</li>
</vb:if>
<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
{vb:raw template_hook.header_userinfo}
<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>
<li>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form id="navbar_loginform" 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" class="logindetails">
<div>
<div>
<input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" 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>" />
<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
</div>
</div>
</fieldset>
<div id="remember" class="remember">
<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {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>
<script type="text/javascript">
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
vB_XHTML_Ready.subscribe(function()
{
//
YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
});
function navbar_username_focus(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
{
//
textbox.value='';
textbox.style.color='{vb:stylevar toplinks_form_input.color}';
}
}
function navbar_username_blur(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
//
textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
textbox.style.color='{vb:stylevar toplinks_form_input_defaultValue.color}';
}
}
function navbar_password_hint(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
YAHOO.util.Dom.get('navbar_password').focus();
}
function navbar_password(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
}
}
</script>
</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
</vb:if>
</div>
<div class="ad_global_header">
{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>
<hr />
</div>
|
|
#2
12-14-2010, 08:33 PM
|
||||
|
||||
|
I'm going to be honest and say you need to rethink this... first off get rid of the <TD... you can modify this and using CSS achieve what you need with <DIV... I think your still stuck in vB3 mode and need to get into vB4 gear
 . No worries we are here to help, what we need to do is make it so this is done correctly with minimum edits .Please post your CSS definitions and any other template edits you have performed and I'm assuming by the commented code this is for http://www.midlifebachelor.com/forum...isplay.php?f=2 and you have a test site up... remember it's not the best to copy version 3 code into version 4 or go about things in the same way you must think ahead a little  Once you post that info we can work on how your going about this .Edit: Also in vB4 you can comment out code using: Code:
<vb:comment> Hide this from browsers and source code </vb:comment>
|
|
#3
12-14-2010, 09:04 PM
|
|||
|
|||
|
Quote:
Quote:
The only thing I've edited in the vB4 templates is the Header. Here is all of it, in its entirety ... Code:
<!-- ADDS MIDLIFEBACHELOR.COM HEADER -->
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:0px;
top:0px;
width:1017px;
height:70px;
z-index:1;
}
#Layer16 { position:absolute;
left:0px;
top:70px;
width:1019px;
height:35px;
z-index:16;
}
#Layer2 {
position:absolute;
left:0px;
top:70px;
width:1019px;
height:35px;
z-index:2;
}
#Layer3 {
position:absolute;
left:5px;
top:127px;
width:134px;
height:47px;
z-index:3;
}
#Layer4 {
position:absolute;
left:164px;
top:120px;
width:728px;
height:90px;
z-index:4;
}
#Layer5 {
position:absolute;
left:164px;
top:120px;
width:728px;
height:90px;
z-index:4;
}
#Layer6 {
position:absolute;
left:5px;
top:220px;
width:160px;
height:750px;
z-index:5;
}
#Layer7 {
position:absolute;
left:4px;
top:873px;
width:4px;
height:249px;
z-index:6;
}
#Layer8 {
position:absolute;
left:5px;
top:935px;
width:160px;
height:600px;
z-index:6;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<body onload="MM_preloadImages('../images/buttons/mlb_home_on.png','../images/buttons/mlb_news_on.png','../images/buttons/mlb_mldatingadvice_on.png','../images/buttons/mlb_articles_on.png','../images/buttons/mlb_ask_mlb_on.png','../images/buttons/mlb_mlcrisis_on.png','../images/buttons/mlb_health_on.png','../images/buttons/mlb_polls_on.png','../images/buttons/mlb_forums_on.png','../images/buttons/mlb_feedback_on.png','../images/WOTM_Hover.png','../images/buttons/mlb_contactmlb_on.png')">
<div id="Layer1"><a href="../index.html"><img src="../images/MLB_Header2.png" alt="Midlife Bachelor Home" width="1017" height="70" border="0" /></a></div>
<div id="Layer2"><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../images/buttons/mlb_home_on.png',1)"><img src="../images/buttons/mlb_home.png" alt="Home" name="Home" width="54" height="35" border="0" id="Home" /></a><a href="../news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','../images/buttons/mlb_news_on.png',1)"><img src="../images/buttons/mlb_news.png" alt="News" name="News" width="54" height="35" border="0" id="News" /></a><a href="../datingadvice.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Dating Advice','','../images/buttons/mlb_mldatingadvice_on.png',1)"><img src="../images/buttons/mlb_mldatingadvice.png" alt="Midlife Dating Advice" name="Midlife Dating Advice" width="108" height="35" border="0" id="Midlife Dating Advice" /></a><a href="../article.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Short Midlife Articles','','../images/buttons/mlb_articles_on.png',1)"><img src="../images/buttons/mlb_articles.png" alt="Short Midlife Articles" name="Short Midlife Articles" width="108" height="35" border="0" id="Short Midlife Articles" /></a><a href="../askmlb/askmlb.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Ask Midlife Bachelor','','../images/buttons/mlb_ask_mlb_on.png',1)"><img src="../images/buttons/mlb_ask_mlb.png" alt="Ask Midlife Bachelor" name="Ask Midlife Bachelor" width="114" height="35" border="0" id="Ask Midlife Bachelor" /></a><a href="../crisis/crisis-intro.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Your Midlife Crisis','','../images/buttons/mlb_mlcrisis_on.png',1)"><img src="../images/buttons/mlb_mlcrisis.png" alt="Your Midlife Crisis" name="Your Midlife Crisis" width="102" height="35" border="0" id="Your Midlife Crisis" /></a><a href="../health.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Health Challenges','','../images/buttons/mlb_health_on.png',1)"><img src="../images/buttons/mlb_health.png" alt="Midlife Health Challenges" name="Midlife Health Challenges" width="108" height="35" border="0" id="Midlife Health Challenges" /></a><a href="../polls.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Bachelor Polls','','../images/buttons/mlb_polls_on.png',1)"><img src="../images/buttons/mlb_polls.png" alt="Midlife Bachelor Polls" name="Midlife Bachelor Polls" width="59" height="35" border="0" id="Midlife Bachelor Polls" /></a><a href="../forums" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Bachelor Discussion Forums','','../images/buttons/mlb_forums_on.png',1)"><img src="../images/buttons/mlb_forums.png" alt="Midlife Bachelor Discussion Forums" name="Midlife Bachelor Discussion Forums" width="103" height="35" border="0" id="Midlife Bachelor Discussion Forums" /></a><a href="../feedback.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Reader Feedback','','../images/buttons/mlb_feedback_on.png',1)"><img src="../images/buttons/mlb_feedback.png" alt="Reader Feedback" name="Reader Feedback" width="108" height="35" border="0" id="Reader Feedback" /></a><a href="../contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Midlife Bachelor','','../images/buttons/mlb_contactmlb_on.png',1)"><img src="../images/buttons/mlb_contactmlb.png" alt="Contact Midlife Bachelor" name="Contact Midlife Bachelor" width="99" height="35" border="0" id="Contact Midlife Bachelor" /></a><a href="../contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Midlife Bachelor','','../images/buttons/mlb_ask_mlb_on.png',1)"></a></div>
<div id="Layer3"><a href="../wotm.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Woman of the Month','','../images/WOTM_Hover.png',1)"><img src="../images/WOTM.png" alt="Woman of the Month" name="Woman of the Month" width="134" height="47" border="0" id="Woman of the Month" /></a></div>
<div id="Layer5">
<!-- 728 X 90 BANNER AD -->
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://d1.openx.org/ajs.php':'http://d1.openx.org/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=146344");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script>
<!-- END 728 X 90 BANNER AD -->
</div>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<!-- END - ADDS MIDLIFEBACHELOR.COM HEADER -->
<!-- THIS ADDS THE LEFT COLUMN AND THE GOOGLE AD -->
<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="165" valign="top" class="page" style="padding: $stylevar[cellpadding]px;">
<div id="Layer6">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&username=gregorysmith1964" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=gregorysmith1964"></script>
<!-- AddThis Button END -->
<br />
<a href="http://feeds.feedburner.com/MidlifeForum" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="vertical-align:middle;border:0"/></a> <a href="http://feeds.feedburner.com/MidlifeForum" rel="alternate" type="application/rss+xml"><br />Subscribe in a reader</a>
<br /><br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-9216958341729438";
/* 160x600, midlifeforum, left-top, created 6/19/10 */
google_ad_slot = "6251332437";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br />
<div id="Layer8">
<br />
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://d1.openx.org/ajs.php':'http://d1.openx.org/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=146346");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script>
</div>
</td>
<td valign="top">
<!-- END LEFT COLUMN FOR GOOGLE AD -->
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
<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>
<div id="toplinks" class="toplinks">
<vb:if condition="$show['member']">
<ul class="isuser">
<li><a href="login.php?{vb:raw session.sessionurl}do=logout&logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</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="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
<vb:if condition="$notifications_total">
<li class="popupmenu notifications" 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 nonotifications" id="nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
<ul class="popupbody popuphover">
<li>{vb:rawphrase no_new_messages}</li>
<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
</ul>
</li>
</vb:if>
<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
{vb:raw template_hook.header_userinfo}
<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>
<li>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form id="navbar_loginform" 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" class="logindetails">
<div>
<div>
<input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" 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>" />
<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
</div>
</div>
</fieldset>
<div id="remember" class="remember">
<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {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>
<script type="text/javascript">
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
vB_XHTML_Ready.subscribe(function()
{
//
YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
});
function navbar_username_focus(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
{
//
textbox.value='';
textbox.style.color='{vb:stylevar toplinks_form_input.color}';
}
}
function navbar_username_blur(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
//
textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
textbox.style.color='{vb:stylevar toplinks_form_input_defaultValue.color}';
}
}
function navbar_password_hint(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
YAHOO.util.Dom.get('navbar_password').focus();
}
function navbar_password(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
}
}
</script>
</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
</vb:if>
</div>
<div class="ad_global_header">
{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>
<hr />
</div>
Quote:
Anything you do to coach me through this effort will be seriously appreciated - thanks! Greg
|
|
#4
12-15-2010, 07:24 AM
|
||||
|
||||
|
Greg,
First let's get you up to par on CSS, for this let's use something already here you can tinker with... this is a fine example: https://vborg.vbsupport.ru/showthread.php?t=228319 Now as you can see there are three css "definitions" or "classes" if you will: 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;
}
If you think about though, just in case your wondering... we're going to use a similar CSS to that of beermonsters plus add in one new class, that will house the wrapper which holds it all, the left column, center column, and right column when done and CSS stands for Cascading Style Sheet so it reads top to bottom by order of definitions. There's many useful tricks of the trade per say once you can utilize CSS and it comes in handy trust me so post back when you have a mock up of the header, post your code here and we'll create the new definitions here and go from there, this way there's code you can easily relate to here for reference. *At least that way as I mentioned, you will have learned some CSS which is also our goal here. Don't be afraid to shoot me a PM if you don't see me on and get froggy .
|
|
#5
12-15-2010, 01:25 PM
|
|||
|
|||
|
Hi Michael - I am out of the office all day today and tomorrow ... and so the soonest I will be able to pick this up is sometime Friday, or as late as this weekend. I absolutely appreciate your help, and will get back with you as soon as I've gone through what you posted. Thank you, Sir!
Greg
|
|
#6
12-15-2010, 04:04 PM
|
||||
|
||||
|
Quote:
I work from home so I'll be here all week and over the weekend simply shoot me a PM and I'll come back, we'll shoot a few post back and forth then when it clicks you'll be set .
|
|
#7
12-17-2010, 08:36 PM
|
|||
|
|||
|
Okay ? I?ve been studying Beermonster?s mod, and have successfully implemented part of it. Here is what I?ve got, and what I?ve learned ?
First of all, if I split my header image into three pieces (as in Beermonster?s example), then I run into trouble when the user has a narrow window. [The right-side graphic needs to be so wide because of the slow color fade.] For example, this is what one sees:  So to get around the issue shown above, I switched to ONLY using a left image, and that seems to work fine (not considering the user log on location just yet though):  Here is my next question ? and maybe you just haven?t schooled me this far just yet ? but the forum needs to be beneath a bunch of live links and a big 728x90 banner ad, like so (shown in my working 3.8.6 forum page):  How do we accomplish what you see above? Thanks again in advance for your help with this, Sir! I very much appreciate the advice! Greg
|
|
#8
12-17-2010, 11:00 PM
|
||||
|
||||
|
Quote:
Fixed = When you maximize the center "column" stays one width and the side margins become larger. Fluid = When you maximize the center "column" stretches and the side margins stay the same. If you go with a fixed width long story short you'll have full control over the sites style, if you go fluid width now many of the exact size 500px width css classes are now required to be % i.e. 50% so it then becomes tricky for one not well versed. I would say go fixed width unless your working for a client then it's their wish is your command naturally however I always recommend a fixed width others would argue and also bring valid reasons to the table (such as your columns... fixed width you can make it one size to always look a certain way or you can make it fluid so the sides stay the same yet the inside stretches which would be more in-depth though it can be done is the point) and it's really your preference honestly your the owner .So let's get down to it... What your going to do is basically wrap your entire forum with a version of the three part header. How you go about this is determined by your choice of a fixed or fluid width style, if both we'll go over one and you can do the other and build your confidence up about css .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;
}
.Next is splitting up the <div tags and knowing what your putting in each "Column" if you will and then ensuring it all works. So I've just explained a basic run through of what we are going to do, reply back with fixed or fluid width and if fixed the size you have set and I'll whip some code examples up and tell you which templates to edit and paste the code in. --------------- Added [DATE]1292637134[/DATE] at [TIME]1292637134[/TIME] --------------- Greg, As an example as sometimes I can't wait for a reply call it my preemptive intuitions lol here is what you can paste and try (will require some tinkering on your end)... Paste into additional.css: Code:
#forumFill{
background-image: none;
background-repeat: repeat-x;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#forumL{
background-image: none;
background-repeat: no-repeat;
width: 150px;
float: left;
}
#forumC {
background-image: none;
background-repeat: no-repeat;
width: 600px;
float: left;
}
#forumR {
background-image: none;
background-repeat: no-repeat;
width: 150px;
float: left;
}
Now edit your navbar template and paste this at the very bottom: Code:
<div id="forumFill"> <div id="forumL">Testing 123</div> <div id="forumC"> Code:
</div> <div id="forumR">Testing 123</div> </div> . Now you'll want to include some padding css and possibly mess with this some more to achieve your desired look and "feel" as you can see in the screenshot you'll want to move the far right column over more.Demo:  Give that a go, tinker with it and let me know how your doing Edit: *If your using the suite version you may not want this on the CMS/Home page if that's the case don't forget you can comment out these edits using template conditionals .
|
|
#9
12-18-2010, 04:24 PM
|
|||
|
|||
|
I am slowly getting there, but not quite just yet. Here?s what I've got. I ***really appreciate*** your input.
First of all, I implemented what you showed me above - and got it working as in your example. Now I've been experimenting a bit in search of the final solution. OVERALL GOAL Just to restate where I'm ultimately going is - I need to achieve something identical to what you see on my working 3.8.6 forum, shown here: http://www.midlifebachelor.com/forum...isplay.php?f=2 ... which is 1) a top which contains a fixed-width graphic, then underneath a bunch of fixed-width "buttons", composed of HTML and javascript (which are links to other portions of the site, plus ads). and then UNDERNEATH what item 1) above describes: 2) a fixed-width left-side column that contains a bunch of HTML and javascript (ads, addthis.com widget, RSS, etc.) 3) no right column 4) forum grows automatically ("fluid" in your language) to the right 5) identical user experience whether inside the forum, or at the top level forum/index.php page. WHERE I'M AT RIGHT NOW Now I mentioned I've been experimenting, and here is what I've done and what I see: at the index.php level ...  inside the forum itself ...  I set the doc_margin Left to 0, and doc_margin Right to Auto, and then changed the header_background color from #2f4456 to white so that it matches the right-side of the top graphic. I also changed the header background image from "url(images/gradients/gradient-grey-down.png)" to "" because I don't want the gradient grey image (gradient image doesn't match the white right side of the top graphic). Here are the mods, as I have them now ... In the header template: I modified Beermonster's mod, and replaced, 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>
Code:
<div id="headerFill"><div id="headerL"></div></div> Code:
<div id="headerFill"><div id="headerL"></div><div id="headerR"></div></div> In the vbulletin.css template, I changed your suggested mods to: Code:
#headerL{
background-image: url(http://www.missioninland.com/images/MLB_Header2.png);
height: 70px;
background-repeat: no-repeat;
width: 1017px;
float: left;
}
In the additional.css template, I changed your suggested mods to: Code:
#forumFill{
background-image: none;
background-repeat: repeat-x;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#forumL{
background-image: none;
background-repeat: no-repeat;
width: 165px;
float: left;
}
#forumC {
background-image: none;
background-repeat: no-repeat;
width: auto;
float: left;
}
forumL width 165px is identical to my 3.8.6 left-column width. forumC width auto; the goal is to have the forum expand automatically to the right as the user widens the browser. [This seems to work fine when inside the actual forum, but does not work when viewing at the forum/index.php level.] In the navbar template, I left that as you suggested: Code:
<div id="forumFill"> <div id="forumL">Testing 123</div> <div id="forumC"> In the footer template, the first several lines are: Code:
</div>
</div>
{vb:raw ad_location.ad_footer_start}
.
.
.
Conclusions thus far I think I'm on my way to "getting it" but not quite there yet 1) When viewing the top-level index.php page, - the left-hand column looks great (this is where my 160x600 ads and other stuff will ultimately go) - there is still a right-hand column, for some reason??? - ideally, at the index.php level the display should grow to the right automatically (as it does when inside the forum), but it does not.  2) When viewing the forums/forumdisplay.php?2-Midlife-Forum page, - the left-side column has disappeared, and the HTML (actually the "Testing 123" text) shows up at the top, above the "Post New Thread" link? - right-side of the forum itself grows to the right as the user widens the window ... which is exactly what I want. [I don't want a right column on any page, forum or index.php level]  So what would you suggest I do to get past the issues identified in these "Conclusions thus far"? I know I'm still missing the boat, but I do have one foot in the boat with my ass still on the dock. ha ha Thank you very much for your input, Sir ... !!!
|
|
#10
12-18-2010, 04:57 PM
|
||||
|
||||
|
Ok Greg your off to a good start and as you mentioned in PM it's helped you bypass that initial "speed bump" so that's great!
In the footer, remember to paste my code examples exactly only remove the forumR division completely if you do not want the right column . Since your want just the left and then the right to be full width we will remove it and adjust the width of the main forum/threads etc to be full width so it's stretches.Also the shorthread/postbit areas should not overlap the left "column" we have made see my demo shot here:  Now to fix the center column as we were calling it now it's pretty much the right column if you think about it regardless though change this: Code:
#forumC {
background-image: none;
background-repeat: no-repeat;
width: 600px;
float: left;
}
Code:
#forumC {
background-image: none;
background-repeat: no-repeat;
margin-left:165px;
float: left;
}
 ) so we bypass that by removing the width attribute and telling it to be 165px - you may want to adjust that, I initially did the two columns at 150px I'm sure by now you figured that out and adjusted the numbers just remember what I said about css - sometimes not defining somehting is better than over defining everything as some things are inherited regardless.Now with the changes we have this:  Which carries through the entire site . *I did notice one misc issue if you have the forum sidebar enabled so let me know if your using that and if so we'll address otherwise this has you more on track and after some tinkering you should be good to go and in the least you now grasp css much better! Now that you have some of this under your belt check out this mod that does something similar.... https://vborg.vbsupport.ru/showthread.php?t=230329 and there's others so be sure to use the search and have a look around... with your new CSS abilities you should be able to understand that part of anything you run across now .Edit: Also Greg, check here for tons of useful articles! https://vborg.vbsupport.ru/forumdisplay.php?f=242
|
 |
«
Previous Thread
|
Next Thread
»
Linear Mode
|
|
All times are GMT. The time now is 09:14 AM.