Difference between revisions of "AoPS Blog Layout"
m (→Layout) |
|||
(8 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 34: | Line 40: | ||
All items listed below are HTML <code>div</code>s unless otherwise specified. | 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 | + | ==Layout== |
− | *** ID: left_navigation_box Holds the links to the | + | |
+ | * '''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 | **** community | ||
**** AoPS Blogroll | **** AoPS Blogroll | ||
**** Blog Homepage | **** Blog Homepage | ||
− | *** | + | *** '''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- | + | ***** '''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 Google Chrome''': control-click an element. Click inspect. |
− | * | + | * '''PCs with Google Chrome''': right-click and click on "Inspect Element". |
+ | |||
+ | ==AoPS Blog Design== | ||
+ | |||
+ | {{Blog Design}} | ||
+ | |||
+ | [[Category:CSS]] |
Latest revision as of 11:31, 6 November 2020
Contents
[hide]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, div
s 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 div
s 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: left_navigation_box Holds the links to the
- 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: cmty-itembox Holds item.
- 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.
- CLASS: entry Wraps the entry and title
- 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: main Holds the blog entries on the left side of the page
- ID: header Holds the header space and the title link, which is a
- ID: navigation_box Wraps the navigation bar, on the top of the page
- 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-nonscroll Wrapps Content
- CLASS: aops-modal-content-wrapper Wrapps modals
- CLASS: aops-modal-frame Frame border for aops modals
- 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 |