This document discusses how to use CSS to customize a WordPress website, providing examples of how to add backgrounds, round corners, change colors and more. It includes before and after examples and resources for learning more about CSS. The goal is to showcase sensational CSS skills and tips for customizing a WordPress site through CSS.

1. Sensational CSS:
How to Show Off Your Super Sweet CSS Skills
Karen Arnold | @karenalma | karenalma.com
karenalma@gmail.com

2. Find it here: http://wordpress.org/extend/plugins/safecss

4. CSS Editor

7. Add a body background
body {
background:#EFE9DB url('images/pattern.jpg') fixed repeat top center;
}
Background details:
● background-color: #EFE9DB
● background-image: url('images/pattern.jpg')
● background-repeat: repeat
● background-attachment: fixed
● background-position: top left

9. Add a page background
#page {
background:#EBE3D9 url('images/paper-beige.jpg') repeat;
box-shadow:8px 8px 14px #000000;
margin-top:4em;
max-width:1050px;
padding:0 2%;
}
Background details:
● background-color: #EBE3D9
● background-image: url('images/paper-beige.jpg')
● background-repeat: repeat

11. Round the corners
#branding img {
border-radius:25px 25px 0 0;
}
Border Radius details:
● border-top-left-radius: 25px;
● border-top-right-radius: 25px;
● border-bottom-right-radius: 0;
● border-bottom-left-radius: 0;

13. Round the corners again
#access {
background:#420001;
border-radius:0 0 25px 25px;
}
Border Radius details:
● border-top-left-radius: 0;
● border-top-right-radius: 0;
● border-bottom-right-radius: 25px;
● border-bottom-left-radius: 25px;

15. Change the color of the title
#site-title {
color:#783030;
}
#site-title a {
color:#783030;
}
#site-title a:hover,#site-title a:focus,#site-title a:active {
color:#81AB83;
}

17. More rounding
input#s {
border-radius:10px;
}
Border Radius details:
● border-top-left-radius: 10px;
● border-top-right-radius: 10px;
● border-bottom-right-radius: 10px;
● border-bottom-left-radius: 10px;

19. Remove background from footer area
#site-generator {
background:none;
}

21. One last thing
a{
color:#81AB83;
}

23. Resources:
WordPress.org (self-hosted sites)
http://codex.wordpress.org/WordPress_Quick_Start_Guide
http://codex.wordpress.org/Know_Your_Sources#CSS
WordPress.com
http://en.support.wordpress.com/custom-design/css-basics
Nice free stuff:
http://pattern8.com/
http://www.colorpicker.com/
Google :)
Custom CSS Plugin:
http://wordpress.org/extend/plugins/safecss/

24. Spectacular Showcase
http://wordpress.org/showcase/
http://theme.wordpress.com/customize/

27. Before

28. After

29. Before

30. After

31. Before

32. After

33. Before

34. After

35. Before

36. After

37. Before

38. After

39. Before

40. After

41. Before

42. After

43. Questions?

44. Additional Resources
WordPress.com
Theme directory
http://theme.wordpress.com/themes/
Theme Showcase
http://theme.wordpress.com/customize/
WordPress.org
Theme Repository
http://wordpress.org/extend/themes/
Theme Showcase
http://wordpress.org/showcase/

45. CSS Resources
http://www.w3schools.com/css/
(Neat "try it yourself" button)
http://www.css3.info
http://css-tricks.com
http://en.forums.wordpress.com/forum/css-customization/