Difference between revisions of "AoPS Blog Layout"

m (Layout)
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
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:
+
==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 <code>div</code> you want your CSS to affect.   
 +
 
 +
===Specifying sections===
 +
 
 +
You can specify a <code>div</code> with a specific ID (specified below) with:
  
 
   <code> div #id_goes_here {</code>
 
   <code> div #id_goes_here {</code>
Line 37: Line 43:
 
==Layout==
 
==Layout==
  
* ID: page-wrapper  Wraps the entire page.
+
* '''ID: page-wrapper''' Wraps the entire page.
** ID: navigation_box Wraps the navigation bar, on the top of the page
+
** '''ID: navigation_box''' Wraps the navigation bar, on the top of the page
*** ID: left_navigation_box Holds the links to the
+
*** '''ID: left_navigation_box '''Holds the links to the
 
**** community
 
**** community
 
**** AoPS Blogroll
 
**** AoPS Blogroll
 
**** Blog Homepage
 
**** Blog Homepage
*** CLASS: right_navigation_box Holds the links to the
+
*** '''ID: right_navigation_box''' Holds the links to the
 
**** subscribe link
 
**** subscribe link
 
**** logout
 
**** logout
 
**** Blog Information
 
**** Blog Information
*** ID: clear Holds nothing.
+
*** '''ID: clear '''Holds nothing.
** ID: wrapper Wraps all the blog's content.
+
** '''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: 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: content''' Holds the rest of the page
**** ID: main Holds the blog entries on the left side 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"
+
***** '''p: post-new-entry-p''' Holds the '''post-new-entry-img''', the pencil image, and the '''post-new-entry text''', a "a"
*****Unedited Entries: are held in unnamed divs
+
***** 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: 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
+
****** '''CLASS: entry''' Wraps the entry and title
*******h1: Title of entry
+
******* '''h1: Title of entry'''
*******h2: poster info and time posted
+
******* '''h2: poster info and time posted'''
*******CLASS: entrywrap Wraps the entry text and widgets (comments, etc.)
+
******* '''CLASS: entrywrap''' Wraps the entry text and widgets (comments, etc.)
********CLASS: message Holds the actual entry text.
+
******** '''CLASS: message''' Holds the actual entry text.
********CLASS: cmty-post-attachments Unknown.  Most likely images.
+
******** '''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-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-tags-itembox-wrapper''' Wraps the edit tags box.
*********CLASS: cmty-itembox Holds item.
+
********* '''CLASS: cmty-itembox''' Holds item.
**********TITLE: Edit tags Holds the edit tag itself.
+
********** '''TITLE: Edit tags''' Holds the edit tag itself.
********CLASS: efooter Holds comments area and mod actions, such as edit post.
+
******** '''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: 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: 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.
+
******** '''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: 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: user-menu-widget '''
***** ID: archive-widget
+
***** '''ID: archive-widget'''
***** ID: shouts-widget
+
***** '''ID: shouts-widget'''
***** Unnamed div.
+
***** '''Unnamed div.'''
***** ID: about-owner-widget
+
***** '''ID: about-owner-widget'''
***** ID: stats-widget
+
***** '''ID: stats-widget'''
***** ID:  search-widget
+
***** '''ID:  search-widget'''
**** CLASS: clear Holds nothing
+
**** '''CLASS: clear''' Holds nothing
* ID: login-form Wraps the login form.
+
* '''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==
 
==Web Inspector==
  
If you wish to see the HTML code of your blog in more detail, use a code 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 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.
+
* '''Macs with Google Chrome''': control-click an element.  Click inspect.
* *PCs with Google Chrome*: right-click and click on "Inspect Element".
+
* '''PCs with Google Chrome''': right-click and click on "Inspect Element".
 +
 
 +
==AoPS Blog Design==
 +
 
 +
{{Blog Design}}
 +
 
 +
[[Category:CSS]]

Latest revision as of 12:31, 6 November 2020

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-img, 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