Lothy's Ramblings

Details Every Theme Designer Should Know

Over the years I've compiled a list of tweaks I made to skins and hopefully made it into something that is useful for anyone designing themes. This will help you catch all the little details that are needed to make sure your themes turn out as complete and attractive as possible. If you have any questions or notice any omissions/mistakes, feel free to leave a comment and I'll address it.

See the last spoiler, Sample CSS and Codes, for examples to go along with the suggestions contained herein.

Obvious Stuff

Spoiler: click to toggle

• Cross-Browser Compatibility - Test the theme in all browsers. IE (with and without compatability view), Firefox, Chrome, Safari, Opera, and mobile phones.
  
• Polls - Start a poll topic with at least 2 polls in it - one you've voted in and one you haven't. Check the way these appear in the topic and if imported to the portal.
  
• Links
  
  • General board links look better without an underline. To make them still obvious, they should be a different color that changes on hover.
    
  • Links in posts (and PMs, post previews, etc) should have underlines to distinguish them from the rest of the text.
    
  • It's not a good idea to have links change font weight / boldness on hover. It changes their size and makes spacing potentially awkward or jumpy as you read it.
  
  
• Text - Make sure text in forum descriptions, links, and posts are made of a color that contrasts the background color! This is necessary to make sure your text is readable, you don't want text that matches the background color too closely or it'll look faded and hard to read.
  
• Blogs, duh! Enable a blog, make at least 21 posts so that you can see the "Newer Entries" and "Older Entries" links at the bottom. Make those links big and obvious. Make a bunch of comments in at least 1 blog post. Use the Sample BBCode Post in the CSS and Codes section below to test BBCode in both the blog entry and the blog comments sections.
  
• Admin CP Login Page
  
• Calendar - Today's date should get a special border. Links and text in the calendar main view are hard-coded with colors you're forced to choose from a list when making the event, so be sure to style link and text specifically and use an !important on the style to overwrite the hard-code.
  
• Portal
  
• FAQ
  
• Edited By... - It's nice to give this a 1px dashed or dotted border to help it stand out.
  
• Background Images and Colors - Be sure to change background colors from the ZB default for pieces of the theme were you add background images. You need both! Also be wary of how those sections look when they stretch. For example, I've seen a number of themes with attractive background images in the td.c_forum sections, but if the forum description gets longer than the background image and whatever space you have that extends beyond the height of the image doesn't look good anymore. Make your images repeatable or have them blend into a good background color.
  
  
• Fluid themes, which adjust widths based on the size of the browser window, are the best practice. There is a place for fixed width themes as well, but go fluid if you can.
  
• If you're feeling really fancy, convert your themes to both platforms: ZetaBoards and InvisionFree!
  
• Page-Unique CSS
  
• Graphics
  
  • Blank Post Buttons (PSD preferable)
    
  • Blank Team Icon (PSD preferable)
    
  • Emoticons, preferably for use with the Cheshire Emoticon System.
    
  • Topic Keys
    
  • Forum Markers
    
  • Etc
  
  
• PM Valid Sender Username Check Colors - Easy to miss.
  
  • td.username_ok {
    background:#6F6;
    color:#000;
    }
    input.username_ok {
    outline:2px solid #080;
    }
    td.username_no {
    background:#E89FFF;
    color:#000;
    }
    input.username_no {
    outline:2px solid red;
    }
    #username_response {
    font-weight:700;
    }

Obscure Stuff

Spoiler: click to toggle

• All BBCode - When skinning for BBCode, think of all the areas that BBCode is used and displayed: posts, post previews, reply page, quotes, sigs, forum rules, board rules, registration rules, PMs, blogs, search results, feeds, portal, calendar events. See "Sample BBCode Test Post" code in the "Sample CSS and Codes" section below for a sample post.
  
  • BBCode in Quotes and Spoilers - If you styled the quote and spoiler boxes to have a background color different from your post background color, you may need to adjust the appearance of other types of BBCode that appear inside those tags. This is particularly applicable to links, hr tags, and tables. Check the font color too. Code blocks may have overflow/text-wrapping/scrolling issues in quotes or spoilers, so examine those cases.
    
  • BBCode in Sigs - See "Sample Test Signature" code in the "Sample CSS and Codes" section below for a sample sig.
    
  • Multi-Level Lists - For unordered lists (the plain [list] tag), you can use your own images for the bullets to add a little extra flavor to your theme. Each level of depth into the list can have its own different image, as far down as you want to define and provide images for it. The deepest level you define will be the style all other levels deeper than that will have as well. In the Sample CSS and Codes spoiler at the bottom you can find the "CSS for BBCode Multi-Level Lists (5 Deep)" section with some examples. Make a post/blog entry with the "Sample BBCode Test Post" code also provided below to test it out.
    
  • Tables - BBCode tables can have a main header (thead th) and a sub-header (tbody th) above the rows of data cells (tbody td). Styling the headers with their own background images is highly recommended. The cells may need border and color adjustments depending on your theme's post colors and styles. The 3 areas are identified for theming to your preferences in the CSS and Codes section.
    
  • HTML - The context colors are hard-coded and don't match many skins. An overwriting of default colors is sometimes necessary to make it visible or readable.
  
  
• Website Maker
  
  • Custom Pages - Theme it and consider creating a basic template in HTML that can be copied and pasted into each page as a good framework for adding content - the pages are kind of plain by default. Be careful with the HTML you use for the templates, it will have to be flexible enough to look good in all different themes on the board. Keep it basic, use divs for everything so that they don't show up in other themes that aren't made to go with your template.
    
  • Links added to submenu. If you have a lot of Custom Pages showing or some of their page titles have long text, these links will start to wrap and possibly break your theme. Try and make the submenu section fluid.
  
  
• Search Results - Run a search and look at how the results are spaced and styled. This section is in need of love.
  
• Hidden Posts/Topics - If a member is put on mod queue, when they post it doesn't get sent out right away. Only staff members are able to see queued posts, which they need to approve, and until then they are highlighted by being a different, bright color. I make mine hot pink so that there's no way I'll miss them.
  
  • .hidden td, .hidden dl {background:#E89FFF !important; color:#000}
    .hidden a, .c_cat-replies small, .c_cat-replies small {color:red; font-weight:bold}
  
  
• #foot_links - Help make those tracking options visible!
  
• Global Announcements - #announcements_list, #announcements_head. This entire section needs some love to make it noticeable, it's very plain and relatively small. Styling this very differently from the other sections of the forum view makes it stand out better. This is another opportunity to get creative and make your theme more varied. I like to make it like a super-header for the topic listing and remove any margin space between the the announcements section and forum listing section, make the header font size bigger and centered, etc.
  
• Pagination - The links in forums and topics that tell you what page you're on and how many pages there are total. The different types of styles allow you to distinguish between the current (active) page and inactive pages. The options should change noticeably on hover so that you know it's clickable. It helps to separate them out with their own border, background color, and text color.
  
• Inbox - Alternating rows can have different background colors. Further still, unread messages can have a different background color.
  
  
• Banners - Please, please, PLEASE distribute copies of the banner image created with the theme in a format that allows people to edit the text to match their site's name instead of the theme name. For example, if you use Photoshop you should share a PSD of the banner that has the main image flattened into one layer, and one a text layer on top of that for the site's name -- complete with all styles and effects and colors applied in the stock version. Or make the banner so that any text put into the banner section of the ACP will appear there, already well-styled. The stock banner does a lot to sell the theme's look, and when people can't use it in their own boards because it's not editable, it really takes away from the theme.
  
  
• Find All Posts By Member - By default, the display of this page wastes a lot of horizontal space and creates excessive scrolling. To make this easier to browse, make the following changes to your CSS. Some additional color adjustments may be needed when you're done. If you need help, shoot me a message!
  
  • Locate the following pieces of existing CSS. Delete the parts in red, add the parts in green.
    
    • #files_upload input, .pm .row1 a, .pm .row2 a, #ucp_gallery button img, #findposts td a {
      display: block;
      }
      
      
    • When you find this one, move it to the very end of your CSS.
      #findposts .c_mark {
      font-size:200%;
      font-weight:700;
      vertical-align:top;
      clear:left;
      border-right:1px solid !important
      }
    
    
  • Add this to the bottom of your CSS just before the #findposts .c_mark section that you moved.
    
    • /** Find All Posts By Member Section ***/
      #findposts tbody {
      border:1px solid;
      }
      #findposts th.c_sep {
      clear:both;
      }
      #findposts tr.row1,#findposts tr.row2 {
      display:inline-block;
      border:none;
      }
      #findposts tr.row1 td,#findposts tr.row2 td {
      width:auto;
      display:inline-block;
      border:none;
      padding:0px 10px;
      }
  
  
• Portal Status Updates Block - This data feed's default layout is a single row per status with two columns. The first column is for the name of the status-poster on the left, and the status itself is in the second column, on the right. When this feed is displayed like this on the left or right side of the portal it severely cramps the content of both cells and can cause it to wrap in unpleasant ways. This will change the way these sections are displayed so that they have plenty of room to breathe.
  
  • #portal_l #status_updates td,#portal_r #status_updates td {
    display:block;
    border-top:0px;
    }
    #portal_l #status_updates .c_desc,#portal_r #status_updates .c_desc {
    text-align:left;
    width:auto;
    border-top:1px;
    }

Default Theme Bugs to Correct

Spoiler: click to toggle

• Code BBCode width/wrapping. Add the following declarations to your code{} style.
  
  • overflow:auto;
    white-space:pre;
    max-height:10em
  
  
• Chrome signature overflow problem. If you browse the internet using Google Chrome, you'll notice sig content overflowing its container and spilling over the parts of the topic below it. Place this code in ACP -> Board Themes -> Board Template -> Javascripts to fix it.
  
  • <style type="text/CSS">
    /* Fix Chrome brower signature placement problem */
    td.c_sig,td.c_nosig {
    height: .5%;
    }
    </style>
  
  
• Avatar/user info column width - I believe there was a problem with avatar alignments if a member had either a member title or a group icon, but I'm not quite sure what the issue was anymore. It was either fixed in ZetaBoards or I fixed manually with CSS and I can't remember what the solution was... post a comment if know what this was and can remind me, or if you're seeing something weird happening to this piece of your board and we'll figure it out.
  
• BBCode lists in blog comments unintentionally get the "li.odd" class applied to them when it's intended to only apply to every other comment block. When you theme your blog comments li.odd, define the style more specifically so that it doesn't affect child lists.
  
  
• Cell overflow in column layouts. Pages like the Portal and Blog Entries have columns of information to the left and/or right of the main content. In these scenarios, if the main content column is a different length from the side columns (which is almost always) and has a BBCode tag like [hr] or [table] in it, it's going to get stretched in weird ways. You can stop this by hiding the overflow by putting the following declaration at the bottom of your CSS, which captures the parts of ZB boards most susceptible to the issue:
  
  #blog_main,div.portal_content {
  overflow:hidden;
  }

Test Board Needs - Every good test board needs to display certain features. Here are a few tips to display them.

Spoiler: click to toggle

• Notice Boxes - Put sample notices boxes in the board template of your test board so you remember to theme these. Copies are in the CSS and Codes section at the end of this document. The error boxes should have some red or other color in them to make them distinct from the pain info boxes. Remember to theme the text and link colors.
  
• PM Toast - Put a sample PM Toast in the board template of your test board. Copies are in the CSS and Codes section at the end of this document. This section is a great opportunity to get creative. I really enjoy the themes that make this more than just a box of info by adding some good graphics. A great example is the Incendio theme that makes it an envelope being held by an owl.
  
• Shoutbox - Enable the shoutbox on the board home and in the portal and make it visible to guests. Editing the .odd color for the main page doesn't affect the portal page, so be sure to capture both.
  
• Forum Rules - Turn on "show full rules" and give the rules section of a forum a title and some content. Try posting the BBCode Test Post in it.
  
• A test topic with sample BBCode should be added.
  
• Post a pinned topic, a closed topic, an open topic, a poll (multiple polls in one topic), a hot topic, a global announcement, a topic with more than one page, and fill a forum with more than one page worth of topics.
  
• Have a regular forum, subforums, sub-subforums, a redirect forum, and a read-only forum. Enable the trash forum and one of each type of special data feed forum.
  
• Include a test sig on your main account that tests BBCode etc.
  
• Guests should have a forum to post in.
  
• New registrations should be allowed so people can see members-only sections like the PM inbox.
  
• A test custom page with plain text in it.
  
• A test blog post visible to guests should be shown. Include BBCode in the blog post. Add several blog comments to it.
  
• Import topics from a forum into the portal. Show a poll in the portal. Add custom portal blocks. Add all the different types of data feeds and content block types.

Release Considerations - To allow users of your theme the most flexibility, these are the following things that should be allowed to be customized in your skin. Also includes miscellaneous advice for posting your theme release.

Spoiler: click to toggle

• Text color.
  
• Font size.
  
• Font family.
  
• Link colors (hover too).
  
• Link styles (underline etc).
  
• BBCode styles. Tables, quotes, and spoilers are pretty powerful tools that can be used in some very creative ways, which may require customizing BBCode appearances to serve the purposes of individual boards.
  
• Custom page theming. .site_wrapper should have a basic background, text color, and border, but be open to total change because of how flexible the HTML is for Custom Pages.
  
• Room should always be allowed for the user to change the way the theme affects custom pieces of the board.
  
  • I like to add CSS on my boards that limits the max size of images in posts and sigs, for example.
    
  • I also use http://www.cbox.ws/ shout boxes on my boards and prefer to have 2 copies of every theme - 1 with the CBox in its theme layout and 1 without any CBox at all in case they don't want the distraction or the CBox is dysfunctioning or too taxing on resources. Therefore, I need to be allowed to change the layout some.
  
  
• Keep all your themes on one test board. Link to the theme on that test board using the setskin link.
  
  • The setskin link looks like this: http://z#.zetaboards.com/index/?setskin=#######
    The #'s are replaced with a specific number that identifies the individual theme you're going for.
    You can find that number in your ACP by hovering over the "View Full Theme Preview" link and grabbing the ID number shown after &theme=
    Example: http://z#.zetaboards.com/tasks/?task=12&theme=1200114
    Becomes: http://z#.zetaboards.com/index/?setskin=1200114

Sample CSS and Codes

Code: CSS for BBCode Multi-Level Lists (5 Deep)

 

/*** BBCode Lists Level 1 ***/
.c_post ul,#c_post-preview ul,.search_results_post ul,#forum_rules ul,.meta_box ul,.c_sig ul,#bbcode_examples ul,#blog_main ul,#reg_rules_intro ul,#topic_review ul,#board_feed ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p319821/tri.gif); /*** Replace with an image URL of your choosing. ***/
margin-left:10px;
}

/*** BBCode Lists Level 2 ***/
.c_post ul ul,#c_post-preview ul ul,.search_results_post ul ul,#forum_rules ul ul,.meta_box ul ul,.c_sig ul ul,#bbcode_examples ul ul,#blog_main ul ul,#reg_rules_intro ul ul,#topic_review ul ul,#board_feed ul ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p320286/arrow_right.gif); /*** Replace with an image URL of your choosing. ***/
}

/*** BBCode Lists Level 3 ***/
.c_post ul ul ul,#c_post-preview ul ul ul,.search_results_post ul ul ul,#forum_rules ul ul ul,.meta_box ul ul ul,.c_sig ul ul ul,#bbcode_examples ul ul ul,#blog_main ul ul ul,#reg_rules_intro ul ul ul,#topic_review ul ul ul,#board_feed ul ul ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p326349/menu_icon.gif); /*** Replace with an image URL of your choosing. ***/
}

/*** BBCode Lists Level 4 ***/
.c_post ul ul ul ul,#c_post-preview ul ul ul ul,.search_results_post ul ul ul ul,#forum_rules ul ul ul ul,.meta_box ul ul ul ul,.c_sig ul ul ul ul,#bbcode_examples ul ul ul ul,#blog_main ul ul ul ul,#reg_rules_intro ul ul ul ul,#topic_review ul ul ul ul,#board_feed ul ul ul ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p326350/pip.gif); /*** Replace with an image URL of your choosing. ***/
}

/*** BBCode Lists Level 5 ***/
.c_post ul ul ul ul ul,#c_post-preview ul ul ul ul ul,.search_results_post ul ul ul ul ul,#forum_rules ul ul ul ul ul,.meta_box ul ul ul ul ul,.c_sig ul ul ul ul ul,#bbcode_examples ul ul ul ul ul,#blog_main ul ul ul ul ul,#reg_rules_intro ul ul ul ul ul,#topic_review ul ul ul ul ul,#board_feed ul ul ul ul ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p326354/upload.gif); /*** Replace with an image URL of your choosing. ***/
}

/*** If you want to add another level beyond 5, copy the last level and add another "ul" into all the declarations on that line. Continue the pattern for additional levels if you have enough images. For fewer levels, delete the extra ones you don't need. ***/

Code: CSS for BBCode Tables

 

/*** BBCode Table Header TH ***/
.topic thead th,.posting thead th,.meta_box thead th,.search_results_post thead th,#forum_rules thead th,#c_post-preview thead th,.c_sig thead th,#conversation thead th,#blog_main thead th,#reg_rules_intro thead th,#topic_review tbody thead th {
background:url(http://z3.ifrm.com/0/161/0/p319823/linksbar_bg.gif) repeat-x; /*** Change this URL to your own theme header image. ***/
height:53px; /*** Change height of this to match height of your header image. May require adjustments. ***/
padding:3px 5px; /*** Adjust or remove this as necessary for your background image to display in full. ***/
}

/*** BBCode Table Body TH ***/
.topic tbody th,.posting tbody th,.meta_box tbody th,.search_results_post tbody th,#forum_rules tbody th,#c_post-preview tbody th,.c_sig tbody th,#conversation tbody th,#blog_main tbody th,#reg_rules_intro tbody th,#topic_review tbody th {
background:url(http://z3.ifrm.com/0/161/0/p322576/bbtable_th_bot.jpg) repeat-x bottom; /*** Change this URL to your own theme sub-header image. ***/
padding:10px 0px; /*** Adjust or remove this as necessary for your background image to display in full. ***/
}

/*** BBCode Table Body TD ***/
.topic tbody td,.posting tbody td,.meta_box tbody td,.search_results_post tbody td,#forum_rules tbody td,#c_post-preview tbody td,.c_sig tbody td,#conversation tbody td,#blog_main tbody td,#reg_rules_intro tbody td,#topic_review tbody td {
background:#000; /*** Change color to work with your theme. ***/
padding:3px;
}

/*** BBCode Table Font Color. Only necessary if your blog colors don't match with your topic post colors. ***/
.blog_entry table {
color:#E5C71B; /*** Change color to match your theme's post text color. ***/
}

Code: Sample PM Toast (Above the Copyright)

 

<div id="pmtoast">
<a href="/msg/" id="pmlink">
<big>New Sample Message Title</big>
<small>From:</small> <strong>Someone With A Long Username</strong><br />
<small>Subject:</small> <strong>The Subject Is Kind Of Long</strong><br />
<small>Sent:</small> <strong>One minute ago</strong>
</a>
<a id="pmclose" href="#">Close</a>
</div>

Code: Sample Notices (Above the Board)

 

<dl class="notice info">
<dt>Notice Info</dt>
<dd>These are sample notice bars.</dd>
</dl>
<dl class="notice error">
<dt>Test - A Long Notice Error [Ignore]</dt>
<dd>The password you entered is not correct. Please note that all passwords are case sensitive. This means ABCD is not the same as AbcD.</dd>
</dl>
<dl class="notice">
<dt>The Longest Notice Message</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.</dd>
</dl>

Code: Sample BBCode Test Post

 

[b]A bold sentence[/b]
[i]Italics[/i]
[u]underline[/u]
I want one [s]million[/s] billion dollars
[sub]sub[/sub]marine
x[sup]2[/sup]
[big]big[/big] [big][big]bigger[/big][/big]
[color=green]Green text[/color]
[bgcolor=lightgreen]A background for text[/bgcolor]
[border=red,1,solid]bordered[/border] [border=blue,3,solid]bordered[/border] [border=green,1,dotted]bordered[/border]
[center]centered[/center]
[right]right aligned[/right]
[quote]Blast off!
[hr]
It's party time![/quote]
[url=http://if.invisionfree.com]ZetaBoards Support[/url]
[img]http://z3.ifrm.com/static/avatars/107.png[/img]
[email]user@example.com[/email]
[flash=250,210]http://www.youtube.com/v/z7SeHqxOVYc[/flash]

[me] can speak in 3rd person
A line that[hr]divides
You may want to hide something from accidental viewing:
[spoiler]or the secret may be spoiled[/spoiler]

[size=1]Size 1.[/size]
[size=2]Size 2. "Default"[/size]
[size=4]Size 4.[/size]
[size=5]Size 5.[/size]
[size=7]Size 7.[/size]

v There's members-only text here. v
[member]Members-only text.[/member]
^ There's members-only text here. ^

v There's staff-only text here. v
[staff]Staff-Only text.[/staff]
^ There's staff-only text here. ^

This has a footnote.[note]Sort of.[/note]

[table=2,Table BBCode Test,1]Sub-Title 1[c][url=http://if.invisionfree.com]ZetaBoards Support[/url][c]Cell 1.[c][url=http://if.invisionfree.com]ZetaBoards Support[/url][c]Row 2.
This.
Row.
Is.
Tall.[c]Row 2, Cell 2
[table=2]Sub-Table[c]Sub-Table[c]Sub-Table[c]Sub-Table[/table][/table]

[quote][table=2,Table BBCode Test,1]Sub-Title 1[c][url=http://if.invisionfree.com]ZetaBoards Support[/url][c]Cell 1.[c][url=http://if.invisionfree.com]ZetaBoards Support[/url][c]Row 2.
This.
Row.
Is.
Tall.[c]Row 2, Cell 2
[table=2]Sub-Table[c]Sub-Table[c]Sub-Table[c]Sub-Table[/table][/table][/quote]

[list][*]1st level[*]1st level
[list][*]2nd level[*]2nd level
[list][*]3rd level[*]3rd level
[list][*]4th level[*]4th level
[list][*]5th level[*]5th level
[list][*]Unspecified Level[*]Unspecified level[/list]
[*]Continued[*]Continued[/list]
[*]Continued[*]Continued[/list]
[*]Continued[*]Continued[/list]
[*]Continued[*]Continued[/list]
[*]Continued[*]Continued[/list]

[list=1][*]Item 1
[*]Item 2
[list][*]Item a
[*]Item b[/list][/list]

[list=I][*]Item I
[*]Item II
[list=i][*]Item i
[*]Item ii[/list][/list]

[list=A][*]Item A
[*]Item B
[list=a][*]Item a
[*]Item b[/list][/list]

[html]<html>
<head>
<title>ZetaBoards Support</title>
</head>
<body>
<p class="intro">Welcome</p>
<body>
</html>[/html]

[code]/*** BBCode Lists Level 1 ***/
.c_post ul,#c_post-preview ul,.search_results_post ul,#forum_rules ul,.meta_box ul,.c_sig ul,#bbcode_examples ul,#blog_main ul,#reg_rules_intro ul,#topic_review ul,#board_feed ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p319821/tri.gif); /*** Replace with an image URL of your choosing. ***/
margin-left:10px;
}

/*** BBCode Lists Level 2 ***/
.c_post ul ul,#c_post-preview ul ul,.search_results_post ul ul,#forum_rules ul ul,.meta_box ul ul,.c_sig ul ul,#bbcode_examples ul ul,#blog_main ul ul,#reg_rules_intro ul ul,#topic_review ul ul,#board_feed ul ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p320286/arrow_right.gif); /*** Replace with an image URL of your choosing. ***/
}[/code]

[quote][code]/*** BBCode Lists Level 1 ***/
.c_post ul,#c_post-preview ul,.search_results_post ul,#forum_rules ul,.meta_box ul,.c_sig ul,#bbcode_examples ul,#blog_main ul,#reg_rules_intro ul,#topic_review ul,#board_feed ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p319821/tri.gif); /*** Replace with an image URL of your choosing. ***/
margin-left:10px;
}

/*** BBCode Lists Level 2 ***/
.c_post ul ul,#c_post-preview ul ul,.search_results_post ul ul,#forum_rules ul ul,.meta_box ul ul,.c_sig ul ul,#bbcode_examples ul ul,#blog_main ul ul,#reg_rules_intro ul ul,#topic_review ul ul,#board_feed ul ul {
list-style-image:url(http://z3.ifrm.com/0/161/0/p320286/arrow_right.gif); /*** Replace with an image URL of your choosing. ***/
}[/code][/quote]

Code: Sample Test Signature

 

[url=http://support.zathyus.com]ZetaBoards Support[/url]
A line that[hr]divides
You may want to hide something from accidental viewing. In this test case, you should look at what's in each of these spoilers and make sure it looks good in your theme!
[spoiler]Like this horrendously long sig table test.

[table=4,Table BBCode Test,1]Column 1 TH[c]Column 2 TH[c]Column 3 TH[c]Column 4 TH
[c]Cell 1 (TD)[c][url=http://support.zathyus.com]ZetaBoards Support[/url][c]blank[c]test
[c]This.
Row.
Is.
Really.
Really.
Tall.
[c][table=2]Sub-Table[c]Sub-Table[c]Sub-Table[c]Sub-Table[/table]
[c][table=2,Table with thead th]Sub-Table[c]Sub-Table[c]Sub-Table[c]Sub-Table[/table]
[c][table=2,Table with thead and tbody th,1]Sub-Table[c]Sub-Table[c]Sub-Table[c]Sub-Table[/table]
[c]You can have a row without enough columns. That's ok![c]Pay attention to the background/borders of the missing cell area. ---->
[/table]

[quote][table=4,Table BBCode in Quote Test,1]Column 1 TH[c]Column 2 TH[c]Column 3 TH[c]Column 4 TH
[c]Cell 1 (TD)[c][url=http://support.zathyus.com]ZetaBoards Support[/url][c]blank[c]test
[c]This.
Row.
Is.
Really.
Really.
Tall.
[c][table=2]Sub-Table[c]Sub-Table[c]Sub-Table[c]Sub-Table[/table]
[c][table=2,Table with thead th]Sub-Table[c]Sub-Table[c]Sub-Table[c]Sub-Table[/table]
[c][table=2,Table with thead and tbody th,1]Sub-Table[c]Sub-Table[c]Sub-Table[c]Sub-Table[/table]
[c]You can have a row without enough columns. That's ok![c]Pay attention to the background/borders of the missing cell area. ---->
[/table][/quote]

[/spoiler]

[spoiler][quote][quote]Party time[/quote]
[url=http://support.zathyus.com]ZetaBoards Support[/url]
A line that[hr]divides
You may want to hide something from accidental viewing:
[spoiler]or the secret may be spoiled[/spoiler][/quote]

1. Comment by DaPizzaMan, Sep 10 2015, 11:46 PM

   Just nitpicking, but there is no Info "meta box." It's just the Notice and Error boxes.

2. Comment by Lothlómendil, Sep 23 2015, 08:22 PM

   There are 3 classes provided for notice boxes: .notice, .error, and .info. See the following code copied from the ZB source for reference. I'm presuming that there could be a type of notice box that only has a single class, .notice, which could differ from a notice box that had .info or .error styles applied to it. I test all 3 possible cases with sample code in the wrappers, it's easier than spending time testing every function on the board looking for the case where only .notice is used. I think I first noticed this quirk several years ago when making a theme and saw an "inexplicable" difference in one of the notice boxes. I can't be certain after all this time, but I'd rather be safe than sorry. Either way, how you style these 3 classes can have varying effects that need examined.
   

   Code:

    

   <dl class="notice info">
<dt>Notice</dt>
<dd>Blog entry edited</dd>
</dl>
<dl class="notice error">
<dt>Error</dt>
<dd>The password you entered is not correct. Please note that all passwords are case sensitive. This means ABCD is not the same as AbcD.</dd>
</dl>

3. Add new comment:

   Post Comment