Difference between revisions of "CSS: List of Elements"

(Polls)
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{CSS}}
 
{{CSS}}
 
This is a list of CSS elements that is used for the blogs in AoPS.
 
This is a list of CSS elements that is used for the blogs in AoPS.
 +
 +
NOTE: Text in <span style="color: #888;">gray</span> are comments designed for clarity and should not be included in your CSS.
  
 
==Main Elements==
 
==Main Elements==
 
*body
 
*body
*div#header
 
 
*div#wrapper
 
*div#wrapper
 
*div#content
 
*div#content
 +
 +
==Main Content==
 
*div#main
 
*div#main
  
==Entry==
+
===Entries/Comments===
*div.entry
+
*div.entry <span style="color: #888;">Includes the blog entry and its title</span>
*div.entrywrap
+
*div.entrywrap <span style="color: #888;">Includes the blog entry minus its title</span>
*div.coment
+
*div.comment
*div.commentwrap.row1
+
*div.commentwrap
*div.commentwrap.row2
+
*div.message  <span style="color: #888;">The area containing actual text of the message or comment</span>
 +
 
 +
 
 +
*.entry h2 > img <span style="color: #888; margin-left: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Selects the image to the left of the h2.</span>
 +
*div.efooter
 +
*div.cfooter
 +
*div.actions
 +
*div.modactions
 +
 
 +
===Polls===
 +
*div.cmty-poll-display
 +
*div.cmty-poll-result-bar
 +
 
 +
===Misc.===
 +
*p#post-new-entry-p
 +
*img#post-new-entry-img
 +
*a#post-new-entry
 +
*div.total-posts
  
 
==Side==
 
==Side==
*div#side
+
*div#side <span style="color: #888; margin-left: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">This is the sidebar.</span>
*li.row1, li.row2
+
*div#user-menu-widget <span style="color: #888; margin-left: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">This is the blog description.</span>
 +
*div#archives-widget <span style="color: #888; margin-left: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Use this for the archives widget.</span>
 +
*div#shouts-widget
 +
*div#contrib-widget
 +
*div#tags-widget
 +
*div#categories-widget
 +
*div#about-owner-widget
 +
*div#stats-widget
 +
*div.widget:not([id]) <span style="color: #888; margin-left: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">This is the search widget, which does not have a specific ID.</span>
 +
*div#feed-widget <span style="color: #888; margin-left: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Appears only on the front page of a blog.</span>
 +
 
 +
===Shouts===
 +
*li.row1, li.row2 <span style="color: #888; margin-left: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Use these to select the individual shouts.</span>
  
 
==Header==
 
==Header==
Line 28: Line 60:
 
*div#left_navigation_box
 
*div#left_navigation_box
 
*div#right_navigation_box
 
*div#right_navigation_box
 +
 +
==Posting/Commenting==
 +
<!-- Can't figure out what to put here -->
  
 
==Other==
 
==Other==

Latest revision as of 15:15, 15 August 2015

CSS
Basics - Backgrounds - Text - Box Model - Selectors and Combinators - Pseudo-class and Pseudo-element - Gradients - Animations and Transitions - CSS in AoPS - List of Elements

This is a list of CSS elements that is used for the blogs in AoPS.

NOTE: Text in gray are comments designed for clarity and should not be included in your CSS.

Main Elements

  • body
  • div#wrapper
  • div#content

Main Content

  • div#main

Entries/Comments

  • div.entry Includes the blog entry and its title
  • div.entrywrap Includes the blog entry minus its title
  • div.comment
  • div.commentwrap
  • div.message The area containing actual text of the message or comment


  • .entry h2 > img Selects the image to the left of the h2.
  • div.efooter
  • div.cfooter
  • div.actions
  • div.modactions

Polls

  • div.cmty-poll-display
  • div.cmty-poll-result-bar

Misc.

  • p#post-new-entry-p
  • img#post-new-entry-img
  • a#post-new-entry
  • div.total-posts

Side

  • div#side This is the sidebar.
  • div#user-menu-widget This is the blog description.
  • div#archives-widget Use this for the archives widget.
  • div#shouts-widget
  • div#contrib-widget
  • div#tags-widget
  • div#categories-widget
  • div#about-owner-widget
  • div#stats-widget
  • div.widget:not([id]) This is the search widget, which does not have a specific ID.
  • div#feed-widget Appears only on the front page of a blog.

Shouts

  • li.row1, li.row2 Use these to select the individual shouts.

Header

  • div#header
  • div#header h1

Navigation Box

  • div#navigation_box
  • div#left_navigation_box
  • div#right_navigation_box

Posting/Commenting

Other

  • h1
  • h2
  • a
  • span.hidden-text
  • input
  • select
  • textarea
  • inputbox