View source for AoPS Blog Layout

Blogs hosted by AoPS follow a certain layout.  You can take advantage of this by specifying the <code>div</code> you want your CSS to affect.  You can specify a <code>div</code> with a specific ID (specified below) with:

   <code> div #id_goes_here {</code>
       <code> CSS goes here</code>
   <code> }</code>

IDs are used with <code>div</code> that only appears once in the code.  On the other hand, <code>div</code>s that occur multiple times, like a blog entry, have a class.  You can specify a class like this:

   <code> div .class_goes_here {</code>
       <code> CSS goes here</code>
   <code> }</code>

If you want to specify a specific HTML element, like <code>p</code>, the syntax is like this:

   <code> div #id__goes_here p {</code>
       <code> CSS goes here</code>
   <code> }</code>

   <code> div .class_goes_here p {</code>
       <code> CSS goes here</code>
   <code> }</code>

If you want to specify all HTML elements, use <code>*</code>.  Here is an example:

   <code> * {</code>
       <code> CSS goes here</code>
   <code> }</code>

If you just want to specify for one HTML element, use:

   <code> p {</code>
       <code> CSS;</code>
   <code> }</code>

All items listed below are HTML <code>div</code>s unless otherwise specified.
* ID: page-wrapper  Wraps the entire page.
** ID: navigation_box Wraps the navigation bar, on the top of the page
*** ID: left_navigation_box Holds the links to the
**** community
**** AoPS Blogroll
**** Blog Homepage
*** CLASS: right_navigation_box Holds the links to the
**** subscribe link
**** logout
**** Blog Information
*** ID: clear Holds nothing.
** ID: wrapper Wraps all the blog's content.
*** ID: header Holds the header space and the title link, which is a <code>h1</code> inside a HTML link
*** ID: content Holds the rest of the page
**** ID: main Holds the blog entries on the left side of the page
***** p: post-new-entry-p Holds the post-new-entry-image, the pencil image, and the post-new-entry text, a "a"
*****Unedited Entries: are held in unnamed divs
*****CLASS: cmty-post-edited Holds all edited posts.  Content same as CLASS: entry but cmty-post-edit-info is filled with text for edit status
******CLASS: entry Wraps the entry and title
*******h1: Title of entry
*******h2: poster info and time posted
*******CLASS: entrywrap Wraps the entry text and widgets (comments, etc.)
********CLASS: message Holds the actual entry text.
********CLASS: cmty-post-attachments Unknown.  Most likely images.
********CLASS: cmty-post-edit-info Empty on unedited entries (Unnamed div) but filled up in in divs with CLASS: cmty-post-edited
********CLASS: cmty-tags-itembox-wrapper Wraps the edit tags box.
*********CLASS: cmty-itembox Holds item.
**********TITLE: Edit tags Holds the edit tag itself.
********CLASS: efooter Holds comments area and mod actions, such as edit post.
*********CLASS: actions Holds comments area.  Holds an unordered list, with two "a"s: one of CLASS: post-replies and another CLASS: post-comment
*********CLASS: modactions Holds moderator actions inside an unordered list. Two "a"s are inside: one CLASS: blog-edit-post for editing, and the other CLASS: blog-moderate-topic for "Moderate".
********CLASS: clear Empty.
**** ID: side Holds all side content, including profile, shout box, and blog stats.  All divs below also belong to CLASS: block widget (with space in between)
***** ID: user-menu-widget 
***** ID: archive-widget
***** ID: shouts-widget
***** Unnamed div.
***** ID: about-owner-widget
***** ID: stats-widget
***** ID:  search-widget
**** CLASS: clear Holds nothing
* ID: login-form Wraps the login form.

If you wish to see the HTML code of your blog in more detail, use a code inspector
* *Macs with Safari*: Click on "Web Inspector" under the Develop menu (top navigation bar).  If you do not see the Develop Menu, go to Safari>Preferences>Advanced> and make sure Show Develop menu in hot bar.
* *Macs with Google Chrome*: control-click an element.  Click inspect.
* *PCs with Google Chrome*: right-click and click on "Inspect Element".