May 25, 2009
Over the past few months I’ve looked at a look of themes. This has inspired me to try and produce a ‘premium’ theme of my own and I’ve started on what I consider to be the most important part: typography.
The basics of typography are clear: font-family, font-size, color, margins, baseline rhythm, etc. But there is more to it than that. To that end I have a few questions about your experiences with themes.
Firstly I want to know what areas of typography have you found lacking in the themes you have used? One area I have always wanted to see, and so will build in to mine is the option to style introductory paragraphs separately (paragraphs with the class ‘introduction’ that kick of a post).
Second, do you prefer control (i.e. sheer number of changeable variables) or automation (you enter a few values and the rest is calculated for you)?
Finally, are there any standard blocks of HTML that need styling? I don’t mean simply paragraphs, I mean html with specific classes. For example:
[html]
What I really want to do with this theme is to move the art of theme options one step on from where it is now. This is not an easy task, but I think it is possible with your help.
Fun Without Cliches
12 comments
page 861
Wordpress Chat
3 comments
page 1308
Post Image The Easy Peasy Way
26 comments
page 1065
Dont Mess With My Toot Toot
15 comments
page 599
Post Image The Easy Peasy Way
26 comments
page 1065
Using Your Own Url Shortener
4 comments
page 1190
Dont Mess With My Toot Toot
15 comments
page 599
Six Million Ways To Die Choose One
14 comments
page 1128
Updating Code Snippets Here
no comment
page 1338
Easy Peasy Images Suggestion Roundup
21 comments
page 1073
Html 5 Gallery
6 comments
page 1305
Post Image The Easy Peasy Way
26 comments
page 1065
Post Image The Easy Peasy Way
26 comments
page 1065
Why I Ditched Disqus
5 comments
page 1175
Updating Code Snippets Here
no comment
page 1338
Using Wordpress As A Php Framework
2 comments
page 335
Post Image The Easy Peasy Way
26 comments
page 1065
Poll Daddy Reviewed
2 comments
page 42
Html 5 Gallery
6 comments
page 1305
Html 5 Gallery
6 comments
page 1305
Dont Mess With My Toot Toot
15 comments
page 599
Why You Should Try Netbeans
6 comments
page 973
Quick N Dirty Admin Login Screen
no comment
page 128
Why I Ditched Disqus
5 comments
page 1175
Fun With Sidebar Tabs Styling
2 comments
page 336
Quick N Dirty Admin Login Screen
no comment
page 128
Using Your Own Url Shortener
4 comments
page 1190
3 Ways To Speed Up Your Blog Without A Cache Plugin
one comment
page 1321
My Experience Of Flexx
4 comments
page 1026
Wpunlimited The Ultimate Wordpress Theme
3 comments
page 1141
Post Image The Easy Peasy Way
26 comments
page 1065
(__)
`
Ryan
PS: You will probably be reviewing a plugin of mine in the next month and a bit. When you do, don’t go looking at the CSS for the admin panel! … I don’t always practice what I preach :P
(__)
`
Ryan
Yes is, in fact it is a problem in most of them. Firefox, Opera and IE8 (I think) all have the ability to use text-resizing instead of the default zoom functionality, it’s just not as easy to access as in previous versions.
Google Chrome uses text resizing only and does not have any zoom functionality at all.
Having said that, all of those browsers incorrectly resize text in px’s whereas they should leave them at their set pixel height as recommended in the W3C specs, but they’ve chosen not to.
However using px’s is generally just sloppy coding IMO. EM’s are there for a reason and should be used accordingly, particularly if some future browser decides to resize the text the way they’re supposed to.
(__)
`
andrew
That’s an interesting point. In fact I have made the conscious decision not to use EMs in my theme. I used to use them for everything but I don’t think font resizing is an issue in any modern browser.
(__)
`
Ryan
The worst thing about most themes is that they don’t use EMs for heights. Font sizes should always be measured in EMs and definitely not PXs.
(__)
`
Chip Bennett
I think that trying to determine what classes people might use in the body of their posts would prove to be somewhere between daunting and impossible.
Depending on the structure of your post, you may not even need to define a special class for your introductory paragraph. (The more semantic the markup and CSS, the better.)
For instance, if your post has its title as an H2 (or H3), that is immediately followed by your introductory paragraph P, then your CSS declaration can use the “H2 + P” (or “H3 + P”) selector to style just the first paragraph following your post’s title.
(Note that you’ll probably need to increase the specificity of the declaration, such as:
#page #center #post H3 + P
Or, if your post is split into div.post-title, div.post-body, and div.post-footer, you could use:
#page #center #post-body > P
to style the first P that is a descendant of your div.post-body.
(Of course, I don’t think those selectors are backwards-compatible with IE6 (why can’t it rest in peace already?).)