Difference between revisions of "S2 CSS: Archive pages ids and classes"

From Dreamwidth Notes
Jump to: navigation, search
 
(One intermediate revision by one other user not shown)
Line 5: Line 5:
 
== <tt>div#archive-year</tt> ==
 
== <tt>div#archive-year</tt> ==
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
=== <tt>div.navigation</tt> ===
 
=== <tt>div.navigation</tt> ===
  
has .inner</tt>
+
This div has an <tt>.inner</tt> div.
  
contains a &lt;ul&gt; that can have many items, as it lists each year with posts
+
Contains a &lt;ul&gt; that can have many items, as it lists each year that contains posts posts.
  
 
=== <tt>div.year</tt> ===
 
=== <tt>div.year</tt> ===
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
==== <tt>div.month-wrapper</tt> ====
 
==== <tt>div.month-wrapper</tt> ====
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
== Inside <tt>div.month-wrapper</tt> ==
 
== Inside <tt>div.month-wrapper</tt> ==
  
=== <tt>div.separator</tt> / <tt>div.separator-pre</tt> ===
+
=== <tt>div.separator</tt> / <tt>div.separator-before</tt> ===
  
{{Warn|text=separator-pre might change to separator-before}}
+
This div has an <tt>.inner</tt> div.
 
+
has <tt>.inner</tt>
+
  
 
=== <tt>div.month</tt> ===
 
=== <tt>div.month</tt> ===
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
==== <tt>div.header</tt> ====
 
==== <tt>div.header</tt> ====
Line 37: Line 35:
 
==== <tt>div.contents</tt> ====
 
==== <tt>div.contents</tt> ====
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
==== <tt>div.footer</tt> ====
 
==== <tt>div.footer</tt> ====
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
==== <tt>div.separator</tt> / <tt>div.separator-post</tt> ====
+
==== <tt>div.separator</tt> / <tt>div.separator-after</tt> ====
 
+
{{Warn|text=separator-post might change to separator-after}}
+
  
 
== Inside <tt>div.month</tt> <tt>div.contents</tt> ==
 
== Inside <tt>div.month</tt> <tt>div.contents</tt> ==
Line 63: Line 59:
 
== <tt>div#archive-month</tt> ==
 
== <tt>div#archive-month</tt> ==
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
=== <tt>div.navigation</tt> ===
 
=== <tt>div.navigation</tt> ===
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
=== <tt>div.month</tt> ===
 
=== <tt>div.month</tt> ===
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
=== <tt>div.navigation</tt> ===
 
=== <tt>div.navigation</tt> ===
Line 99: Line 95:
 
== <tt>div#archive-day</tt> ==
 
== <tt>div#archive-day</tt> ==
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
=== <tt>div.navigation</tt> ===
 
=== <tt>div.navigation</tt> ===
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
==== <tt>li.page-back</tt> ====
 
==== <tt>li.page-back</tt> ====
 +
 +
Contains a text link to go back in time, that is, to earlier entries.
 +
 
==== <tt>li.page-forward</tt> ====
 
==== <tt>li.page-forward</tt> ====
 +
 +
Contains a text link to go forward in time, that is, to later entries.
  
 
=== <tt>div.day</tt> ===
 
=== <tt>div.day</tt> ===
  
has <tt>.inner</tt>
+
This div has an <tt>.inner</tt> div.
  
 
==== .<tt>entry-wrapper</tt> ====
 
==== .<tt>entry-wrapper</tt> ====

Latest revision as of 21:44, 31 August 2009

Year view

The year view page has body.page-archive as its body class. Inside the div#primary:

div#archive-year

This div has an .inner div.

div.navigation

This div has an .inner div.

Contains a <ul> that can have many items, as it lists each year that contains posts posts.

div.year

This div has an .inner div.

div.month-wrapper

This div has an .inner div.

Inside div.month-wrapper

div.separator / div.separator-before

This div has an .inner div.

div.month

This div has an .inner div.

div.header

div.contents

This div has an .inner div.

div.footer

This div has an .inner div.

div.separator / div.separator-after

Inside div.month div.contents

td

  • .day-empty
  • .day
  • .day-has-entries

span.label

Month view

The month view page has body.page-month as its body class. Inside the div#primary:

div#archive-month

This div has an .inner div.

div.navigation

This div has an .inner div.

div.month

This div has an .inner div.

div.navigation

There's a navigation section after the month <div> as well.

Inside div.month

span.datetime

span.time

span.poster and span.entry-poster

span.trust-filter

span.entry-title

div.tag

span.tag-text

Day view

The day view page has body.page-day as its body class. Inside the div#primary:

div#archive-day

This div has an .inner div.

div.navigation

This div has an .inner div.

li.page-back

Contains a text link to go back in time, that is, to earlier entries.

li.page-forward

Contains a text link to go forward in time, that is, to later entries.

div.day

This div has an .inner div.

.entry-wrapper

div.navigation