How do I add a horizontal colored line on forum home?

[2darkpark]

Hello All!
I want to add a horizontal colored line right under the category headings. I forgot how to do this. I want to add a gray line, then a white line, then another gray line. It was a nice touch on my previous vb2 forum.....it added a little color and broke things up a bit.

I dont want them to be real thick, just a simple line going across. Also, is there a way to tailor the code so it looks correct in firefox as well?

[Jake Bunce]

I am not sure exactly what you want to do. Do you have a picture of or link to your vB2 forums that have this modification so I can see?

[2darkpark]

Hey Jake!

Thanks for replying, and sorry for the confusion. Currently, my server host is not available so I cant access my website. However, Ill try to explain it a bit clearer!

Basically, under the category heading on my forum home, I would like to add 3 horizontal, solid lines (right under the category heading and right above where my forums will be listed). I did this for vb2 and it looked really cool. I'd like the lines to appear under each category heading on the forum home.

The only problem is that when I had this implemented on my vb2 forum, the lines displayed properly in IE. However, when viewed with firefox, the lines were about 5 times thicker than they should have been. Hope this clarifies things!

[Jake Bunce]

Try this... go to your:

Admin CP -> Styles & Templates -> Style Manager -> « » -> Forum Home Templates -> forumhome_forumbit_level1_nopost

Add the red code:

<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
			<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
			<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
			<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
		</td>
	</tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">

	<tr>
		<td height="2" style="background: #123456; padding: 0px;" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>"></td>
	</tr>
	<tr>
		<td height="2" style="background: #123456; padding: 0px;" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>"></td>
	</tr>
	<tr>
		<td height="2" style="background: #123456; padding: 0px;" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>"></td>
	</tr>

$childforumbits
</tbody>
</if>

Change the height and color code (#123456) of each line to whatever you want.

[2darkpark]

THanks Jake!
Any idea why they look real THICK in firefox? You can check out my site to see an example! www.2darkpark.com/vbulletin

[Jake Bunce]

They are thick because they are inheriting the padding of the parent table. You need to use the complete code that I posted, including the style setting with the padding attribute:

	<tr>
		<td height="2" style="background: #123456; padding: 0px;" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>"></td>
	</tr>

[2darkpark]

Jake,
I really appreciate your quick support! One of the reasons why I have stuck with vb over the past few years and one of the reasons why I'll never switch!

Edit: one final question...when I view my forums with IE the moderator image is next to the moderator drop-down. However, in firefox he is above it. If you care to answer this, that would be great, but if not.....I really appreciate your help with the previous question!

[Jake Bunce]

Edit: one final question...when I view my forums with IE the moderator image is next to the moderator drop-down. However, in firefox he is above it. If you care to answer this, that would be great, but if not.....I really appreciate your help with the previous question!

I'm not sure where you are talking about. Can you post a link or example?

[2darkpark]

When I get home from work, I can post a screenshot. But if you have firefox installed, you can probably view the problem on my forum home: www.2darkpark.com/vbulletin

If you at the moderator column, you can see that the moderator icon (the little picture of the three stick-figure guys) is above the moderator drop-down box. However, it should be to the left of the drop-down box.

Thanks again, my members are MUCH MUCH happier now that the line problem is fixed (as well as the anchor problem!!!).

[Jake Bunce]

Go to your:

Admin CP -> Styles & Templates -> Style Manager -> « » -> Forum Home Templates -> forumhome_forumbit_level2_post

Find this code and add the red code:

	<td class="alt1" nowrap="nowrap"><div class="smallfont">$forum[moderators]&nbsp;</div></td>

Make the same change to the forumhome_forumbit_level1_post template.

[2darkpark]

Hey Jake,

Thank you so much for the quick and ACCURATE support! May I ask you one last question related to IE and firefox differences? My PM BAR does not display in firefox. Any idea why that might not show up at all?

[Jake Bunce]

Firefox doesn't like your HTML comments. I was able to fix the problem on a copy of your forumhome page by changing this code:

<!-- / breadcrumb, login, pm info --> 
<!------------------------PM BAR --------------------------->

<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center" nowrap="nowrap"> 
<thead> 
    <tr> 

        <td class="tcat" colspan="2">
<a href="private.php?">Private Messages:</a></td> 
    </tr> 
</thead> 


<!-- pm stats table --> 
    <tr> 

        <td class="alt2"><a href="private.php?"><img src="images/statusicon/pm_link.gif" alt="View Private Messages" border="0" /></a></td> 
        
<td width="100%" 
   class="alt1"
>
<div class="smallfont">
<span style="color: white;">
<b>Jake Bunce</b> - You have <a href="private.php?"></a> 0 unread message(s) since your last visit to 2darkPark.</br>(You have  0 total messages in all of your folders)
</span>
</div>
        </td> 
    </tr> 
<!-----------------------BLINK FOR PM------>

<!-----------------------BLINK FOR PM------>




<!------------------------END PM BAR --------------------------->

...to this code:

<!-- / breadcrumb, login, pm info --> 
<!-- PM BAR -->

<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center" nowrap="nowrap"> 
<thead> 
    <tr> 

        <td class="tcat" colspan="2">
<a href="private.php?">Private Messages:</a></td> 
    </tr> 
</thead> 


<!-- pm stats table --> 
    <tr> 

        <td class="alt2"><a href="private.php?"><img src="images/statusicon/pm_link.gif" alt="View Private Messages" border="0" /></a></td> 
        
<td width="100%" 
   class="alt1"
>
<div class="smallfont">
<span style="color: white;">
<b>Jake Bunce</b> - You have <a href="private.php?"></a> 0 unread message(s) since your last visit to 2darkPark.</br>(You have  0 total messages in all of your folders)
</span>
</div>
        </td> 
    </tr> 
<!-- BLINK FOR PM -->

<!-- BLINK FOR PM -->




<!-- END PM BAR -->

I removed all but two dashes from each side of each comment. Make this same change in your templates.