[pixelboard/vb.org]Category Arrow!

[Sinecure]

I orgionally did this for my new Pixelboard design, but later after Chen decided it looked good,we implemented it at vbulletin.org. So here is how it is done :)

You can download the PSD file to change the images according to your board design. If you don't have photoshop I am sure other programs like Paint Shop pro can open it. Perhaps ask someone who does have it do it for you, (Not me :), Extremely busy :))

An example can be found here:

Download PSD Here:
http://www.pixeljunction.com/misc/cat.zip

Here is the code that you will need to place in your "forumhome_forumbit_level1_nopost" template

The following code is provided that you have a gradient/custom image as your category background.


<tr id="cat">

<td bgcolor="{categorybackcolor}" colspan="10" align="center" valign="middle"><b><img src="{imagesfolder}/cat_sideleft.gif" width="30" height="15" align="middle"></b>
<a href="forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont color="{categoryfontcolor}"><b>$forum[title]</b></normalfont></a> <img src="{imagesfolder}/cat_sideright.gif" width="30" height="15" border="0" align="middle"><br>
<smallfont color="{categoryfontcolor}">$forum[description]</smallfont></td>
</tr>


If you have a sold color for your category background use the following code:


<tr id="cat">

<td bgcolor="{categorybackcolor}" colspan="6" align="center"><img src="{imagesfolder}/cat_left.gif" align="middle">
<a href="forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont color="{categoryfontcolor}"><b>$forum[title]</b></normalfont></a>
<img src="{imagesfolder}/cat_right.gif" align="middle"> <br>
<smallfont color="{categoryfontcolor}">$forum[description]</smallfont></td>
</tr>


Have fun, if you use it, I'd like to see it :)

[jrwap]

This isn't really related to this topic, but I want to thank you for some of your vb/graphics articles on your site. The corners article and graphics were a huge help. Please continue to release these graphics and tutorials cuz I am a complete idiot when it comes to photoshop and graphics in general.

Hmmm did I get carried away with the corners? --> HERE (http://128.241.205.98/njr/index.php) ?

Thanks again,

-JRW

[Sinecure]

Thanks :D
It's great to hear that my hard work is being used and appreciated :D

[mikey8270]

wow. this looks nice :)

ill try it on by board soon

thx alot!
mikey

[Sinecure]

No Problem, a lot of people like this :)

[PsychDrone]

Sweet, but could I ask one thing guys!!!!!! could someone please change the fading arrows, to a black color, I am sure it would only take one of you guys a minute or two!

I tried, but have no what so ever artistic skills, and it looked retarted!!


PLease one of you guys!

I'll give you a cookie!

(and if you could change the background to this color #EEEEFF

I will give you an extra large cookie!!!

PLEASEEEEEEEEEEEEEE!

[Sinecure]

Its really not that hard, just play with the PSD files..

[DBZFanCentral]

I just added it here to the main categories:

http://www.teencribs.com

will be adding to the side stuff later

what do u guys think of the color choice?

[Moonwolf]

Neat mod Sinecure. Thanks for the .psd too, makes it much easier to use!

I've got it up at www.underlight.com

Kathi

[Sinecure]

I luv how you guys used it, looks great :)

[Dalius]

Thanks mNag

I used it a little differently, right here! (http://phorums.phorums.net)

[Sinecure]

Yeah, any image can be used actually :)

[ja5es]

You don't even have to use images, really. You can achive the same effect using some css in your headerinclude.

[Sinecure]

Actually you can't. IF you have Cat BG, you can't do it that way.

[ja5es]

Ah, true. :) I found that out yesterday, actually.

[Xelation]

Hey I can't axcess your psd... why not?... I have a license here.

[Rose]

:( I can't seem to find it, either.

[Moonwolf]

It's not on here, it's on his server and for some reason it's behind a .htaccess file. Having a license here won't make any difference.

Kathi

[Sinecure]

Sorry guys, I .htaccessed that folder because I uploaded part of my test for IT12 and I didn't want the rest of the class stealing it :) hehe

It's removed now ;)

[Sparkz]

Yes, I am picky - just learn to live with it ;)

But... wouldn't it be better to use it with the standard color replacements? :)
That way you only have to update your pictures when you change colors in your style :)



<tr id="cat">
<td bgcolor="#606096" colspan="6" align="center"><img src="images/cat_left.gif" align="middle">
<a href="forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont color="#FFF788"><b>$forum[title]</b></normalfont></a>
<img src="images/cat_right.gif" align="middle"> <br>
<smallfont color="#FFF788">$forum[description]</smallfont></td>
</tr>


EDIT: nm - just noticed that vB parsed the replacements in the message too...

[Steve Machol]

Originally posted by Sparkz
EDIT: nm - just noticed that vB parsed the replacements in the message too... To keep it from parsing, just add a space after '{'.

[Rose]

Sinecure - let's say someone downloaded the images and such when you first released it. But they aren't good at changing the colors to fit their site. Would they be able to get a bit o' help from you? ;)


:D

[centris]

Many thanks, looks good. Could I suggest that the PSD has the layers intact, i.e. arrows on layer1 background colour on 2. I could apply custom colours very easy that way. Lucky, my board is blue so a quick edit and all was well. How did you get those arrows LOL. My inverted V's looked Aurgh.

[Floris]

Originally posted by smachol
To keep it from parsing, just add a space after '{'.

Or for the copy/paste freaks: (add italic tags)

{imagefolder} :D


On-topic again..

.. I just wish they were transparant. I am not a pshop guru, and I think that is why they turned out whole white when I tried to make them transp.

[centris]

Originally posted by Rose
Sinecure - let's say someone downloaded the images and such when you first released it. But they aren't good at changing the colors to fit their site. Would they be able to get a bit o' help from you? ;)


:D

This help Rose. Let me know if you need another colour

[Lanigironu]

I saw it at vB.org and decided to figure out how to do it. I also added another cell for the expand/contractimages, so I could center the categories.

[eGoR]

this is great and cool looking idea
thx man

[Majestic3d]

Where exactly do i placed the code for solid cat bg ?