• Save
Sensational css  how to show off your super sweet
Upcoming SlideShare
Loading in...5
×
 

Sensational css how to show off your super sweet

on

  • 856 views

 

Statistics

Views

Total Views
856
Views on SlideShare
676
Embed Views
180

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 180

http://karenalma.com 180

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sensational css  how to show off your super sweet Sensational css how to show off your super sweet Presentation Transcript

  • Sensational CSS:How to Show Off Your Super Sweet CSS Skills Karen Arnold | @karenalma | karenalma.com karenalma@gmail.com
  • Find it here: http://wordpress.org/extend/plugins/safecss
  • CSS Editor
  • Add a body backgroundbody {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
  • 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
  • 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;
  • 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;
  • 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;}
  • More roundinginput#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;
  • Remove background from footer area#site-generator {background:none;}
  • One last thinga{color:#81AB83;}
  • Resources:WordPress.org (self-hosted sites)http://codex.wordpress.org/WordPress_Quick_Start_Guidehttp://codex.wordpress.org/Know_Your_Sources#CSSWordPress.comhttp://en.support.wordpress.com/custom-design/css-basicsNice free stuff:http://pattern8.com/http://www.colorpicker.com/Google :)Custom CSS Plugin:http://wordpress.org/extend/plugins/safecss/
  • Spectacular Showcase http://wordpress.org/showcase/ http://theme.wordpress.com/customize/
  • Before
  • After
  • Before
  • After
  • Before
  • After
  • Before
  • After
  • Before
  • After
  • Before
  • After
  • Before
  • After
  • Before
  • After
  • Questions?
  • Additional ResourcesWordPress.comTheme directoryhttp://theme.wordpress.com/themes/Theme Showcasehttp://theme.wordpress.com/customize/WordPress.orgTheme Repositoryhttp://wordpress.org/extend/themes/Theme Showcasehttp://wordpress.org/showcase/
  • CSS Resourceshttp://www.w3schools.com/css/(Neat "try it yourself" button)http://www.css3.infohttp://css-tricks.comhttp://en.forums.wordpress.com/forum/css-customization/