beveled table cells

[PhOeNiX LanDinG]

I've seen a look to the table cells, for example at http://forums.gaminguru.com

Look at the category bar, and the "forum" "posts" etc bar... I want to do it across the whole board.

How in gods name can i do that, i love it.

PL

[SaintDog]

Use table backgrounds, there are some tutorials for it over at vBulletin.com I believe, try doing a search there and you should be able to find out how to do them, it is not very hard to do them at all (probably take about 2 minutes).

SaintDog

[Mr. X]

I think I saw somewhere that you can use CSS for the effect, but not really sure.

I do with with a backround image like in the above post suggests.

#xxxxxx" background="{ imagesfolder }/image.gif

Put that in the Styles section of AdminCP, for where you want it, i.e. Catagories or Table Headers etc. Replace #xxxxxx with a hex color. Remove the spaces from { imagesfolder }.

I made a 4px wide, 40px tall image in Photoshop for my bars, then uploaded to my images dir. { imagesfolder } points to wherever you've defined your images path in the Style section btw.

[werehere]

Yes, you can use CSS for bevels on TD tags. You cannot do all beveled effects with CSS, but you can do a lot of them. You can also combine CSS with a background graphic to get the best effect! :D

[SaintDog]

I know what you are talking about Mr. X, but for me I had to use the below, because I had tried what you showed above and it would not work with 2.2.5.

"#000000" background="background.gif"

Notice the extra " before the #

SaintDog

[Crazy Mofo]

Originally posted by SaintDog
I know what you are talking about Mr. X, but for me I had to use the below, because I had tried what you showed above and it would not work with 2.2.5.

"#000000" background="background.gif"

Notice the extra " before the #

SaintDog

works fine on mine and imm 2.2.5 :laugh: :lick:

[Unknown553]

something like this

<td style="border-color: {tablebordercolor} {tablebordercolor} {tablebordercolor} {tablebordercolor}; padding-top: 2px;
padding-right: 2px; padding-bottom: 2px; padding-left: 2px; border-style: outset; border-top-width: 1px;">

But I think you'd have to put in in every table cell, or put it in the headinclue and add class="3d" into all the td tags...

[Admin]

Originally posted by SaintDog
I know what you are talking about Mr. X, but for me I had to use the below, because I had tried what you showed above and it would not work with 2.2.5.

"#000000" background="background.gif"

Notice the extra " before the #

SaintDog
You don't need the first and last quotation marsk.

[Mathiau]

which templates can i find the

Forum Posts Threads Last Post Moderator


in? searched, adn searched, but not having much luck :(

[PhOeNiX LanDinG]

I used:


<td class="3d"style="border-color: #0A293E #0A293E #0A293E #0A293E; padding-top: 2px;
padding-right: 2px; padding-bottom: 2px; padding-left: 2px; border-style: outset; border-top-width: 1px;">


however, you must add that info in after the bgcolor="#whatever" in the cell properties. If you have bgcolor="#...." after it, it wouldn't work for some reason. All other cell properties were fine, just bgcolor act weird.

Thanks for the help everyone.

PL

[Scrub]

Originally posted by Mathiau
which templates can i find the

Forum Posts Threads Last Post Moderator


in? searched, adn searched, but not having much luck :(


You can find that in the forumhome template. :)

[Unknown553]

Originally posted by PhOeNiX LanDinG
I used:


<td class="3d"style="border-color: #0A293E #0A293E #0A293E #0A293E; padding-top: 2px;
padding-right: 2px; padding-bottom: 2px; padding-left: 2px; border-style: outset; border-top-width: 1px;">


however, you must add that info in after the bgcolor="#whatever" in the cell properties. If you have bgcolor="#...." after it, it wouldn't work for some reason. All other cell properties were fine, just bgcolor act weird.

Thanks for the help everyone.

PL
You don't need both class="3d" and style="blahblah"...In your headinclude template, just add all the style attributes...

.3d {border-color: #0A293E #0A293E #0A293E #0A293E; padding-top: 2px;
padding-right: 2px; padding-bottom: 2px; padding-left: 2px; border-style: outset; border-top-width: 1px;}

Then just keep class="3d" and remove everything after it...

[BigJohnson]

Can someone explain this alot more because i am so lost right now. Can someone make a tutorial saying exactly what to do. All i need to know is a way to make it work. It doesnt matter which way it is done. Just that it works. Thanks. I am looking forward to this one so much because UBB has and VB blows UBB away but UBB advances because of this hack. Thanks guys.

[BigJohnson]

anyone out there please help me I dont even no where to start and i am like the newest newbie you will ever find. lol. Please tell me what to do thanks.

[BigJohnson]

Ok once again please

[werehere]

Originally posted by BigJohnson
Can someone explain this alot more because i am so lost right now. Can someone make a tutorial saying exactly what to do. All i need to know is a way to make it work. It doesnt matter which way it is done. Just that it works. Thanks. I am looking forward to this one so much because UBB has and VB blows UBB away but UBB advances because of this hack. Thanks guys.

All of the info is there for you to work from, now it may be time for you to research just the basic usage of CSS and HTML, then you could do this yourself. It is hard when someone wants some elements of design, but does not want to learn even the most basic so they can implement it themselves. The code was given, and it is just like using any other CSS out there, so I would guess that there are probably many tutorials out there on some HTML or CSS sites.

So it may be time for you to look around for basic usages of CSS now that others have provided the code for you to use. ;)

I am sorry if that sounded rude, but this happens all the time, and the code and explainations on how to use the code are already in this thread, so maybe it is time for you to do some basic research on how to use it is all. :)