Welcome Guest [Log In] [Register]
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!

Username:   Password:
Add Reply
Announcement Boxes/Tables
Topic Started: Dec 18 2007, 04:57 PM (15,389 Views)
Nicola Dec 18 2007, 04:57 PM Post #1
Darth Vader's Sewing Instructor

 Announcement Tables/Boxes... or whatever they're called these days.

I will take requests for these, because there are a wide variety of types that people like and I want to make sure that:

  • There is no icky HTML used so people don't get problems later. Disclaimer: I am not 100% perfect with HTML nor do I claim to be, but it always seems to work in all browsers so that's a plus point :P
  • There are no announcement boxes with silly copyrights suck to them. HTML is used all over the web.


I would also like help in the form of:
  • Linking to/listing any different forms of announcement boxes/tables, so that I may add the codes to this topic and add a working preview on my test board's webpage.


Any help in general, I am always open to learning new things and improving my knowledge. Plus, helping others is always good :P

Add Expand/Collapse Feature:
See Tim's post here ^_^

Set the Width:

Find the first line:
Quote:
 
<div class="category">


Add the red:

Quote:
 
<div class="category" style="width: 85%; margin: 10px auto">


Change the width.



Link to Previews of the boxes can be found Here

HTML Codes

Type A:

Code: HTML
 
<div class="category" style="margin: 10px auto">
<table class="cat_head"><tr><td>
<h2>Title Here</h2>
</td></tr></table>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 25%; background: #f6f6f6;" valign="top">Text Here</td>
<td style="width: 50%;" valign="top">Text Here</td>
<td style="width: 25%; background: #f6f6f6;" valign="top">Text Here</td>
</tr>
<tr>
<td class="c_foot" colspan="3" valign="top"></td>
</tr>
</table>
</div>


Type B:

Code: HTML
 
<div class="category" style="margin: 10px auto">
<table class="cat_head"><tr><td>
<h2>Title</h2>
</td></tr></table>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 25%; background: #f6f6f6;" valign="top" rowspan="2">Text Here</td>
<td style="width: 50%;" valign="top">Text Here></td>
<td style="width: 25%; background: #f6f6f6;" valign="top" rowspan="2">Text Here</td>
</tr>
<tr>
<td valign="top">Text here</td>
</tr>
<tr>
<td class="c_foot" colspan="3" valign="top"></td>
</tr>
</table>
</div>


Type C:

Code: HTML
 
<div class="category" style="margin: 10px auto">
<table class="cat_head"><tr><td>
<h2>Title</h2>
</td></tr></table>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 25%; background: #f6f6f6;" valign="top">Text Here</td>
<td style="width: 50%;" valign="top">Text Here></td>
<td style="width: 25%; background: #f6f6f6;" valign="top">Text Here</td>
</tr>
<tr>
<td valign="top" colspan="3">Text here</td>
</tr>
<tr>
<td class="c_foot" colspan="3" valign="top"></td>
</tr>
</table>
</div>


Editing the Code

Obviously, Replace the 'Text here' Instances with your custom content.
Due to the fact that the CSS on ZB is quite specific, using c_desc or c_mark would provide text align effects people might not want. Therefore some cells are styled via the 'td' in the CSS, the others you'll have to add a hex for.

If you want to remove the footer from the table, simply remove the following:
Code: HTML
 
<tr>
<td class="c_foot" colspan="3" valign="top"></td>
</tr>
Edited by Nicola, Mar 8 2008, 05:56 AM.
Offline Profile Quote Post Goto Top
 
WeirdAdz Dec 18 2007, 05:25 PM Post #2
Member Avatar
You cant go through life without saying something is Weird.
[ * * ]
 Wow :) Awesome.

Thanks alot for these.

Also i was wondering.. like in Type B, you have the little strip at the bottom of the middle column.
Is it possible you could make it so it stretches onto all of them?

I might try to add a Member Legend to that.. little strip..

Hmm.. ill try and see.
Edited by WeirdAdz, Dec 18 2007, 05:27 PM.
Offline Profile Quote Post Goto Top
 
Nicola Dec 18 2007, 05:54 PM Post #3
Darth Vader's Sewing Instructor
WeirdAdz
Dec 18 2007, 05:25 PM
Also i was wondering.. like in Type B, you have the little strip at the bottom of the middle column.
Is it possible you could make it so it stretches onto all of them?
Sure, I'll add that as Type C :P
Offline Profile Quote Post Goto Top
 
Fission Dec 18 2007, 06:04 PM Post #4
Member Avatar
I am really awesome
[ * * * ]
 Yay! Now I don't have to spend a bunch of time making one on my own.

You get... three cookies.
Offline Profile Quote Post Goto Top
 
Michael W Dec 18 2007, 06:11 PM Post #5
Member Avatar
MESKOS - Forum Consultant
[ * * ]
 Very nice Nicola, i like the third one.
Will be using this announcement box when i have my board up and running.
Offline Profile Quote Post Goto Top
 
Nicola Dec 18 2007, 06:18 PM Post #6
Darth Vader's Sewing Instructor
Fission
Dec 18 2007, 06:04 PM
Yay! Now I don't have to spend a bunch of time making one on my own.

You get... three cookies.
Only three? Are they good cookies? :D
Offline Profile Quote Post Goto Top
 
ZapTap Dec 18 2007, 06:27 PM Post #7
Member Avatar
Member
[ * * * * ]
 it's one for each box :D I like #2 btw, do we have permission to edit them?
Offline Profile Quote Post Goto Top
 
Fission Dec 18 2007, 06:34 PM Post #8
Member Avatar
I am really awesome
[ * * * ]
 Not only are they good, but they filled with AWESOMEtm chips.

Edit:

Add this in between the <h2> tags of the title of the box to add a collapse feature.

Code:
 

<span class="collapse">
<img alt="-" src="http://209.85.62.24/9/183/0/f5315/collapse.png"/>
</span>
Edited by Fission, Dec 18 2007, 07:47 PM.
Offline Profile Quote Post Goto Top
 
WeirdAdz Dec 19 2007, 02:51 PM Post #9
Member Avatar
You cant go through life without saying something is Weird.
[ * * ]
 Thanks for doing the request :)

I started playing around with it. (I hope thats alright)

Ill edit this once i have finished my task :P

EDIT:

Quote:
 
<div class="category">
<table class="cat_head"><tr><td>
<h2>Announcements</h2>
</td></tr></table>
<table cellpadding="0" cellspacing="0" valign="top">
<tr>
<td style="width: 30%;" valign="top">Text Here</td>
<td style="width: 70%; background: #f6f6f6;" valign="top">Text Here</td>
</tr>
<tr>
<td valign="top" colspan="3"><center><b><u>Member Legend</u></b><br> [<font color='orange'>Admin</font>] [<font color='red'>Moderator</font>] [<font color='blue'>Members</font>] </center></td>
</tr>
<tr>
<td class="c_foot" colspan="3" valign="top"></td>
</tr>
</table>
</div>


Orange = Text you can Edit
Blue = Colours you can Edit

Thanks to Nicola for creating this Announcements Box Type C.

Here is a Print Screen i took so you can see the difference.
Print Screen
Edited by WeirdAdz, Dec 19 2007, 03:16 PM.
Offline Profile Quote Post Goto Top
 
sermon Dec 23 2007, 08:47 AM Post #10
Member
[ * ]
 could you add one with a scrolling middle bit and no pic or a pic at the top and two side bars?
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · User Created Codes · Next Topic »
Add Reply