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:
- Quick Reference - To provide you with a quick reference of ids and classes used in the HTML of the zen theme
- 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
- 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.
#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.
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.
#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.
#writeup_add (tag: div / parent: #mainbody)
The writeup_add id contains the add or edit writeup form.
ids and classes for the front page
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.
#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
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.
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:
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 H2O is an example of the sub tag.
The "2" in 1002 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.
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.
- One (1)
- One Point One (1.1)
- One Point One Point One (1.1.1)
- One Point One Point One Point One (1.1.1.1)
- One Point One Point One Point Two (1.1.1.2)
- One Point One Point One Point Three (1.1.1.3)
- One Point One Point Two (1.1.2)
- One Point One Point Two Point One (1.1.2.1)
- One Point One Point Two Point Two (1.1.2.2)
- One Point One Point Two Point Three (1.1.2.3)
- One Point Two (1.2)
- One Point Three (1.3)
- Two
- 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