customize your theme using css
TRANSCRIPT
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?
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
Questions
Thank you!@michaelarestad