Talk from WordCamp St. Louis

1. Customize your theme
using CSS

2. Michael Arestad
@michaelarestad

7. CSS
California Cascading Style Sheets

8. CSS
Breaks Styles your site

9. selector {
property: value;
}

10. .entry-title {
color: red;
}

11. It’s totally cool to break stuff.

12. Theme Structure

18. Header
Content
Widget Area (sidebar)
Footer

19. Find a theme with these
elements close to where you
want them.

20. Editing

22. Cool.

24. Dangerous.

27. Neato.

29. Child. Theme.

30. Super cool.

32. /*
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");

33. /*
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");

34. /*
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

35. Editing theme CSS directly: Scary
Edit CSS with plugins: Rad
Child Themes: Super cool

36. DEMO TIME!

37. Browsers

40. Your site will render differently
across various browsers.

41. Vendor Prefixes

42. .entry-title {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

43. Allow browsers to use
newer CSS properties

44. .entry-title {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

45. How do I know which
ones to use?

47. caniuse.com

49. box-shadow mdn

52. Responsive Themes
(and how to avoid breaking them)

56. Media Queries

57. @media (max-width: 768px) {
.site-header {
height: 160px;
}
}

58. Painless changes

59. Colors
Fonts
Backgrounds

60. Not always painless changes

61. Layout
Positioning
Widths
Padding
Floats

62. Recap:
Directly editing theme CSS is scary.
Child themes are awesome.
Use Inspector!
Enjoy your customized theme.

63. Learning CSS

65. css-tricks.com

67. htmlandcssbook.com

68. Questions

69. Thank you!
@michaelarestad