Theme customization with CSS: Sandbox competition

sandbox-wrock-itThe Sandbox theme focuses on “semantic markup”, which means that it exposes all  available data marked up in easily distinguishable ways, leading to maximum ability to customize using only CSS.  This is of special interest to users of wordpress.com, where customization is permitted to the CSS, but not to the php portion of each theme.

Background

The appearance of WordPress pages is governed by themes, consisting of a php module, plus complementary CSS files. A theme developer might expect a theme user to customize either of these parts of the theme. However, at wordpress.com, access is permitted only to the CSS.

Given the CSS-only constraint, I asked what kinds of customizations are feasible, and what kind of customizations are difficult or impossible. Is it easy to use CSS to change the number of columns? Move a menu? Switch between fixed and flexible width?  This would tell us which themes are good starting points relative to particular goals.

My question prompted a suggestion to look at the Sandbox competition entries. This, I learned, is the theme that tries to supply “semantic markup” html — it’s directed at empowering flexibility at the CSS level. So if we examine what variations are possible with this theme, we probably understand the most customization that can be achieved.  Other themes may produce html that’s more limited. In fact, after looking at Sandbox possibilities, one wonders why bother with other themes!

At any rate, I decided to survey the Sandbox Competition winners, and tabulate their features. This gives a sense of the CSS customizations possible, and also provides a reference regarding which themes have CSS techniques that one might want to adopt.

Sandbox Competition winners

N Sandbox variant Cols Sidebars Flex width Header image Tagline Menu
H/V
Posn Drop Tab-ness Footer Color notes Comments
1 BAWS 2 R no yes yes H blw yes yes Quite selective styling
2 Black and Blue and Read All Over 2 R no no? yes H in active yes Menu effects
3 Blackbox 2 L no no yes yes
4 Blueberry 3 RR no no? yes H top yes Green, blue, white on black. (Nice header lighting)
5 Butterfly 3 RR no yes yes ? blw yes (Broken menu layout)
6 Ceruleus 2 L no yes yes yes White/orange on blue. Rounded borders
7 Chocolate Vanilla 2 R no no yes V in yes Dark and white on beige
8 CITYscape 3 RR no yes yes yes
9 Crystal Liberty 3 LL no yes yes H blw yes blues/orange on white
19 Diurnal 3 RR YES yes yes H blw inert yes blue/black/grey on white OR
Red/pink on grey
Colors change with time of day!
11 Elegantly Presented 2 R no yes no H blw yes Maroon/pink/blue on white Title in image.
12 Essay 2 R no yes yes H blw yes yes
13 Evening Grass 1 no yes yes H blw active yes Post area background image
14 Fashionable 2 R no yes yes V blw yes Purple/pink on black. Glowy decorations
15 Hourglass 3 RR no ?? yes H blw active yes Lime/blue on white. Corner slashes
16 Lovely Green 2 R no yes yes V blw yes Greenness. Background images; decorations
17 Magnolia 3 RR no yes yes H blw yes yes Blue/grey on white
18 Milkia 2 L no no yes yes Head in sidebar
19 MIX 3 LR no ?? yes H in yes yes Dark/light greens on white Bullet images
20 Modernistic 2 L no no yes ? ? yes Blue/brown on white (Broken sidebar layout)
21 Mom 2 R no yes yes ? blw yes Lime/maroon on white; Black/maroon on pink (Broken menu)
22 Moo-Point 2 R no no yes H blw yes yes Post info left of post
23 Moon Under Uranus 1 no ?? yes H blw active yes Dark-blue, yellow, orange, black widgets at bottom.
24 One Sweet Theme 2 L no yes in image H blw yes Green/blue/pink on beige/ White on pink
25 Oranges 3 RR no yes no yes Orange/black on off-white Title in image
26 Oriole 2 R no ?? yes V in yes Red/blue on white
N Sandbox variant Cols Sidebars Flex width Header image Tagline Menu
H/V
Posn Drop Tabi-ness Footer Color notes Special
27 Pagoda 3 RL no yes yes yes backgound images
28 Picnic 2 L YES no yes H top yes Pink/white on woven brown Widgets at bottom
Header in sidebar
Posts scroll separately
Post background images
Boxed post info
29 Ponjong 3 RR YES no yes H blw yes active yes Lime/white/yellow on black. Black on yellow
30 Potassium 2 R no ?? yes H blw active yes Blue/black on white/grey. Yellow/orange buttons Background images on posts, widgets, styles. Rounded features
31 Prima 2 R no yes yes H blw yes Orange/blue on off-white/beige Some widgets at bottom
32 Promised Land “2” L no ?? ?? H top yes yes ??? No header per se
Single post, older in title-only boxes.
Widgets at bottom
33 Sakeena 2 R no yes yes H side yes yes Black on white; white on dark-grey Novel wide sidebar overlaps header
34 SandBAM 2 L no no no V side in sidebar Combos of maroon, white, black, grey Header in sidebar.
Sidebar height adjusts to window.
Posts area has separate scroll
35 Sandbox 2 L yes no yes H blw yes yes Default html element colors Mostly unstyled text
36 Sandbox Kubrick 2 R no ?? yes H blw active yes Black/blue on white Rounded page and header
37 SandPress 3 RR no ?? yes H top active yes Black/dark grey on light grey Iconic post-date, author, comments, pages
Horiz menu shows second level
38 SAZI 2 R YES yes yes yes Light on dark grey Page background image pattern
39 Scrappr 1+ no yes yes H blw yes Dark on white and yellow/white Post bullets in left margin
Horiz menu with second level
40 Shades of Gray 2 R YES yes yes H blw yes Black on white Flex width with max limit
Some widgets at bottom
41 SNDBX 2 R no no yes yes Dark blue/black on white
42 Takimata 1 no no yes yes white/grey on some kind of taupe-y color Post title/date/author (no content), arranged in two big cols.  Novel layout ideas. Different layout on diff pages.
43 The Blue Butterfly Layout 2 L no ?? yes in sidebar Blue, green, black on white Graphical border decorations.
44 Tiffany Blue 2 R no yes yes H blw inert in sidebar Black on white, blue
45 Veracity 2 R no no yes H blw active yes Green/white/blue on dark green
46 Walk in the Shadows 3/4 (L)RR no yes yes H blw active in sidebar Purple/blue/white on grey/purple Post info in right margin
Cool “lighting” and menu effects
Big quotes.
47 We Love WordPress 3 RR YES yes no ? blw yes Blue, black on white (Broken menu layout)
48 Wrock It 2 R YES yes yes H top yes Blue, pink, white, black on grey Post title graphic with fly-over effect
_________

Key:

Column Description
Menu H/V H: Horizontal. V: Vertical.
Posn Position of menu: top (of page); blw: below header; side: in sidebar.
Tabness Does menu item behave or look like tab?
Active: menu items may look like tab, AND they change appearance corresponding to selected page.
Inert: Look like tabs, but don’t change appearance with page
Drop Menu item has drop-down submenu

:

Advertisements

Post a Comment

Required fields are marked *

*
*

%d bloggers like this: