Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Customize your theme using css

1,316 views

Published on

Talk from WordCamp St. Louis

Published in: Design
  • Be the first to comment

  • Be the first to like this

Customize your theme using css

  1. 1. Customize your theme using CSS
  2. 2. Michael Arestad @michaelarestad
  3. 3. CSS California Cascading Style Sheets
  4. 4. CSS Breaks Styles your site
  5. 5. selector { property: value; }
  6. 6. .entry-title { color: red; }
  7. 7. It’s totally cool to break stuff.
  8. 8. Theme Structure
  9. 9. Header Content Widget Area (sidebar) Footer
  10. 10. Find a theme with these elements close to where you want them.
  11. 11. Editing
  12. 12. Cool.
  13. 13. Dangerous.
  14. 14. Neato.
  15. 15. Child. Theme.
  16. 16. Super cool.
  17. 17. /* Theme Name: Theme URI: Description: Author: Author URI: Template: Version: Tags: Text Domain: */ Twenty Fourteen Child http://example.com/twenty-fourteen-child/ Twenty Fourteen Child Theme John Doe http://example.com twentyfourteen 1.0.0 light, dark, two-columns, right-sidebar twenty-fourteen-child ! @import url("../twentyfourteen/style.css");
  18. 18. /* Theme Name: Theme URI: Description: Author: Author URI: Template: Version: Tags: Text Domain: */ Twenty Fourteen Child http://example.com/twenty-fourteen-child/ Twenty Fourteen Child Theme John Doe http://example.com twentyfourteen 1.0.0 light, dark, two-columns, right-sidebar twenty-fourteen-child ! @import url("../twentyfourteen/style.css");
  19. 19. /* Theme Name: Theme URI: Description: Author: Author URI: Template: Version: Tags: Text Domain: */ ! Twenty Fourteen Child http://example.com/twenty-fourteen-child/ Twenty Fourteen Child Theme John Doe http://example.com twentyfourteen 1.0.0 light, dark, two-columns, right-sidebar twenty-fourteen-child
  20. 20. Editing theme CSS directly: Scary Edit CSS with plugins: Rad Child Themes: Super cool
  21. 21. DEMO TIME!
  22. 22. Browsers
  23. 23. Your site will render differently across various browsers.
  24. 24. Vendor Prefixes
  25. 25. .entry-title { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
  26. 26. Allow browsers to use newer CSS properties
  27. 27. .entry-title { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
  28. 28. How do I know which ones to use?
  29. 29. caniuse.com
  30. 30. box-shadow mdn
  31. 31. Responsive Themes (and how to avoid breaking them)
  32. 32. Media Queries
  33. 33. @media (max-width: 768px) { .site-header { height: 160px; } }
  34. 34. Painless changes
  35. 35. Colors Fonts Backgrounds
  36. 36. Not always painless changes
  37. 37. Layout Positioning Widths Padding Floats
  38. 38. Recap: Directly editing theme CSS is scary. Child themes are awesome. Use Inspector! Enjoy your customized theme.
  39. 39. Learning CSS
  40. 40. css-tricks.com
  41. 41. htmlandcssbook.com
  42. 42. Questions
  43. 43. Thank you! @michaelarestad

×