An Everything2 Help Document

The Zen Theme is a visual theme for Everything2, or rather, a family of themes. Zen is soon to replace Jukka as the default theme for new and guest users.

Quick start

Theme Nirvana lists Zen Stylesheets by popularity, with an option to switch to the Zen theme if it is not already enabled.

You can click "preview this style" to preview a stylesheet but for a better idea of how it looks in action, you should click "Use this stylesheet" and try out a variety of pages on E2 proper:

• Welcome to Everything - the front page
• Ralph - a typical node
• Webster 1913 - a typical home node

What if I want to tweak my stylesheet a bit?

If you know cascading stylesheets, you can use the Style Defacer to add any CSS declarations you like. These declarations will be applied after the main stylesheet and will be visible to you only, nobody else.

Can I create my own stylesheet?

Yes. The Draughty Atelier lets you create and edit a new blank stylesheet. We recommend that you have some web design experience before you try this. Your stylesheet will be public and other people will be able to use it.

You can copy and paste the CSS from any existing stylesheet to serve as a base to work from.

How do I learn CSS?

There are innumerable guides on the internet. We also have an Zen-specific CSS primer, CSS Primer for the E2 Zen Theme.

Back to
Everything2 Help

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