Dynamic Classes in Sandbox
The Sandbox Designs Competition is nearing its finish. With less than 24 hours for the results declaration all the designs are now available for live preview. A design that stands apart is “Diurnal” which lives up the spirit of Sandbox theme. It changes its appearance 5 times within a day, and what made it possible is the “Dynamic Classes” feature available with Sandbox.
Let’s see it in deep. The body tag on my blog homepage looks like one below
<body class="wordpress y2007 m08 d06 h06 home">
wordpress - Static Class. This class is always applied to each page.
y2007 - Dynamic Class. Shows the year, when the page was generated.
m08 - Dynamic Class. Shows the month, when the page was generated.
d06 - Dynamic Class. Shows the day, when the page was generated.
h06 - Dynamic Class. Shows the hour, when the page was generated.
home - Dynamic Class. Is available only when the page being shown is the home page.
Now the h<xx> class (xx = 00-24) as shown above is what made the Diurnal design possible. The text colors and header images are changed depending on the time when the page was generated. While these classes were available for all only one design exploited it. Congratulations to Carolyn Smith for the wonderful design and wishes that this design acclaims the top position.
A body tag may contain many other classes too which are described in table below :
| wordpress | A class that is always applied |
|---|---|
| home | When the home page is displayed |
| search | When the results of a search are displayed |
| four04 | When a request results in zero posts, i.e., a 404 error page. Doesn’t seem to work with wordpress.com |
| loggedin | When the page is displayed by a logged-in user |
| y[current year] | The current year of when the page is display (Offset to GMT) |
| m00–12 | The current month of when the page is displayed (Offset to GMT) |
| d01–31 | The current day of when the page is displayed (Offset to GMT) |
| h00–24 | The current hour of when the page is displayed (Offset to GMT) |
| page | When a page (not post) is displayed |
| page-author-[name] | For a page by a specific author, where [name] is the user’s login name, e.g., page-author-admin |
| page-paged-[n] | Displays the “paged” number of pages, where [n] is the paginated number |
| archive | When any archive page is displayed, i.e., applies to category-, date-, and author-based archive pages |
| date | When a date archive page is displayed, e.g., by month, by year |
| date-paged-[n] | Displays the “paged” number of date-based archive, where [n] is the paginated number |
| author | When a author archive page is displayed |
| author-[name] | When a specific author archive page is displayed, where [name] is the author’s login name, e.g., author-admin |
| author-paged-[n] | Displays the “paged” number of author archive, where [n] is the paginated number |
| category | When a category archive page is displayed |
| category-[name] | For a specific category, where [name] is the category slug, e.g., category-useful-links |
| category-paged-[n] | Displays the “paged” number of category archive, where [n] is the paginated number |
| single | When a single post is displayed |
| s-author-[name] | For a single post published by a specific author, where [name] is the user’s login name, e.g., s-author-admin |
| s-category-[name] | For a single post published in a specific category, where [name] is the category slug, e.g., s-category-news |
| s-y[current year] | For a single post published in a specific year (Offset to GMT) |
| s-m00–12 | For a single post published in a specific month (Offset to GMT) |
| s-d01–31 | For a single post published on a specific day (Offset to GMT) |
| s-h00–24 | For a single post published at a specific hour (Offset to GMT) |
| paged | When whatever is displayed is “paged,” e.g., page 2 of the index |
| paged-[n] | Displays the “paged” number, where [n] is the paginated number, e.g., paged-3 for third page of index |
| pageid-[n] | Displays the page ID number of queried page, where [n] is the page ID, e.g., pageid-20 |
| postid-[n] | Displays the post ID number of queried post, where [n] is the post ID, e.g., postid-20 |
Each of the post is presented within a DIV tag for each and the classes that may appear corresponding to each are as below.
| hentry | For the hAtom 0.1 specification, applied every post |
|---|---|
| page | A general class, applied to every page |
| post | A general class, applied to every post |
| private | For a post that has been saved as “private” |
| protected | For a post that has been password-protected |
| publish | For any published post, as contrasted with an unpublished draft |
| draft | For a post saved as a draft, as contrasted with an published post |
| y[post year] | For a post published in a certain year (Offset to GMT) |
| m00–12 | For a post published in a specific month (Offset to GMT) |
| d01–31 | For a post published on a specific day (Offset to GMT) |
| h00–24 | For a post published at a specific hour (Offset to GMT) |
| author-[name] | For any specific author, where [name] is the user’s login name, e.g., author-admin |
| category-[name] | For any specific category, where [name] is the category slug, e.g., category-news |
| alt | For odd-numbered posts, e.g., 1st, 3rd, 5th |
| p[n] | For counting posts relative to the top of the page, where [n] is the number, e.g., p1 for the first post, p2 for the second, p3 for the third |
Each of the comment is presented as a list item using LI tag. The classes that may appear corresponding to each are as below.
| comment | A general class, applied to every comment |
|---|---|
| trackback | When a comment is a trackback/pingback |
| byuser | For any comment by a registered user |
| bypostauthor | When the comment author is also the post author |
| comment-author-[name] | For a comment by a specific registered user, where [name] is the user’s login name, e.g., comment-author-john |
| alt | For odd-numbered comments, e.g., 1st, 3rd, 5th |
| c-y2007 | For a comment posted in a specific year (Offset to GMT) |
| c-m00–12 | For a comment posted in a specific month (Offset to GMT) |
| c-d01–31 | For a comment posted on a specific date (Offset to GMT) |
| c-h00–24 | For a comment posted at a specific hour (Offset to GMT) |
| c[n] | For counting comments relative to the first, where [n] is the number, e.g., c1 for the first comment, c2 for the second, c3 for the third |
| t[n] | For counting trackbacks relative to the first, where [n] is the number, e.g., t1 for the first trackback, t2 for the second, t3 for the third |
The classes discussed above are taken from http://www.plaintxt.org/wp-content/uploads/sandbox-v09_readme.html. This is a version specific page and hence for latest on above please visit the sandbox home page
[...] Evidentemente podemos aprovecharnos de nuestros CSS para hacer que cada elementos concreto se vea de una forma determinada, para ello usaremos definiciones de todas las clases. Que como es obvio, deberemos conocer [...]
Sandbox: Clases dinámicas para pulir el CSS | aNieto2K
8 Aug 07 at 12:00 pm
[...] zum Thema: Was ist das Sandbox-Theme? Dynamisches Klassen im Sandbox-Theme WordPress-Theme “diurnal” This entry was written by Ascari, posted on 8. November [...]
Theme-Games « Ascaris kleine, feine Welt
8 Nov 07 at 7:33 am