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.
Html 5 Gallery
6 comments
page 1305
Write One Plugin Without Repetition Deviation Or Hesitation
2 comments
page 27
Updating Code Snippets Here
no comment
page 1338
Using Your Own Url Shortener
4 comments
page 1190
Wordpress Chat
3 comments
page 1308
Charcoal Theme Available For Wordpress
2 comments
page 959
Html 5 Gallery
6 comments
page 1305
Html 5 Gallery
6 comments
page 1305
Post Image The Easy Peasy Way
26 comments
page 1065
Html 5 Gallery
6 comments
page 1305
Wpunlimited The Ultimate Wordpress Theme
3 comments
page 1141
Dont Mess With My Toot Toot
16 comments
page 599
Wordpress Chat
3 comments
page 1308
Using Your Own Url Shortener
4 comments
page 1190
Quick N Dirty Bookmark Navigation
no comment
page 127
Categories Vs Tags Either Neither Or Both
12 comments
page 7
My Experience Of Flexx
4 comments
page 1026
Premium Ithemes Review Photo Gallery
4 comments
page 226
3 Ways To Speed Up Your Blog Without A Cache Plugin
one comment
page 1321
Wordpress 25 Exif Fields
12 comments
page 230
Adding Settings To Admin Pages
3 comments
page 793
Updating Code Snippets Here
no comment
page 1338
Html 5 Gallery
6 comments
page 1305
Post Image The Easy Peasy Way
26 comments
page 1065
Using Your Own Url Shortener
4 comments
page 1190
Using Wordpress As A Php Framework
2 comments
page 335
Html 5 Gallery
6 comments
page 1305
Wordpress Vs Graffiti
8 comments
page 95
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?).)