Category Image

This board has been archived and is no longer accepting new questions. If you have a support question for your ZetaBoard, please visit us at the new support board. Registration is free and easy.

Visit the NEW ZetaBoards Support forum!

Pages:
1
2

Category Image
Topic Started: Mar 17 2008, 02:59 PM (2,944 Views)
rockon1824	Mar 17 2008, 02:59 PM Post #1
Member Posts: 174 Group: Members Member #282 Joined: Dec 1, 2007 What Browser are you using? Firefox 3 ZB Board URL http://forums.music-talk.org	This code places an image between the category h2 and the forums. (Preview) 3/19/08: Fixed it so that the image will go away when the category is collapsed. Put this in Below the Board or Above the Copyright in your Board Template: Quote: <script type="text/javascript"> //<![CDATA[ $(".cat_head:contains('CATEGORY NAME')").next().prepend('<tr><td colspan=\"5\" class=\"c\"><img src=\"IMAGE URL\" alt=\"ALT TEXT\"></td></tr>'); //]]> </script> Change the red text to the name of the category where you want to add the image (i.e. News & Discussion). Change the blue text to the URL of the image you want to use. Change the green text to the text you want to appear in case the image doesn't load. To add a different image for more than one category, just do something like this: Quote: <script type="text/javascript"> //<![CDATA[ $(".cat_head:contains('News & Discussion)").next().prepend('<tr><td colspan=\"5\" class=\"c\"><img src=\"http://209.85.62.24/static/1/logo.png\" alt=\"Zetaboards\"></td></tr>'); $(".cat_head:contains('Staff Forum')").next().prepend('<tr><td colspan=\"5\" class=\"c\"><img src=\"http://www.example.com/img.jpg\" alt=\"Another image\"></td></tr>'); //]]> </script> If you'd like to change the border-color or background of the cell in which the image is situated, add this attribute to the "td" tag: Quote: style=\"border-color:#HEX;background:#HEX;\" Replace the "HEX" with the hex code of the color you want. Example of this: Quote: <script type="text/javascript"> //<![CDATA[ $(".cat_head:contains('News & Discussion)").next().prepend('<tr><td colspan=\"5\" class=\"c\" style=\"background:#000;border-color:#ff0000;\"><img src=\"http://209.85.62.24/static/1/logo.png\" alt=\"Zetaboards\"></td></tr>'); //]]> </script> Edited by rockon1824, Mar 20 2008, 01:08 PM.



Nicola	Mar 17 2008, 03:17 PM Post #2
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	You get a cookie for being the first person to take advantage of .c. Thanks for posting this code for a support topic



DragonHybrid	Mar 17 2008, 03:43 PM Post #3
Member Posts: 49 Group: Members Member #1,520 Joined: Jan 14, 2008 What Browser are you using? Internet Explorer 7	Yes, thank you very much indeed! Absolutely perfect, thank you again.



rockon1824	Mar 17 2008, 03:51 PM Post #4
Member Posts: 174 Group: Members Member #282 Joined: Dec 1, 2007 What Browser are you using? Firefox 3 ZB Board URL http://forums.music-talk.org	^No problem. Nicola You get a cookie for being the first person to take advantage of .c. Thanks for posting this code for a support topic Yeah, I got so excited when I noticed the alignment classes in the CSS. They make a lot of things so much easier, especially for webpages and such.



rockon1824	Mar 19 2008, 07:57 PM Post #5
Member Posts: 174 Group: Members Member #282 Joined: Dec 1, 2007 What Browser are you using? Firefox 3 ZB Board URL http://forums.music-talk.org	I just want to note that I updated the code so that when the category is collapsed, the image disappears too.



Redneck-Melly	Mar 19 2008, 11:45 PM Post #6
Sweet and Innocent (Hides her horns) Posts: 108 Group: Members Member #2,646 Joined: Feb 23, 2008 What Browser are you using? Firefox 1	Hmm, it isn't working for me



carastir	Mar 20 2008, 12:12 AM Post #7
Did you say something? Posts: 300 Group: Members Member #510 Joined: Dec 6, 2007 What Browser are you using? Safari 3 ZB Board URL http://s1.zetaboards.com/lotr_RPG_forums	Very Nice Code!



Viral	Mar 20 2008, 03:05 AM Post #8
i'm stanley nao Posts: 1,374 Group: Members Member #269 Joined: Dec 1, 2007 What Browser are you using? Chrome ZB Board URL http://s1.zetaboards.com/zeta_services	Redneck-Melly:- Make sure you haven't used any quotation marks. If you have, precede them with backslashes " / ".



Redneck-Melly	Mar 20 2008, 11:03 AM Post #9
Sweet and Innocent (Hides her horns) Posts: 108 Group: Members Member #2,646 Joined: Feb 23, 2008 What Browser are you using? Firefox 1	I don't have any click here this is my board, I did exactly llike the instructions said and this is my code. Code: `<script type="text/javascript"> //<![CDATA[ $(".cat_head:contains('The Chapel')").next.prepend('<tr><td colspan=\"5\" class=\"c\"><img src=\"http://i4.photobucket.com/albums/y112/Xx_Melissa_xX/Melly/chapel.png\" alt=\"Chapel\"></td></tr>'); //]]> </script>` Edited by Redneck-Melly, Mar 20 2008, 11:05 AM.



Viral	Mar 20 2008, 11:57 AM Post #10
i'm stanley nao Posts: 1,374 Group: Members Member #269 Joined: Dec 1, 2007 What Browser are you using? Chrome ZB Board URL http://s1.zetaboards.com/zeta_services	Code: HTML `<script type="text/javascript"> //<![CDATA[ $(".cat_head:contains('The Chapel')").next().prepend("<tr><td colspan='5' class='5'><img src='http://i4.photobucket.com/albums/y112/Xx_Melissa_xX/Melly/chapel.png' alt='Chapel'/></td></tr>"); //]]> </script>` I cleaned up the coding a bit and added () after next. It might work, it might not. Edited by Viral, Mar 20 2008, 01:12 PM.



1 user reading this topic (1 Guest and 0 Anonymous)


Go to Next Page
« Previous Topic · User Created Codes · Next Topic »

Pages:
1
2