How to add a bevel to table strips using CSS

[rascal]

How do you add bevel to a particular column such as found in here http://forums.jjr512.com/
(See Category - Site-Related, Computer Stuff etc) 10Q

[Kier]

A really simple way to do it would be to take the {categorybackcolor} replacement variable, and make it replace to this:

#123ABC" style="border:1px outset;

(where #123ABC is your chosen background color)

[rascal]

Sound silly, but where can I find the code??

[edit] Thank you so much. Mananged to figure it out....silly me[/edit]

[Kier]

Just as an addendum, if you want to define the colors of the bevel yourself, then you can do so like this:

First, edit the headinclude template, and somewhere inside the <style>....</style> area, add this code:

.bevel {
	border: 1px solid;
	border-color: [i]topColor rightColor bottomColor leftColor[/i];
}

(replacing topColor/rightColor/bottomColor/leftColor with the colors you want to see in those positions)

Then edit that replacement variable again, and rather than having

#123ABC" style="border: 1px outset;

you should now have

#123ABC" class="bevel

[Kier]

Just an example...

(apologies for the grotty colors, but it's just to show how it works)

[rascal]

Noted. Thanks Keir!
Can't imagine I tried about 2hrs before giving up....

[RavenBeauty]

I want to do this so badly! But I am not quite grasping the instructions. So very sorry but it's not sinking in and im afraid to tinker with it! Here is more what I want:

http://www.3dhq.net/forums/index.php

I LOVE this look but I am SO LOST!!! Please help?

[RavenBeauty]

*bump* there were no answers and i went ahead in my eagerness and made a mess http://www.thehunterslife.com/forums/

see how its WHITE and blinding??!! I wanted the effect in the link I gave above and this is so NOT it! oh yuk

[RavenBeauty]

well i fixed it to where it isnt as bad.. as it was.. white can be so WHITE LOL but still it is so far from the look i was striving for please hep me

[Kier]

Where you have

style="border:3px outset;"

try replacing that with

style="border:3px solid; border-color: (topColor) (rightColor) (bottomColor) (leftColor);"

... replacing (topColor) with #ACB123 etc...

[X-Fan]

Thanks Kier, looks great!