Target anything wilth body classes!
0 likes81 views
The document discusses the challenges of working with an old Genesis child theme and the need to update it to HTML5 while improving its structure. It emphasizes the importance of body classes in theme design for creating customized styles for different audiences and content types. The author highlights the flexibility of Genesis themes in adding body classes to customize the appearance of various sections of a website.
Target anything wilth body classes!
- 1. So Im working on this ball again. Its still running on an old Genesis child theme, and Im tired of falling all over the div IDs. Time to port to HTML5 and spruce up a few things. Now, lets take a look at something.
- 2. If you were here last year, you know this joke. But whats the difference between that ball - and this basic widgeted home page?
- 3. 1 2 3 4 Not one thing, from a widget standpoint. That was last years punchline. If you want to get technical, yes - the Clinix page has a header, and Frontenac - the ball - doesnt. The other thing they have in common is the reason weve gathered here today:
- 4. Home pages almost always have the home body class defined right here.
- 5. Heres our big damn ball this from last years version of the live site.
- 6. Heres a content page.
- 7. The pros page has the pros body class.
- 8. Heres a widgeted front page
- 9. Heres a content page.
- 10. Now, how many times have you built a home page and NOT, almost without thinking, defined its styles like this: .home row, .home .entry-footer, home this, home that. You couldnt do that if the home body class wasnt already baked into your theme.
- 11. Which it is, in almost every theme. Or a reasonable facsimile. Heres Agency Pro, a Genesis child theme with HTML5.
- 12. Ever wonder how Genesis themes and others pull off their color variations? Heres Agency Pro again.
- 13. And whattya do when a client has two completely different audiences to attract? Like my friend Naz here. Day business: commercial real estate.
- 14. Other times, hes Coach Naz on the tennis court. One site, two topics two audiences. Two body classes.
- 15. What if the Pros area
- 16. needs to look different
- 17. from the programs area? Now we have three body classes!
- 18. Now, were not limited to any certain words in that long-butt body-class rule. We can use any of em.
- 19. Now, were not limited to any certain words in that long-butt body-class rule. We can use any of em.
- 20. Now, were not limited to any certain words in that long-butt body-class rule. We can use any of em. Or if we dont like those, we can make our own.
- 21. Here's a category archive from a hypothetical food blog - say, soups and stews. We all know what a category archive is? Good
- 22. Maybe we want the dessert archive to have different colors.
- 23. In Genesis this is easy! We just add the body class - dessert - to the bottom of the post in the admin.
- 26. Then write new rules that all start with .dessert ...
- 27. Heres one that also works in Genesis but doesnt need it I grabbed it from Philip Newcomer, the @BackwoodsCoder, who looks to have some nifty-looking plugins. Now, his version checks for single posts, but I like the idea of adding a body class to the archive or anything else that might be in that category. And, this adds all the categories to the appropriate body-class tags. So no picking and choosing - just style em ;like you find em.
- 28. So that foreach function assigns the category slug here
- 29. See - there it is - it adds the slug
- 30. and here!
- 31. Here it is, in the markup! PS> the function picks up the slug, so if you want this thing short, you can make it short. No reason to have to type something that looks like your kitten wrote it in the middle of the night. Heh. Maybe writing a function once is way better than writing 'desserts' on fifteen posts!
- 32. So with one function and as much or as little CSS as you feel like, you can go from salty chicken soup
- 33. to sugary, chocolatey cupcakes
- 34. To a buttoned-up business persona
- 35. To a fun-loving tennis coach and so much more.