3 D Borders ?

[Bro_Joey_Gowdy]

I believe this is a template hack - if not please move it -

What files must I edit to make all the borders look 3 D ??

I would like all my borders to look 3Dish like the 'ScrollBar' is.

[Michael2]

This should help.

http://www.vbulletin.com/forum/showthread.php?s=&threadid=34065&highlight=bevel

[Bro_Joey_Gowdy]

I found this on another site - then copied the code to an html file and placed it on my site--

This is the 3 D Borders I was wanting -

http://www.joeygowdy.com/forum/preview-3d-borders.html



<td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr id="cat">
<td bgcolor="#A3A3CB" style="BORDER-RIGHT: #606096 3px solid; BORDER-TOP: #E7E7F1 3px solid; BORDER-LEFT: #E7E7F1 3px solid; BORDER-BOTTOM: #606096 3px solid;"" colspan="6"><font class="nf" color="#000000">
<b>
<center>
<font class="nf">
<a href="=">3 D Borders</a>
</font>
</center>
</b>
</td>

[Bro_Joey_Gowdy]

Guess instead of asking that - I should ask WHAT FILES do I have to change ? And whats the line of code I need to enter for it to work ?

[plattopus]

In the Header Insert section of your skin, add the following:

.bevel {
BORDER-RIGHT: #606096 3px solid;
BORDER-TOP: #E7E7F1 3px solid;
BORDER-LEFT: #E7E7F1 3px solid;
BORDER-BOTTOM: #606096 3px solid;
}

And then go through your templates, and for every table you wish to bevel, add class="bevel" to the <td> tag.

[Bro_Joey_Gowdy]

Thanks plattopus and Michael2 !!

Got it to work - so for future inqueries this is what was done :

1. Go to Admin CP


2. Choose "Add/Modify Style"


3. Scroll down to "Head Insert"


4. Look for </style> and ADD ABOVE it :

}
.bevel3d {
BORDER-TOP: #FFFFFF 5px solid;
BORDER-LEFT: #FFFFFF 5px solid;
BORDER-RIGHT: #606096 5px solid;
BORDER-BOTTOM: #606096 5px solid;
}



5. Note- 5px this number can be changed to alter the size of the borders. Save this file.


6. Now go to "Add Replacement" and enter the following:
Replacement set: default
Code to find: {bevel}
Code to insert: class="bevel3d"
Then save.


7. Now go to your "Templates" and insert {bevel3d} into the the files that you want to look 3D-ish, example:

<td bgcolor="#8080A6" {bevel3d}><smallfont>&nbsp;</smallfont></td>
<td bgcolor="#8080A6" {bevel3d} width="55%" align="left"><smallfont color="#EEEEFF"><b>Forum</b></smallfont></td>



8. Enjoy.

[tweak]

I tryed to get the 3d to work but i keep getin Black boxes??? in template ForumHome no post where would i put it?

<tr id="cat">
<td background="{imagesfolder}/catbg.jpg" bgcolor="{categorybackcolor}" colspan="5"><center><a href="forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont color="{categoryfontcolor}"><b>$forum[title]</b></normalfont></a></center></td>
</tr><tr>
<td bgcolor="{tableheadbgcolor}"><smallfont>&nbsp;</smallfont></td>
<td bgcolor="{tableheadbgcolor}" width="55%" align="left"><smallfont color="{tableheadtextcolor}"><b>Forum</b></smallfont></td>
<td bgcolor="{tableheadbgcolor}" nowrap><smallfont color="{tableheadtextcolor}"><b>Last Post</b></smallfont></td> <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Posts</b>&nbsp;&nbsp;</smallfont></td>
<td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Threads</b></smallfont></td>
</tr>

[Bro_Joey_Gowdy]

Sorry, I skipped a couple steps.

I added another step so refer to the original post.

I placed mine as follows:


<td bgcolor="#8080A6" {bevel3d}><smallfont>&nbsp;</smallfont></td>
<td bgcolor="#8080A6" {bevel3d} width="55%" align="left"><smallfont color="#EEEEFF"><b>Forum</b></smallfont></td>
<td bgcolor="#8080A6" {bevel3d} nowrap><smallfont color="#EEEEFF"><b>Last Post</b></smallfont></td>
<td bgcolor="#8080A6" {bevel3d}><smallfont color="#EEEEFF"><b>Posts</b>&nbsp;&nbsp;</smallfont></td>
<td bgcolor="#8080A6" {bevel3d}><smallfont color="#EEEEFF"><b>Threads</b></smallfont></td>
</tr>

[Bro_Joey_Gowdy]

Hmm...

I cannot find the main category bit - where is it at ?

http://www.JoeyGowdy.com/Forum

I need the main categorys to look 3D - what template is that? ?

[Bro_Joey_Gowdy]

Im useing vB2.2.6.

I went under 'forumhome' and inserted {bevel3d} into all of those but the main categories still are not in 3D.

http://www.JoeyGowdy.com/forum

[FWC]

You need to modfiy the forumhome_forumbit_level1_nopost template.

[Bro_Joey_Gowdy]

Thanks FWC

:D

[FWC]

You're welcome. :)

[BigJohnson]

Yes This works outstanding on my forums but i have one question. How o I add 3d borders to my actual posts when i post a message. Because the color alternates all the time and it would be impossible to have the same bevel for 2 different colors. One would look 3D while the other wuld look really funky. Please help thanks.

[Atian]

try doing a search/replace string =\

[BigJohnson]

Well i am not that good with coding. Is there any way you can explain your self a little more please thanks.

[Bro_Joey_Gowdy]

Originally posted by BigJohnson
Yes This works outstanding on my forums but i have one question. How o I add 3d borders to my actual posts when i post a message. Because the color alternates all the time and it would be impossible to have the same bevel for 2 different colors. One would look 3D while the other wuld look really funky. Please help thanks.

Umm...
what do you mean ?
Do you want your text area to look 3 d with alternating 3 d colors ?

[Michelle69]

There's an easier way to do this without modifying your header or templates... and will do the actual posts as well as the index page.

Just go to Styles --> Modify --> fonts/colors/etc --> Main Colors

Add the code to your First and Second Alternating Table Background Color replacement.

My code reads this:

First Alternating Table Background Color:
#545454" style="BORDER-RIGHT: #303030 2px solid; BORDER-TOP: #c0c0c0 2px solid; BORDER-LEFT: #c0c0c0 2px solid; BORDER-BOTTOM: #303030 2px solid;"

Second Alternating Table Background Color:
#646464" style="BORDER-RIGHT: #303030 2px solid; BORDER-TOP: #c0c0c0 2px solid; BORDER-LEFT: #c0c0c0 2px solid; BORDER-BOTTOM: #303030 2px solid;"

The result is This (http://www.ninjamicros.com/vbulletin/index.php3)

You can copy and paste this in yours, then just replace the hex code with your colours, and adjust the px value if you like.

[Bro_Joey_Gowdy]

(slaps himself)

Thanks... That was so much easier... wonder why I didnt think of that...

:(


Originally posted by Michelle69
There's an easier way to do this without modifying your header or templates... and will do the actual posts as well as the index page.

Just go to Styles --> Modify --> fonts/colors/etc --> Main Colors

Add the code to your First and Second Alternating Table Background Color replacement.

My code reads this:

First Alternating Table Background Color:
#545454" style="BORDER-RIGHT: #303030 2px solid; BORDER-TOP: #c0c0c0 2px solid; BORDER-LEFT: #c0c0c0 2px solid; BORDER-BOTTOM: #303030 2px solid;"

Second Alternating Table Background Color:
#646464" style="BORDER-RIGHT: #303030 2px solid; BORDER-TOP: #c0c0c0 2px solid; BORDER-LEFT: #c0c0c0 2px solid; BORDER-BOTTOM: #303030 2px solid;"

The result is This (http://www.ninjamicros.com/vbulletin/index.php3)

You can copy and paste this in yours, then just replace the hex code with your colours, and adjust the px value if you like.

[king sting]

thankz Michelle69 that worked great, btw anybody know how i can make the scroll bars not 3d. u know how they seem bevelled i was wondering if there was a way to undo that. i've seen it done before