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!

402 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:

  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:

  54. Pingback:

  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:

  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:

  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:

  92. Pingback: best home air purifier for pets

  93. Pingback: seo

  94. Pingback: spearguns

  95. Pingback:

  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:

  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:

  166. Pingback:

  167. Pingback: garden designers

  168. Pingback: sms lån

  169. Pingback:

  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:

  193. Pingback: samsung unlocking

  194. Pingback: iv therapy medical center

  195. Pingback: purificadora

  196. Pingback: orzech amerykanski

  197. Pingback: blaty drewniane dlh

  198. Pingback:

  199. Pingback: comprar en usa y recibe en colombia

  200. Pingback: Business articles

  201. Pingback: restaurants bluewater

  202. Pingback: tzar 1sz

  203. Pingback: medical billing schools

  204. Pingback: spanish tapas in london

  205. Pingback: drjaydani

  206. Pingback: porno español

  207. Pingback: edarling opiniones 2016

  208. Pingback: american heritage biomass

  209. Pingback: sklejka dlh

  210. Pingback: Solo Ads

  211. Pingback: Online Reviews

  212. Pingback: liquid iv ft lauderdale

  213. Pingback: Storage Company Cheltenham

  214. Pingback: blog here

  215. Pingback: elewacja dlh

  216. Pingback: Removals Gloucester

  217. Pingback: Removals Cheltenham

  218. Pingback: Removals Company Gloucester

  219. Pingback: Original Product For Sale

  220. Pingback: podlogi drewniane dlh

  221. Pingback: cedr dlh

  222. Pingback: Resources

  223. Pingback: kant�wka dlh

  224. Pingback: Piece Of Heaven


  226. Pingback: birthday wishes

  227. Pingback:

  228. Pingback: junk cars

  229. Pingback:

  230. Pingback: pornhub

  231. Pingback: modrzew syberyjski

  232. Pingback: escort

  233. Pingback: escort

  234. Pingback: 刀塔传奇充值

  235. Pingback: escort

  236. Pingback: best quality umbrella review

  237. Pingback: escort

  238. Pingback: this post

  239. Pingback: Vietnam videos

  240. Pingback: Surviving The Final Bubble

  241. Pingback:

  242. Pingback: san antonio bail bonds

  243. Pingback: san antonio bail bonds

  244. Pingback: Diabetes Destroyer

  245. Pingback: Bad service

  246. Pingback: The Lost Ways Review

  247. Pingback:

  248. Pingback: spiritual life development coach

  249. Pingback: Bad service

  250. Pingback: london tantric

  251. Pingback: london tantric

  252. Pingback: Teisha

  253. Pingback: london tantric

  254. Pingback: Jorge

  255. Pingback: london tantric

  256. Pingback: Fitness quotes

  257. Pingback: Trending Videos

  258. Pingback: Detroit Lions Hoodies

  259. Pingback: Ebonite Bowling Balls

  260. Pingback: online tee shirts

  261. Pingback: plr ebooks

  262. Pingback: cars lagos

  263. Pingback: Manifestation Miracle Review

  264. Pingback: Hottest WAGs

  265. Pingback: where to buy gymnastics equipment for home

  266. Pingback: tanya

  267. Pingback: Justin Verlander Replica Jersey

  268. Pingback: break fix

  269. Pingback: kalici makyaj

  270. Pingback: Pure Natural Healing

  271. Pingback: Detroit Pistons Andre Drummond

  272. Pingback: Gordie Howe Detroit Red Wings Jersey

  273. Pingback: electric water heater

  274. Pingback: boiler maintenance brussels

  275. Pingback: Justin Verlander Detroit Tigers Jersey

  276. Pingback: web design

  277. Pingback: electric water heater

  278. Pingback: boiler maintenance brussels cheap

  279. Pingback: recupero dati

  280. Pingback: recupero dati

  281. Pingback: Tenerife Property

  282. Pingback: recupero dati

  283. Pingback: oversized recliner

  284. Pingback: forex

  285. Pingback: techos de aluminio

  286. Pingback: spam king

  287. Pingback: Detroit Tigers Jerseys

  288. Pingback: alpha brain review

  289. Pingback: kalici makyaj

  290. Pingback: Detroit Tigers T-Shirts

  291. Pingback: alpha brain review

  292. Pingback: ego cialis

  293. Pingback: gang bang

  294. Pingback: ego cialis

  295. Pingback: academia do importador

  296. Pingback: academia do importador

  297. Pingback: Michigan State Spartans Store

  298. Pingback: escape rooms

  299. Pingback: regrow your hair

  300. Pingback: Detroit Lions Sweatshirts

  301. Pingback: visit here

  302. Pingback: Detroit Sports Apparel

  303. Pingback: electrician

  304. Pingback: electrician

  305. Pingback: how to regrow lost hair

  306. Pingback: Detroit Red Wings Jersey

  307. Pingback: electrician

  308. Pingback: electrician

  309. Pingback: xxx-xnxx erotico Parodias

  310. Pingback: United Wireless usa

  311. Pingback: the tao badass book

  312. Pingback: Sexchillan

  313. Pingback: Escorts en Copiapo

  314. Pingback: Escort en Chillan

  315. Pingback: 健麗去眼袋

  316. Pingback: Escort iquique

  317. Pingback: Detroit Tigers Jersey

  318. Pingback: Matthew Stafford Jersey

  319. Pingback: Matthew Stafford Jersey

  320. Pingback: hoverboard for sale cheap

  321. Pingback: free Bootstrap HTML Template

  322. Pingback: Matthew Stafford Jersey

  323. Pingback: dewedding

  324. Pingback: social

  325. Pingback: cool games

  326. Pingback: Detroit Red Wings Store

  327. Pingback: best dating site toronto

  328. Pingback: Detroit Red Wings Store

  329. Pingback: viagra gdzie najtaniej

  330. Pingback: Viagra opinie

  331. Pingback: Detroit Lions Blog

  332. Pingback: Detroit Lions Blog

  333. Pingback: Detroit Lions Blog

  334. Pingback: bible study teaching

  335. Pingback: porno

  336. Pingback:

  337. Pingback: Free XXX Porn

  338. Pingback: Asian Porn

  339. Pingback: MILF Porn

  340. Pingback: MILF Porn

  341. Pingback: christian blogspot

  342. Pingback: Asian Porn

  343. Pingback: online game

  344. Pingback: Interracial Porn

  345. Pingback: Best Reviews

  346. Pingback: Free XXX Porn

  347. Pingback: free online game

  348. Pingback: cisco

  349. Pingback: Kamagra najtaniej

  350. Pingback: free games

  351. Pingback: Kamagra opinie

  352. Pingback: uab ost express

  353. Pingback: mortgage broker Toronto

  354. Pingback: mortgage broker Toronto

  355. Pingback: Free Amateur Porn

  356. Pingback: Storm Bowling Balls

  357. Pingback: mortgage broker Toronto

  358. Pingback: Fetish Porn

  359. Pingback: Anal Porn

  360. Pingback: Michigan Wolverines Jackets

  361. Pingback: Detroit Pistons

  362. Pingback: Teen XXX Porn

  363. Pingback: Sophie Dee Porn

  364. Pingback: Gay Lesbian Porn

  365. Pingback: Lisa Ann Porn

  366. Pingback: Hardcore Porn

  367. Pingback: Gay Porn

  368. Pingback: Pornstar XXX Videos

  369. Pingback: Brandi Love Porn

  370. Pingback: Homemade Porn

  371. Pingback: Reality Kings Porn

  372. Pingback: pest control

  373. Pingback: Bree Olson Porn

  374. Pingback: pvp serverler

  375. Pingback: Mia Khalifa XXX

  376. Pingback: Dillion Harper Porn

  377. Pingback: Sara Jay XXX

  378. Pingback: Naughty America Porn

  379. Pingback: Michigan Wolverines T-Shirts

  380. Pingback: Bowling Balls

  381. Pingback: Detroit Tigers Sports Memorabilia

  382. Pingback: Detroit Red Wings Store

  383. Pingback: pest control

  384. Pingback: pvp serverler

  385. Pingback: Brazzers Porn

  386. Pingback: Detroit Tigers Jerseys

  387. Pingback: Detroit Sports Memorabilia

  388. Pingback: Detroit Lions Apparel

  389. Pingback: Bowling Store

  390. Pingback: Detroit Red Wings T-Shirts

  391. Pingback: porno

  392. Pingback: pest control

  393. Pingback: Viagra

  394. Pingback: porno

  395. Pingback: pest control

  396. Pingback: Oneida

  397. Pingback: real gold chain

  398. Pingback: Since 2005 we are the Best and Most Experienced Ikea Kitchen

  399. Pingback: watch brazzers videos

  400. Pingback: Cialis apteka

  401. Pingback: Nelly

Leave a Reply