Inspired by the incredible time I had at An Event Apart San Francisco, I’ve decided to learn a little bit of CSS to actually theme this blog. What should I do first?
The last couple of years I’ve had no real personalized experience on this blog at foolswisdom.com. Partly, because it greatly eases testing of the core WordPress software, partly to test Sandbox as it’s updated, and mostly because I’ve been too lazy, and busy helping other people.
Although, numerous times people have generously pointed out that “CSS is missing from your blog”, I’m surprised I haven’t received more nasty comments and emails about how offensive it really is.
What should I do first?
Well, you have to be more specific first. What do you mean by CSS missing? Is it because it isn’t pretty? Is that what you want to fix first? Or is it because you need to know what first to learn about in order to design your own WordPress Theme?
Pretty comes without much effort in WordPress. There are a variety of “skins” to apply to the Sandbox Theme or you can choose another WordPress Theme. No learning involved. And it’s a great experience to search out and test drive a variety of WordPress Themes. You learn a lot about how WordPress works as you click through all the options Theme designers offer, finding out what you like, what you don’t, and what you want on your blog.
Or you can start modifying the CSS on what you have already with the Sandbox Theme’s stylesheet.
Or start from scratch and hope for a long learning curve.
Where do you want to start?
background-color: black;
color: green;
font-family: fixed;
The first thing I’d do is nail down a structure and readable content width.
After that … don’t get me started.
(Am I the only person who likes The Sandbox as-is?)
Another thing I like to do first (although I usually do this after deciding on a structure) is reset everything with Eric Meyer’s
reset.cssand then rebuild everything. You need some good dummy content to do this with but it forces you to really think about everything you’re presenting; what it means, where it belongs and how it relates to everything else. That’s kind of an advanced exercise I think—after floating and positioning—but it’s a good one.for starters, don’t jump off the deep end. Learning to make layouts that don’t bork in IE/Opera/Godknowswhatpetbrowser is tough. Start with a CSS-only theme that you like (child theme, Sandbox Skins Comp style). From there, quantify what you don’t like, or what you do want. Trying to quantify what you should change about a blank slate is nearly impossible.
If you’re determined to start from zero, then start with a global reset
meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Then pick your base layout:
blog.html.it/layoutgala/
Then set your typography:
24ways.org/2006/compose-to-a-vertical-rhythm
(although you should always start with 76%, not 75%: thenoodleincident.com/tutorials/typography/ )
First, you want to think of a design you’d like to create.. it’s good to learn CSS, but that’s only the tool of the trade. Know what you want to design first, then learn as you go trying to figure out how to style it in CSS. That seems to be the best way of learning technical material.
And as far as learning CSS, try to go reputable websites like w3schools.com or other websites that just list the hardcore facts. Web designers/developers like me developed our own style and opinion that are not always best practices (or whatever) so things might get a little confusing. It’s best to form your own opinion after the fact instead of being influenced by it.
And if you really want to invest some time in learning CSS, i’d check out Eric Meyer’s CSS: The Definitive Guide. You can probably get it at your public library if their awesome like that.
But whatever you do, practice as you learn so it sinks in.
Letme know if you need any help along the way ;P
No point in styling it just for the hell of it.
I agree with Ian, just pick a nice column width for the content so the line length remains readable, maybe choose a nice sans-serif font, and you’re done.
Just change your default typeface to Georgia and call it a day
I had lots of fun doing my Sandbox-not-looking-like-Sandbox style for my blog — perhaps poking at the CSS might be inspiration for what’s possible for yours? Definitely check out the hourly-colours stuff. I *LOVE* Sandbox!
You forgot to add:
body p {text-decoration: blink; }
Sure Eric Meyer is THE CSS Guru but as a Designer and Typographer he can be at best described as BASIC and is often worse…
Check out jontangerine.com for cutting edge web typography (which, considering the content of your blog is just what you need) High-End-Typography isn´t harder to achieve with CSS than B(l)og-Standard-Typography, you just need to gain an understanding of what makes “good” typography good and why “bad” typography is bad. Don´t waste time learning CSS, there are zillions of resources out there and the whole shebang is carefully documented at w3c! Instead spend a couple of hours googling Typography that will take you further…
Funny, I thought you were going for an “old school” look. Some people are really, really into the stripped down, lean and mean styling as a statement about minimalism or usability. I mean, look at Jakob Nielsen’s site. He’s the original web usability guru, but I HATE the way he’s styled his site. I mean, in one way of thinking, sure, it’s functional, but… Ick.
The style on this site, though, is okay for me. Oh, sure, it could use a little something, but it’s readable, easy to navigate and loads fast. And it certainly is NOT offensive!
First thing to do in any new undertaking is to establish a goal, evaluate your resources, and perform a survey on what’s already been done by others so you don’t end up reinventing the wheel. Learning CSS and updating the theme for this blog do not necessarily have to be the same thing. There are many excellent themes already uploaded on the WordPress directory. I would suggest you find one that you like and use it to model your own desired effect. Good luck on your project.
Well, Jakob Nielson would argue that content is king. Take a look at his site http://www.useit.com/ and you’ll see what I mean if you have not been there before.
Anyhow, I am a fan of semantic markup and valid XHTML and CSS and all of that. Before you go doing the whole reset thing, maybe take a look at Jeffrey Zeldman’s “Designing with Web Standards” and perusing good old alistapart.com itself (though you must, because you went to An Event Apart, right?.
Start simple. Maybe some typography changes. Maybe set a liquid width that maxes out at 80% of the users screen?
The first thing I would do is to Go Shopping !!! There are several good places mentioned in comments here to start shopping for new CSS styles. But if you need to keep it simple for testing core WP then you might want to start with simple formatting – background and foreground colors, fonts, and columns. The key thing to remember about any CSS changes it you Must see how the page looks in different browsers and versions of browsers. This blog is kinda nice using anti-styling.
“anti-styling” – I like that Carolyn
I’d agree with a handful of the comments above – keep it simple but go for a fixed width
anti-styling is the new styling
First thing to do in any new undertaking is to establish a goal, evaluate your resources, and perform a survey on what’s already been done by others so you don’t end up reinventing the wheel. Learning CSS and updating the theme for this blog do not necessarily have to be the same thing. There are many excellent themes already uploaded on the WordPress directory. I would suggest you find one that you like and use it to model your own desired effect. Good luck on your project.
i pefer using Eric Meyer’s reset.css. this is a awesome thing. i can suggest u about color u can use white background color and sidebar or navigation blue/green. i think make it look simple that’s it.