AoPS Blog Layout

How to use blog layout in your CSS

Blogs hosted by AoPS follow a certain layout. You can take advantage of this by specifying the div you want your CSS to affect.

Specifying sections

You can specify a div with a specific ID (specified below) with:

   div #id_goes_here {
       CSS goes here
   }

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

   div .class_goes_here {
       CSS goes here
   }

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

   div #id__goes_here p {
       CSS goes here
   }

   div .class_goes_here p {
       CSS goes here
   }

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

   * {
       CSS goes here
   }

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

   p {
       CSS;
   }

All items listed below are HTML divs unless otherwise specified.

Layout

• 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
    • ID: 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 h1 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.

• CLASS: aops-modal-wrapper Wraps AoPS Modals
  • CLASS: aops-modal-frame Frame border for aops modals
    • CLASS: aops-modal-content-wrapper Wrapps modals
      • CLASS: aops-modal-nonscroll Wrapps Content
        • CLASS: aops-modal-body Text for modal
• CLASS: aops-modal-mask Holds AoPS Background

Web Inspector

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".

AoPS Blog Design

AoPS Blog Design (Cascading Style Sheets)

Introduction - Default Blog Layout