Sensational css how to show off your super sweet
- 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; }
- 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/