The theme menu and how to get on it

As of today there is a new Settings page with a theme menu at the top of it. If you want your stylesheets to appear in this menu, you need to go to the stylesheet page and check the 'Include in theme menu' checkbox. This checkbox will not be shown if your stylesheet still needs updating to adapt it to the no longer terribly recent changes in the site's html. Don't forget: your users are getting an automatically updated version anyway.

The softlink color gradient

Directly below the menu are two options: 'Show the softlink color gradient' ... 'using colors from my theme'. If users check the first and uncheck the second, they continue to get the inline background colours. If you style #softlinks td, they won't see them. That would be unfriendly of you.

If they check both options, then the softlink tds are given ids from sl1 to sl64 and the colours come from rules added to your stylesheet when it is served. Any left-over cells then get the class slend. The starting colour for the gradient will be taken from the first rule found in your stylesheet for #sl1, #mainbody, or body, and the final colour from the first rule for #sl64, .slend, or .oddrow. Only colours defined in #xxx or #xxxxxx format will be recognised. Feel free to improve this if you really need to use fancy colour names or rgb(). If no starting color is found, white will be used; the default final colour is a mid grey.

A non-exhaustive test suggests the gradient already works well in most stylesheets. If anyone feels the need to style #sl1 to #sl64 individually, let me know.

About this page

Welcome to Zenmastery, the demonstration node where you can view staff-only options to style them properly in your Zen Stylesheet. The nodelets below are encased in a DIV called id="zenmastery_sidebar". This will allow you to tinker with a false sidebar DIV without interfering with the real sidebar on your layout.

For your convenience, the HTML has been cleaned up a bit to make it easier to find the IDs and Classes you need to reference. All forms are still intact but they are neutered, they can't actually set or change anything. All links go to the homepage. These are for demonstration purposes only.

Also see The Nodelets for a list of all the available nodelets that are not currently in your sidebar.

New Writeups

The staff-only options in New Writeups are:

R:-5

Signals that a writeup currently has a negative rep (Not given a class)

(h?)

Link to "hide" a writeup from New Writeups. Class: 'hide'

(H: un-h!)

Link to "unhide" a writeup from new Writeups. Class: 'hide'

(X)

Marks writeups that have been nuked (Not given a class)

(The same controls are also present in the New Logs nodelet.)

Master Control

Master Control is a staff-only nodelet. Most of it is self-explanatory, but the Node Notes are a special section that allows staff members to add commentary to a node to coordinate their efforts so they don't accidentally work at cross-purposes to each other. For example one editor might note "I'm working with the author to improve this writeup." so another editor doesn't nuke it.

Front Page News/weblogs

Staff may be shown who linked a writeup or other document to a weblog or to the front page news if that person is not the author of the document. Imaginatively enough, the information is in a div with class 'linkedby'. They also get a link allowing them to remove the document from the weblog, with class 'remove'.

New Writeups

1 5 10 15 20 25 30 40 No junk

• writeup1 (idea) by rootbeer277 (h?)
• writeup2 (fiction) by rootbeer277 (h?)
• writeup3 (person) by rootbeer277 (h?)
• writeup4 (log) by rootbeer277 (h?)
• writeup5 (person) by rootbeer277 R:-1 (h?)
• writeup6 (person) by rootbeer277 R:-1 (h?)
• writeup7 (idea) by rootbeer277 R:-1 (h?)
• writeup8 (person) by rootbeer277 (h?)
• writeup9 (person) by rootbeer277 (H: un-h!) (X)
• writeup10 (review) by rootbeer277 (h?)
• writeup11 (dream) by rootbeer277 R:-1 (H: un-h!)
• writeup12 (idea) by rootbeer277 (h?)

(more)

Master Control

Node Info

node_id: 1986688 nodetype: superdocnolinks Server: web5

Name: ID:

Node Toolset

• Clone Node
• Edit Code
• Node XML
• Document Node?
• 
  
• Delete Node

Node Notes (0)

2009-05-15 rootbeer277: Test chamber for zenmasters to style staff features

- Admin

• Edit These E2 Titles
• Admin HOWTO

- CE

• 25 | Everything New Nodes
• E2 Nuke Request
• Nodeshells
• Node Row
• Recent Node Notes
• Your insured writeups
• Make Unvotable
• Blind Voting Booth
• Group discussions
• Editor Log: May 2009
• The Oracle

Welcome to Zenmastery by rootbeer277 Wed May 27 2009 at 9:56:10 linked by DonJaime remove

Content goes here.

Zenmastery now Updated! by DonJaime Sun May 17 2009 at 4:00:50 remove

Content goes here.

We (mainly me because no-one else finds it very interesting) are cleaning up the html on this site. These are the changes made so far and some ideas. Comments welcome. The intention while fixing things is to try to avoid breaking them, and if stylesheets would break as a result of the changes, to give due notice so that authors can fix them in advance. Ideally we will get the site into a state in which a stylesheet that works for the front page will style the entire site acceptably. Some time soon I'll start documenting the resulting structure here, as well.

Implemented Changes

Change	Possible CSS response(s)	Notes
New id pagebody for, umm, the body of a page. Comes after #pageheader and before the stuff that still needs tidying up. The element it is on may vary depending on the page, but will probably always be form or div.		So far only implemented on e2nodes and writeups and pages consisting only of a form.
There are pop-up widgets about. They have class widget and default styling provided by basesheet. Their openers are anchors with class showwidget, and their closers are anchors with class showwidget hidewidget. If scripting is not available, these anchors are links. If it is, the openers acquire the additional class closed when they are closed and open when they are open.		The default little triangles are matched to Kernel Blue colors. You may prefer to make your own.
#pageheader usually includes an ul with class topic actions containing things you can do to an entire page.	You probably don't want this to look like a list...	... so autofix will add rules to your stylesheet to make it look like the other stuff up there.
Firmlinks, node creator, and 'is also a:' information, formerly in h2 elements with class topic is now in divs. Same class.	Waste less energy making them not look like headings.
New div with id pageheader after the page title. Contains any firmlinks, node creator, and 'is also a:' information. This also contains the bookmark, cool, favorite and weblog links that will be removed from the epicenter (also in a div class topic).	Whatever you want.	Make sure that the p with id weblogs currently in the epicenter has an opaque background, since it will turn into a pop-up widget when moved.
New class action for links that do something rather than just going somewhere (bookmark, etc).	Whatever you want.
The div elements with class contentinfo also have class contentheader when before a content div and contentfooter when after it.	Simpler distinctions in styling in different contexts.
Nodelets have an id based on their name, not on their id.		Use the autofix feature on the stylesheet edit page to adapt to this and many other changes.
Consistent use of markup for title, type and author in Cream of the Cool, Frontpage News/Weblogs and New Writeups.	Style .title .author and .author once.	The autofix feature will cater for many of these changes. It will disable some rules in New Writeups by adding #DISABLED: you probably don't want them any more.
New class item on div around writeups, Cream of the Cool and weblog/frontpage news items. Replaces .cotc_item, .wl_item and .writeup.	Use for consistent rendering of all content, or use .writeuppage .item, #creamofthecool .item, .weblog .item if you want them different.	Autofixed. Eventually to be applied to all wrappers around contentinfo and content.
Replaced nodelet_xxx ids with user-friendly ids.	#nodelettitlelowercasenospaces	autofixed.
rootbeer277 is working on a new improved chatbox with a lot of fun new markup.	Read this
Most single-celled tables (to confine the effects of bad mark-up) have been removed. The rest will follow.	Don't style these tables.
Class writeupmeta has been replaced with contentinfo in the New Writeups nodelet	.nodelet .contentinfo
Id newWriteupsMore removed from more link in New Writeups	.nodelet .morelink or #newwriteups .morelink
New div with class weblog around weblogs wherever they are.	You can style weblogs and their content differently from any other content if you really want to.
'Namespaced' classes on front page removed.	Replace references to .cotc_... .wl_... weblog_...	Autofix.
morelink class applied to link(s) at bottom of frontpage news/weblogs.	Style .morelinks (or .weblog .morelinks if it really has to be different).
The single-cell tables in Cream of the Cool and around writeups are gone.	If you did anything with these, you'll need to do it to #creamofthecool .content or .writeup .content instead.	To style tables with no risk of breaking the leftover ones still used for layout, use '.content table', '.content td', etc.
New class contentinfo for containers of information about content. So far added to writeup headers and footers, Cream of the Cool entries, Front Page News/weblogs, New Writeups and the 'Logs' nodelet.	In the end, this will make it possible to style all content info/headers consistently at once.
The #writeup_list id in New Writeups and #log_list id in the Logs nodelet have been replaced with a new class infolist	If you really want them done differently from each other, select with the nodelet id.
title and author classes added to titles and authors in writeup headers, Cream of the Cool and Front Page News/weblogs.	If your styling of these classes for New Writeups makes this look wrong, change it to .nodelet .title/.nodelet .author.
type class added to writeup types in writeups and Cream of the Cool.	(ditto)... .nodelet .type
New class date. So far on dates on writeups and Front Page News/weblog items. In the end on all dates/timestamps.
The frontpage id has moved from a redundant div inside #mainbody to the body element of the page.	If this breaks anything on the front page, replacing #frontpage with #frontpage #mainbody will repair it.
The nodetype_xxx classes on the body element have been replaced by more user-friendly classes using the name of the nodetype not its number.	Use these to adjust styling for different kinds of page, as desired.	Autofix.
The body element of superdocs has an id based on the node name.	Style different superdocs differently, as desired.	The node_idxxx classes will also be removed when the auto stylesheet fixer is available.
New class content to mark user-submitted content.	Use it to style writeup text, cream of the cool content, weblog content, front page news content, usergroup weblogs, scratchpad content, homenode content and discussion contributions consistently without using zillions of selectors.
Staff Picks, Cool User Picks, Random Nodes and the list in the Personal Links nodelet are marked up as ul with class linklist.	.linklist , .linklist li { display: block ; padding 0 ; margin: 0 ; } will get rid of all bullets and indents. Adjust padding and margins to your own taste.	I intend to submit patches to turn more nodelets into lists with the same class (Personal Links; Other Users, ...). This CSS would keep them looking the same as at before.
New editlink class on 'edit' links and similar, such as the two at the bottom of the Personal Links nodelet.	You might want these similar to morelink (below). Or you might not.
The Log links on the front page have the same structure as Staff Picks and Cool User Picks, including a heading.	Add #loglinks h3 , anywhere you now have #cooluserpicks h3. Do the .linklist styling mentioned above.	Maybe the front page nodelet headings and ordinary nodelet headings should all be marked up the same?
Staff Picks has a 'more' link at the bottom, like Cool User Picks. It has the class morelink, as does the one in CUP and the one at the bottom of the New Writeups nodelet	Whatever you did to .cup_more, do it to .morelink	cup_more has now been removed..
The div with id zenthinoutline and class thinoutline has been removed.	It was a waste of space anyway.
Suggested/Pending/Possible Changes
Mark up the headings on front-page nodelets and other nodelets with the same tag.		h2 or h3?
Add a shared class box to sidebar nodelets and the front-page nodelets.	Ignore it, or use it to make them all look the same in one swell foop.

Deprecated classes/ids

I suggest you take these out of your stylesheets at your convenience since they are superfluous and should be removed at some unspecified time in the future:

Class/id	Use this instead

CSS has two levels, CSS1 and CSS2. Level 2 notably includes absolute placement and generated content.
Unfortunately, even CSS1 is not fully implemented by 4 generation browsers.

The half-assed implementation in Netscape 4.7, for example, may lead to perfectly legal CSS producing black text on black background. The user loses.

The only browser that completely implements CSS1 is (and I say this with great bitterness) Internet Explorer 5 for the Macintosh. It even implements some really tasty bits of CSS2 like generated content.

The current situation, with 4 generation browsers still being widely used, forces Web developers to remain in a "core" set of CSS functionality, which certainly sucks.

The zen theme is the newest "skinnable" theme for the Everything2 web site. While any registered user can use a pre-made style, typically only users with knowledge of Cascading Style Sheets (CSS) can create a new theme. Basically a theme allows you to add your own colors, borders, fonts, sizes, margins, and positioning of all the different sections on a page.

For an in-depth tutorial on how to set up the zen theme in your User Settings and begin creating your own theme, check out CSS Primer for the E2 Zen Theme by Simulacron3.

If you are just trying to decide which theme to choose, I would suggest looking at Theme Nirvana for the most popular themes on E2, or The Catwalk for a list of all available themes.

---

There are three main purposes to this writeup:

1. Quick Reference - To provide you with a quick reference of ids and classes used in the HTML of the zen theme
2. Theme Tester - To give you ideas on how to test your theme. In addition to things to check for, this section uses every HTML tag approved for use on E2 to see how well your theme works
3. Additional Resources - To provide you with additional resources on the zen theme and CSS in general

---

Quick Reference

If you are already familiar with CSS and just need to know the ids and classes for the HTML elements on the page to help you, look no further.

ids and classes common to (nearly) all pages

• #wrapper (tag: div / parent: body tag)
  The wrapper id "wraps" the entire page except the header and footer. This basically means the main page content and the nodelets.

  • #mainbody (tag: div / parent: #wrapper)
    The mainbody id contains the main content of the page. Basically, this is everything except the content within the #sidebar (see below). If we are looking at an e2node it contains all the writeups. For a superdoc, it is the main document text. For a homenode, it is your userinfo, homenode picture, your profile text, and bookmarks.

    • .nodetitle (tag: h1 / parent: #mainbody on most pages, #frontpage on the homepage)
      The nodetitle class specifies the main page title.

  • #sidebar (tag: div / parent: #wrapper)
    The sidebar id contains all of the nodelets. Traditionally, this would be displayed in a column on the left or right (hence the name sidebar), however it is not required to be in a column.
    NOTE: While nodelets are displayed on every page, they have their own section below.

• #header (tag: div / parent: body tag)
  The header id is, unfortunately, contained at the bottom of the page, so you really have to do some styling to put it back at the top. The header contains the logo, the zen epicenter (if you have that turned on), and the search form.

  • #epicenter_zen (tag: div / parent: #header)
    The epicenter_zen id contains links to important site features (settings, homenode, scratchpad, etc.) as well as displaying your votes and C!s left.
    NOTE: The zen epicenter must be explicitly turned on in your nodelet settings. If it is not turned on, the epicenter will be displayed as a nodelet (see below).

  • #searchform (tag: div / parent: #header)
    The searchform id contains the textbox, button, labels, and checkboxes for the search form

    • #search_form (tag: form / parent: #searchform)
      The search_form id wraps the actual form element within the #searchform.

    • #node_search (tag: input / parent: #search_form)
      The node_search id is the actual textbox where you type your search keywords.

    • #near_match (tag: input / parent: #search_form->label tag)
      The near_match id is the checkbox for soundex (i.e., "Near Matches") search.

    • #match_all (tag: input / parent: #search_form->label tag)
      The match_all id is the checkbox for the "Ignore Exact" search.

    • #full_text (tag: input / parent: #search_form->label tag)
      The full_text id is the checkbox for the "Full Text" search.

  • #e2logo (tag: h1 / parent: #header)
    The e2logo id contains a link to the E2 home page. If you are artistic, you can create your own logo and display it as a background image here.

• #footer (parent: body tag)
  The footer id contains copyright information, links to the Everything Development Company, funny little quotes, and depending on your usergroup memberships, may contain other links as well.

  • #metalinks (parent: #footer)
    If you are a member of certain usergroups, the metalinks id will display meta links within an unordered list (ul tag).

ids and classes for e2nodes and writeups

• .topic (tag: div / parent: #mainbody)
  While they have ids as well, the #firmlink and #isalso sections (see below) are also defined with the topic class. The topic class is also used when you are looking at a writeup to link back to the full node.

• #firmlink (tag: h2 / parent: #mainbody)
  The firmlink id provides 0 or more links to a firm linked node. While it is always output, the h2 tag will be empty if there are no firmlinks for the current node.
  Need to Test? Hard Link is an example node with firm links

• #isalso (tag: h2 / parent: #mainbody)
  The isalso id provides 0 or more links to other nodes with the same title. For example, if you visit a writeup that has the same title as a noder, this h2 tag might say "_______ is also a user". While it is always output, the h2 tag will be empty if there are no isalso links for the current node.
  Need to Test? Oolong is an example node with an isalso link

• .createdby (tag: div / parent: #mainbody->form tag)
  The createdby class contains information on who created the e2node (i.e., nodeshell)

• .writeup (tag: div / parent: #mainbody->form)
  The writeup class is wrapped around each writeup on the page.

  • .writeuptitle (tag: div / parent: #writeup)
    The writeuptitle class is the writeup header. It contains the writeup title; type; author; reputation and voting information; create time; C!s; blab box; and word, paragraph, and character counts.

  • .writeuptable (tag: table / parent: #writeup)
    The writeuptable class is a table with a single row and column used to make sure that users who write improper HTML don't affect the writeups below.

    • .writeup_text (tag: div / parent: .writeuptable->tbody tag->tr tag->td tag)
      The writeup_text class contains the actual content of the writeup.

      • .belowwriteup (tag: div / parent: .writeup_text)
        The belowwriteup class (which may be used later) is a div tag that is output directly after the noder's writeup text.

• #displaytypelinks (tag: div / parent: #mainbody->form)
  The displaytypelinks id contains link to the printable and chaos versions of the node.

• #votefooter (tag: div / parent: #mainbody->form)
  The votefooter id contains the vote or blab button

• #softlinks (tag: div / parent: #mainbody)
  The softlinks id contains the soft link table.

• #zenthinoutline and .thinoutline (tag: div / parent: #softlinks)
  The zenthinoutline id and thinoutline class are both contained within the same div tag. They also wrap the soft link table.

• #writeup_add (tag: div / parent: #mainbody)
  The writeup_add id contains the add or edit writeup form.

ids and classes for the front page

• #frontpage (tag: div / parent: #mainbody)
  The frontpage id contains all of the home page content. It is likely wrapped in its own div so that you can give different styling to tags you may have already styled for the #mainbody.

  • #printlink (tag: p / parent: #frontpage)
    The printlink id is used to link to a printable version of the homepage.

  • #zenthinoutline and .thinoutline (tag: div / parent: #frontpage)
    The zenthinoutline id and thinoutline class both wrap the rest of the #frontpage content including the welcome message, log links, cool user picks, staff picks, cream of the cool, and the news.

    • #welcome_message (tag: div / parent: .thinoutline->table tag->tbody tag->tr tag->td tag)
      The welcome_message id simply displays a short paragraph welcoming users and pointing them toward Everything2 Help as needed.

    • #loglinks (tag: div / parent: .thinoutline->table tag->tbody tag->tr tag->td tag)
      The loglinks id contains links to the recent day log, editor log, root log, and Log Archive.

    • #cooluserpicks (tag: div / parent: .thinoutline->table tag->tbody tag->tr tag->td tag)
      The cooluserpicks id displays the recent writeups that have been given a C! by regular noders.

      • .cup_more (tag: div / parent: #cooluserpicks)
        The cup_more class simply contains a "More" link to the Cool Archive.

    • #staff_picks (tag: div / parent: .thinoutline->table tag->tbody tag->tr tag->td tag)
      The staff_picks id displays random editor cools from the Page of Cool. Unfortunately, they are not displayed in a list at this time, so it is hard to do any real styling with them.

    • #creamofthecool (tag: div / parent: .thinoutline->table tag->tbody tag->tr tag->td tag)
      The creamofthecool id wraps all the the Cream of the Cool writeups that are featured on the home page.

    • #cotc (tag: div / parent: #creamofthecool->table tag->tbody tag->tr tag->td tag)
      The cotc id is another wrapper of the Cream of the Cool writeups.

    • .cotc_entry (tag: div / parent: #cotc)
      The cotc_entry class contains each individual Cream of the Cool writeup.

      • .cotc_info (tag: div / parent: .cotc_entry)
        The cotc_info class acts as a header for the cotc_entry. It contains the writeup title, type, and author.

      • .cotc_text (tag: div / parent: .cotc_entry)
        The cotc_text class contains a snippet of the writeup's text.

    • #frontpage_news (tag: div / parent: .thinoutline->table tag->tbody tag->tr tag->td tag)
      The frontpage_new id contains all of the News for Noders entries.
      NOTE: The news contains several weblog_item classes for each news entry. The format of this class is listed below in the "Additional Classes" section because this class structure is used in other places on the site as well.

ids and classes for homenodes

• #homenodeheader (tag: div / parent: #mainbody)
  The homenodeheader id contains all of your basic user info (user since, last seen, number of writeups, XP, etc.) and your homenode image.

  • #homenodepicbox (tag: div / parent: #homenodeheader)
    The homenodepicbox id contains your picture and (if it is your homenode) a link to edit your profile.

    • #userimage (tag: img / parent: #homenodepicbox->p tag)
      The userimage id is your homenode image.
      Need to Test? in10se is an example of a homenode with an image

• #homenodetext (tag: div / parent: #homenodeheader)
  The homenodetext id contains all of the custom profile information added by the user.

• #bookmarks (tag: div / parent #homenodeheader)
  The bookmarks id contains all of the user bookmarks.

Nodelets

General Nodelet Structure

• .nodelet (tag: div / parent: #sidebar)
  The nodelet class is wrapped around the entire nodelet.

  • .nodelet_title (tag: h2 / parent: .nodelet)
    The nodelet_title class is the title of the nodelet.

  • .nodelet_content (tag: div / parent: .nodelet)
    The nodelet_content class wraps the main content of the nodelet. Nodelet content varies greatly for each nodelet.

Specific Nodelets

NOTE: The id attributes for specific nodelets are subject to change.

* indicates additional classes and ids may be contained within this nodelet, and may be updated at a later date. Please /msg me if you have a specific interest in one of them.

• Chatterbox - #nodelet_170070 *
• Current User Poll - #nodelet_1689202
• Epicenter - #nodelet_262 *
• Everything Developer - #nodelet_836984 *
• Master Control - #nodelet_1687135 *
• New writeups - Zen - #nodelet_1868940 *
• Notelet Nodelet - #nodelet_1290534
• Notifications - #nodelet_1930708 *
• Other Users - #nodelet_91 *
• ReadThis - #nodelet_1157024 *
• Recent Nodes - #nodelet_1322699
• Statistics - #nodelet_838296 *
• Vitals - #nodelet_165437 *

Additional classes

• .evenrow (tag: tr / parent: varies based on use, but should always be within a table)
  The evenrow class is typically seen only in superdocs, and is used to signify that the current row is an even (as opposed to odd) numbered row. This tag along with .oddrow is used to make large tables easier to read.
  Need to Test? Theme Nirvana is an example node that uses evenrow and oddrow.

• .oddrow (tag: tr / parent: varies based on use, but should always be within a table)
  The oddrow class is typically seen only in superdocs, and is used to signify that the current row is an odd (as opposed to even) numbered row. This tag along with .evenrow is used to make large tables easier to read.
  Need to Test? Theme Nirvana is an example node that uses evenrow and oddrow.

• .populated (tag: a / parent: inline tag, varies by use)
  The populated class is used to signify a link that points to an existing node.

• .unpopulated (tag: a / parent: inline tag, varies by use)
  The unpopulated class is used to signify a link that points to a non-existing node.

• .weblog_item (tag: div / parent: varies based on use)
  The weblog_item class is used on the home page in the #frontpage_news section as well as on usergroup pages to display -ifyed items.
  Need to Test? The front page uses weblogs, as do many usergroups.

  • .wl_title (tag: div / parent: .weblog_item)
    The wl_title class displays the weblog title.

  • .wl_author (tag: div / parent: .weblog_item)
    The wl_author class displays the weblog author.

  • .wl_date (tag: div / parent: .weblog_item)
    The wl_date class displays the weblog date.

  • .wl_text (tag: div / parent: .weblog_item)
    The wl_text class displays the main text of the weblog.

• .wl_links (tag: div / parent: varies based on use)
  The wl_links class typically follows the last .weblog_item (see above) entry. It typically allows you to view older or newer web log entries.

• .clear (tag: varies by use / parent: varies by use
  The clear class is meant to clear any floats that you may have set up on the page. Typically you should define it as .clear { clear: both; }.

---

Theme Tester

It is suggested that you test your theme out on the following pages:

• The front page
• A homenode of a user with an image
• A superdoc that uses evenrow and oddrow
• An e2node with multiple writeups
• Chatterlight (many themes make the chat area too narrow)
• This writeup

An indispensable tool for styling E2 is Firebug (a plugin for Firefox). It allows you to right click on anything in the page and select "Inspect Element" to view it's HTML source in a collapsible Document Object Model (DOM) viewer.

rootbeer277 has also created a stylesheet called the Zen Organization Visualizer which may also be helpful to some designers. It is not made to be pretty, but rather to clearly differentiate each section of the page through the use of colors and borders.

Styling Hint: If something isn't styling correctly, and you are sure you have added the correct code to your stylesheet, make sure your Style Defacer is empty. The definitions in Style Defacer will override your stylesheet.

The following content is useful for testing your zen theme. It uses all HTML tags approved for use on E2:

---

This paragraph (which uses the p tag) is used to provide examples of inline HTML tags such as abbr, acronym, b, cite, code, del, em, i, ins, kbd, s, strike, strong, sub, sup, tt, u, and var. "E2" is an example of the abbr tag. "SCUBA" is an example of the acronym tag. "Bold" is an example of the b tag. "The Hitchhiker's Guide to the Galaxy" is an example of the cite tag. "int a = w * h;" is an example of the code tag. "Remove this" is an example of the del tag. "Emphasis" is an example of the em tag. "Italics" is an example of the i tag. "Insert this" is an example of the ins tag. "QWERTY" is an example of the kbd tag. "Strike this" is an example of the s tag. "Strike this too" is an example of the strike tag. "Strong" is an example of the strong tag. The "2" in H₂O is an example of the sub tag. The "2" in 100² is an example of the sup tag. "Typewriter" is an example of the tt tag. "Underline is an example of the u tag. Finally "N" is an example of the var tag.

Big and Small

The following is an example of styling the big and small tags. Because some noders like to use several of these tags in a row, your style might want to take this into account, and prevent things from getting too big or too small.

Big Tag x 1
Big Tag x 2
Big Tag x 3
Big Tag x 4
Big Tag x 5
Big Tag x 6

Small Tag x 1
Small Tag x 2
Small Tag x 3
Small Tag x 4
Small Tag x 5
Small Tag x 6

Header Tags

The following is an example of HTML Heading Tags.

H1 Tag Example

H2 Tag Example

H3 Tag Example

H4 Tag Example

H5 Tag Example

H6 Tag Example

Lists

The Definition List

This list uses the dl (definition list), dt (definition term), and dd (definition description) tags.

Definition Term Number One

This is the definition of the first term.

Second Definition Term

This is where the second definition is defined. This line is considerably longer so that you can be sure you are styling correctly for both long and short lines. Hmm... I'm not sure this is long enough. Maybe just a little bit more text will help.

Unordered Lists

This list uses the ul (unordered list) and li (list item) tags. I have included four levels of lists so you can be sure to style nested lists appropriately.

• Animal
  • Mammal
    • Dog
      • Akita
      • American Eskimo Dog
      • Boston Terrier
    • Cat
    • Cow
• Vegetable
  • Tree
    • Pine
      • White Pine
      • Red Pine
    • Oak
    • Maple
• Mineral
  • Silicate
  • Carbonate
  • Sulfate

Ordered Lists

This list uses the ol (ordered list) and li (list item) tags. I have included four levels of lists so you can be sure to style nested lists appropriately.

1. One (1)
   1. One Point One (1.1)
      1. One Point One Point One (1.1.1)
         1. One Point One Point One Point One (1.1.1.1)
         2. One Point One Point One Point Two (1.1.1.2)
         3. One Point One Point One Point Three (1.1.1.3)
      2. One Point One Point Two (1.1.2)
         1. One Point One Point Two Point One (1.1.2.1)
         2. One Point One Point Two Point Two (1.1.2.2)
         3. One Point One Point Two Point Three (1.1.2.3)
   2. One Point Two (1.2)
   3. One Point Three (1.3)
2. Two
3. Three

Blockquote

These paragraphs are enclosed in the blockquote tag.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget nulla vitae lacus interdum consequat. Nunc elementum. Suspendisse mattis magna at enim. Aliquam a justo commodo ligula suscipit mattis. Etiam vel dolor. Vestibulum molestie aliquam nibh. Praesent accumsan consectetuer nunc. Morbi ac justo. Aliquam suscipit. Nunc blandit. Ut vitae massa. Quisque euismod facilisis ante. Vivamus accumsan, neque a molestie mattis, lorem augue sodales nunc, non pulvinar augue felis ut dolor. Aenean pretium erat non nunc.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam accumsan, erat quis euismod tincidunt, elit massa pharetra libero, vehicula ullamcorper leo libero non nisl. Etiam eu ante. Fusce tincidunt tortor eget elit rutrum elementum.

Pre

The following is a sample of the pre tag.

 T | I | C
---+---+---
 T | A | C
---+---+---
 T | O | E

---

Additional Resources

• CSS Primer for the E2 Zen Theme - tutorial
• Theme Nirvana - popular themes
• The Catwalk - all themes
• The Draughty Atelier - create a new stylesheet
• Style Defacer - modify an existing style with your own updates
• Cascading Style Sheets
• CSS Box Model / Box Model Hack
• CSS Positioning
• Document Object Model
• HTML Tags / HTML Attributes
• MakeMeOneWithEverything and in10se's stylesheet are two of my themes (hey, it's my writeup, I'll nodevertise if I want)
• ... additional information on the zen theme