customize your theme using css

Customize your theme using CSS

Michael Arestad@michaelarestad

CSSCalifornia Cascading Style Sheets

CSSBreaks Styles your site

selector { property: value; }

.entry-title { color: red; }

It’s totally cool to break stuff.

Theme Structure

Header ContentWidget Area (sidebar)Footer

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

Editing

Cool.

Dangerous.

Neato.

Child. Theme.

Super cool.

/* Theme Name: Twenty Fourteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar Text Domain: twenty-fourteen-child */ !

@import url("../twentyfourteen/style.css");

/* Theme Name: Twenty Fourteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar Text Domain: twenty-fourteen-child */ !

@import url("../twentyfourteen/style.css");

/* Theme Name: Twenty Fourteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar Text Domain: twenty-fourteen-child */ !

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

DEMO TIME!

Browsers

Your site will render differently across various browsers.

Vendor Prefixes

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

Allow browsers to use newer CSS properties

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

How do I know which ones to use?

caniuse.com

box-shadow mdn

Responsive Themes(and how to avoid breaking them)

Media Queries

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

Painless changes

ColorsFontsBackgrounds

Not always painless changes

LayoutPositioning WidthsPadding Floats

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

Learning CSS

css-tricks.com

htmlandcssbook.com

Questions

Thank you!@michaelarestad