An Everything2 Help Document


Why it's important to read this before you begin writing

Everything2 may be unlike anything you have met before, and while it is possible to tweak the interface here, it is can be complicated and needs some knowledge of CSS.




Quick start

The Zen Theme is the name for the current visual design of Everything2. All older themes are no longer supported.

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

You can click "preview this style", 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:

What if I want to tweak my stylesheet a bit?

If you know cascading style sheets, 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?

N.B.We strongly recommend that you have some web design experience before you try this.

You can copy and paste the CSS from any existing stylesheet to serve as a base to work from. Note that your stylesheet will be public and other people will be able to use it. Joining the zenmasters usergroup is recommended to keep up to date on code changes that might affect stylesheets, and to get and give help to other theme-makers.

How do I learn CSS?

There are innumerable guides on the internet.





Back to
Everything2 Help




Updated on October 4, 2012 by wertperch

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.

  • #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.

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.

  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

Log in or register to write something here or to contact authors.