Sandbox Theming: Pure CSS Asides

As you probably know, I’m a fan of Sandbox, the semantically rich WordPress theme for hard-core theme designers. Honestly, I don’t know why theme designers would want to work off anything else… it just rocks.

So for my latest example of the cool “Pure CSS” funkiness you can accomplish with Sandbox, I draw your attention to these asides I’ve just introduced.

Now, I’m not the first to implement asides. As I mentioned in my first aside, Matt Mullenweg has had asides on his blog for quite a while, and specifically the “inline” type of asides that I think work the best. (The other kind of asides tend to be listed in a separate and thinner column alongside the main content column, but in my opinion these are often lost in the clutter of what, for most blogs – mine included, is a very “busy” second/third column.)

If you look under the hood of Matt’s HTML code, you’ll see that his asides are rendered in completely different HTML from his normal posts. And that’s fine… but it means you’re either dependent on some third-party plugin or the kind of PHP programming skills which most of us can only dream of.

In my case, I decided that thanks to Sandbox’s richly marked-up HTML, I should be able to achieve the same thing without any PHP or HTML hacking whatsoever. In other words… CSS or bust!

And, dear fellow blog theming afiscionado, that’s the point. If you’re working off semantically rich HTML markup, you should not need to touch the HTML (or worse, PHP)… you should be able to make your dreams come true with CSS alone.

Pure CSS Asides Using The Sandbox Theme

What makes “Pure CSS” asides possible in Sandbox is the fact that each post’s wrapping DIV tag includes a whole stack of identifying classes, inluding a class for each category to which it has been assigned. Here’s the opening DIV tag of my previous post (an aside), so you can see what I’m talking about:

<div id="post-300" class="hentry p1 post publish author-admin category-asides category-gadgetstools y2007 m07 d10 h09">

See that category-asides bit? That’s Sandbox telling the CSS designer that this post has been assigned to the “asides” category. Wow… now you have a way to isolate all asides in CSS and change their styling.

And… well.. I don’t know what to say. See, that’s about it. Everything else I could tell you is technical CSS stuff related to the specifics of my own theme’s CSS and what I had to do to get the asides to look right (mostly turn stuff off… display:none… d’uh!).

Ok so there was just one tiny thing I had to add to the HTML to get it to match Matt’s “look”: I had to wrap a tiny but of text in a SPAN with it’s own class, so I could turn that little bit of text off, otherwise, the number of comments shown at the end of each aside would have had the word “Comments:” in front of it… which I didn’t want. But otherwise, I was true to my word: Pure CSS!

Now… try doing this with any other WordPress theme!

199 thoughts on “Sandbox Theming: Pure CSS Asides

  1. Pingback: Caribbean and Latin America News

  2. Pingback: reserver hotel pas cher

  3. Pingback: kokos trolar

  4. Pingback: ankara orospu

  5. Pingback: ankara kahpeleri

  6. Pingback: orospu ankara

  7. Pingback: fastseo.ir

  8. Pingback: ccn2785xdnwdc5bwedsj4wsndb

  9. Pingback: mersin escort

  10. Pingback: parfum, cosmétique, produits de soins, spécialist de beauté, protection solaire, parfumerie parfum, cosmetica, huidverzorging, beautyspecialist, verzorging, zonnebescherming, parfumerie,

  11. Pingback: Go Here

  12. Pingback: xcn5bsn5bvtb7sdn5cnvbttecc

  13. Pingback: yala beni em beni

  14. Pingback: best pet care in naples

  15. Pingback: addium pill

  16. Pingback: Best drones for sale

  17. Pingback: thrive naturals forskolin stores

  18. Pingback: puppy sitter

  19. Pingback: phen375 review and results

  20. Pingback: naples pet sitter

  21. Pingback: Cerchio nel grano

  22. Pingback: Eulalio Tirado Lizarraga

  23. Pingback: hentai manga

  24. Pingback: raspberry ketone plus weight management supplement

  25. Pingback: lawn mower shop

  26. Pingback: clash royale android

  27. Pingback: pet sitter naples fl

  28. Pingback: Nelly

  29. Pingback: Sexdate

  30. Pingback: she said

  31. Pingback: view more

  32. Pingback: he has a good point

  33. Pingback: casino no deposit bonus�

  34. Pingback: free proxies

  35. Pingback: porno

  36. Pingback: sarasota florida SEO professional

  37. Pingback: funny jokes

  38. Pingback: at here

  39. Pingback: Read More Here

  40. Pingback: Private investigator Pretoria

  41. Pingback: look at these guys

  42. Pingback: candy saga

  43. Pingback: Voetbal den haag

  44. Pingback: weight loss supplements that work fast

  45. Pingback: get gold clash royale

  46. Pingback: xxx

  47. Pingback: Obsession Phrases Examples

  48. Pingback: The Lost Ways Review

  49. Pingback: airport porn

  50. Pingback: psychic source

  51. Pingback: highest rated dog walker in naples florida

  52. Pingback: vip printing

  53. Pingback: http://pagarbrcsurabaya.yolasite.com/

  54. Pingback: https://www.youtube.com/user/tijuanthedon1

  55. Pingback: Obsession Phrases Review

  56. Pingback: chlamydia informatie

  57. Pingback: Lavone

  58. Pingback: ncld

  59. Pingback: free psychic reading

  60. Pingback: emergency food buckets

  61. Pingback: cityprodentists.com

  62. Pingback: continue in a new window

  63. Pingback: Medix College Reviews

  64. Pingback: android game cheat apk

  65. Pingback: escorts

  66. Pingback: Medix College Reviews

  67. Pingback: Medix College Reviews

  68. Pingback: rachaelraymag

  69. Pingback: Medix College Reviews

  70. Pingback: Medix College Reviews

  71. Pingback: in home pet sitter naples

  72. Pingback: Paste Filling Machine

  73. Pingback: judi bola

  74. Pingback: Kamagra

  75. Pingback: Kamagra

  76. Pingback: white label casino

  77. Pingback: Long Island Lice removal

  78. Pingback: riparazione iphone

  79. Pingback: baldness

  80. Pingback: linkedin.easywomen.date

  81. Pingback: sleeping pills

  82. Pingback: bountiful divorce lawyer

  83. Pingback: verhuisbedrijf rotterdam

  84. Pingback: edarling

  85. Pingback: leylandii

  86. Pingback: edarling

  87. Pingback: seo package service

  88. Pingback: piante da siepe

  89. Pingback: seo

  90. Pingback: speargun

  91. Pingback: http:www.christiantshirts.co

  92. Pingback: best home air purifier for pets

  93. Pingback: seo

  94. Pingback: spearguns

  95. Pingback: http://cutt.us/8APCd

  96. Pingback: instagram hack

  97. Pingback: bubblenews

  98. Pingback: fuck you google

  99. Pingback: amway reviews

  100. Pingback: cuzco to puno

  101. Pingback: pot cookware asparagus steamer

  102. Pingback: NBA Online Stream

  103. Pingback: Buy Beats Cheap

  104. Pingback: boligadvokater

  105. Pingback: college schedule maker

  106. Pingback: boligadvokater

  107. Pingback: class schedule maker

  108. Pingback: evifox.lasab.pw

  109. Pingback: twitter bot

  110. Pingback: Roulette

  111. Pingback: Online Casino

  112. Pingback: navigate to this website

  113. Pingback: Tess + Trish

  114. Pingback: massage

  115. Pingback: brazzers videos for free

  116. Pingback: nordstrom coupon

  117. Pingback: Chen

  118. Pingback: la viagra

  119. Pingback: Bedside Lamps

  120. Pingback: emily

  121. Pingback: san antonio bail bonds

  122. Pingback: hackear clash of clans

  123. Pingback: san antonio bail bonds

  124. Pingback: engineer resume

  125. Pingback: Data Recovery Services

  126. Pingback: Data Recovery Services

  127. Pingback: hackear clash of clans

  128. Pingback: buy bounce house cheap

  129. Pingback: Data Recovery Services

  130. Pingback: click here

  131. Pingback: do you agree

  132. Pingback: neo2 scam

  133. Pingback: jvzoo coupon

  134. Pingback: Rafferty Pendery

  135. Pingback: Rafferty Pendery Scientology

  136. Pingback: Free WSET Course

  137. Pingback: Rafferty Pendery Scientologist

  138. Pingback: Rafferty Pendery Scientologist

  139. Pingback: laptop

  140. Pingback: follar

  141. Pingback: Click Now

  142. Pingback: vinyl windows

  143. Pingback: garden design

  144. Pingback: tapas grand central

  145. Pingback: tapas westfield

  146. Pingback: landscape garden design

  147. Pingback: no credit check loans

  148. Pingback: Models

  149. Pingback: romano's bankruptcy

  150. Pingback: mp3 download

  151. Pingback: RugbyOnlineStream

  152. Pingback: best air purifiers guide

  153. Pingback: man lift sales

  154. Pingback: san antonio bail bonds

  155. Pingback: romano's jewelers

  156. Pingback: forex trading live

  157. Pingback: events heroes

  158. Pingback: Storage Gloucestershire

  159. Pingback: ???????

  160. Pingback: Finanzen

  161. Pingback: escortbayan

  162. Pingback: Removals Gloucestershire

  163. Pingback: painting company in Derby

  164. Pingback: tantric massage

  165. Pingback: http://printingvip.bravesites.com

  166. Pingback: printingvip.bravesites.com

  167. Pingback: garden designers

  168. Pingback: sms lån

  169. Pingback: printingvip.com

  170. Pingback: agen ion casino online

  171. Pingback: garden design london

  172. Pingback: sms lån

  173. Pingback: iv fluid therapy side effects

  174. Pingback: Best SEO tools

  175. Pingback: avast keygen

  176. Pingback: iv therapy miami

  177. Pingback: Amira

  178. Pingback: nutricionista barcelona

  179. Pingback: club flyers

  180. Pingback: buy hacklink

  181. Pingback: buy hacklink

  182. Pingback: buy hacklink

  183. Pingback: jajajajajajaja

  184. Pingback: jajajajajajaja

  185. Pingback: jajajajajajaja

  186. Pingback: jajajajajajaja

  187. Pingback: dlh

  188. Pingback: vitamin iv therapy in nj

  189. Pingback: payment proof mca

  190. Pingback: unlock samusng

  191. Pingback: iv therapy deerfield

  192. Pingback: https://www.facebook.com/workhorsepluginreviewalexbecker/

  193. Pingback: samsung unlocking

  194. Pingback: iv therapy medical center

  195. Pingback: purificadora

  196. Pingback: orzech amerykanski

  197. Pingback: blaty drewniane dlh

  198. Pingback: http://squeezed-states.info/story.php?id=15801

Leave a Reply