Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Modifying Your
Themes Design
Learning CSS
Atlanta WordPress User Group - 9 March 2016
Introductions
Evan Mullins
Lead Web Developer
Brown Bag Marketing
@circlecube
circlecube.com
WordPress user since 2006
Ful...
Internet
Throughout these slides almost everything is linked to related content or sources.
Click at will.
Internet
Internet
Tools
FTP Client
Text Editor
HTML
What is HTML?
Resources:
● W3
● HTML5 For Designers
● How to Code in HTML
● MDN: Learning Web Development
● Khan: HTM...
HTML - The Source
<div id="home">
<div class="content">
<article>
<h2 class="noBottom">Getting someone's attention is one ...
HTML - In Browser
CSS
What is CSS and why do we use it?
Resources:
● W3
● CSS3 For Web Designers
● Learn To Code CSS
● CSS Tricks
● MDN: CSS...
CSS
h1, h2, h3, h4, h5 {
font-size: 26px;
font-weight: 100;
text-transform: uppercase;
margin: 30px 0;
}
.noBottom {
margi...
CSS
PHP
What is PHP and how?
PHP
<div id="home">
<div class="content">
<article>
<h2 class="noBottom"><?php the_field('headline_1'); ?></h2>
<h3 class=...
PHP
<div id="home">
<div class="content">
<article>
<h2 class="noBottom"><?php the_field('headline_1'); ?></h2>
<h3 class=...
PHP
Inspect Element / Firebug
Using 'inspect element' and/or 'firebug' to
find and test.
Chrome dev tools
Inspect Element / Firebug
WordPress
As of February 2016 - More Usage Stats
Themes
WordPress Theme Editor
WordPress Theme Editor
Child Theme
Child Theme
A child theme is a theme that inherits the functionality and styling of another theme,
called the parent theme...
Child Theme
Child Theme - style.css
Child Theme - functions.php
Modifying Theme Styles
Typical modifications to themes and how to make them
Make the Logo Bigger
.logo {
width: 100%;
height: auto;
background: url(img/logo.png) center center no-repeat transparent;...
Font Sizes
.site-branding .site-title a {
font-size: 20px; /* fixed size */
font-size: 2em; /* relative to parent font-siz...
Color Edits - Links
a {
color: tomato;
}
a:hover {
color: rgba(130,203,45, .8);
}
a:visited {
color: #00cc33;
}
Color Edits - Buttons
Style the Widgets
.widget_meta {
display: none;
}
.widget_recent_comments {
padding: 1rem;
margin: 1rem 0 4rem;
}
.widget_...
Hide Elements
element {
display: none;
}
element {
opacity: 0;
}
element {
text-indent: -999rem;
}
Simple PHP Edits
Rearrange elements, remove elements, edit html tags…
If you want to change more than just the stylesheet,...
Questions
?
Thank You
Slides and code available at https://circlecube.com/says/2016/03/modify-your-theme-
learning-css-atlanta-wordpre...
Modifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users group
Upcoming SlideShare
Loading in …5
×

Modifying your themes design - Learning CSS - Atlanta WordPress users group

1,754 views

Published on

The presentation overviews the internet, teaches us how to spell HTML and other web programming "languages" that come together to form a WordPress website, like HTML, CSS & PHP. We even discussed web development tools like FTP clients and which text editors to use. We went over what makes up a wordpress theme and then the concept of child themes. Discussed the process of creating your own child theme with just a couple files and that you can create a child theme for any theme out there. We demoed how to view source and dissect any website, but more importantly, how to inspect elements on your site and live-edit the css for any element. Then to write these CSS rules to our theme to lock in the edits in your child theme.

Published in: Technology

Modifying your themes design - Learning CSS - Atlanta WordPress users group

  1. 1. Modifying Your Themes Design Learning CSS Atlanta WordPress User Group - 9 March 2016
  2. 2. Introductions Evan Mullins Lead Web Developer Brown Bag Marketing @circlecube circlecube.com WordPress user since 2006 Full-time web developer since 2007
  3. 3. Internet Throughout these slides almost everything is linked to related content or sources. Click at will.
  4. 4. Internet
  5. 5. Internet
  6. 6. Tools
  7. 7. FTP Client
  8. 8. Text Editor
  9. 9. HTML What is HTML? Resources: ● W3 ● HTML5 For Designers ● How to Code in HTML ● MDN: Learning Web Development ● Khan: HTML ● Codecademy: HTML
  10. 10. HTML - The Source <div id="home"> <div class="content"> <article> <h2 class="noBottom">Getting someone's attention is one thing.</h2> <h3 class="noTop">Keeping it is what counts.</h3> <p>A second may be all the time you've got in today's rapidly changing marketing landscape of diverse audiences, channels and techniques. Simply put, your brand needs an integrated marketing partner. Brown Bag is fully integrated, full- service and equipped for the digital and content age - creating experiences that keep your customers' attention while delivering measurable results that keep yours.</p> </article> <div class="buttons"> <a href="https://www.brownbagmarketing.com/infographic/" class="btn btn-orange">Why Integrated Marketing</a> <a href="https://www.brownbagmarketing.com/contact/" class="btn btn-orange">Work With Us</a> </div> </div> </div>
  11. 11. HTML - In Browser
  12. 12. CSS What is CSS and why do we use it? Resources: ● W3 ● CSS3 For Web Designers ● Learn To Code CSS ● CSS Tricks ● MDN: CSS ● Khan: CSS ● Codecademy: CSS ● CSS Specificity Calculator
  13. 13. CSS h1, h2, h3, h4, h5 { font-size: 26px; font-weight: 100; text-transform: uppercase; margin: 30px 0; } .noBottom { margin-bottom: 0px; } .noTop { margin-top: 0px; } h3 { text-transform: none; font-family: "somefont"; } .content { width: 1024px; max-width: 100%; margin: 0 auto; text-align: center; }
  14. 14. CSS
  15. 15. PHP What is PHP and how?
  16. 16. PHP <div id="home"> <div class="content"> <article> <h2 class="noBottom"><?php the_field('headline_1'); ?></h2> <h3 class="noTop"><?php the_field('subheadline_1'); ?></h3> <p><?php the_field('body_1'); ?></p> </article> <div class="buttons"> <a href="<?php the_field('button_1.1_link'); ?>" class="btn btn-orange"><?php the_field('button_1. 1_text'); ?></a> <a href="<?php the_field('button_1.2_link'); ?>" class="btn btn-orange"><?php the_field('button_1. 2_text'); ?></a> </div> </div> </div>
  17. 17. PHP <div id="home"> <div class="content"> <article> <h2 class="noBottom"><?php the_field('headline_1'); ?></h2> <h3 class="noTop"><?php the_field('subheadline_1'); ?></h3> <p><?php the_field('body_1'); ?></p> </article> <div class="buttons"> <a href="<?php the_field('button_1.1_link'); ?>" class="btn btn-orange"><?php the_field('button_1. 1_text'); ?></a> <a href="<?php the_field('button_1.2_link'); ?>" class="btn btn-orange"><?php the_field('button_1. 2_text'); ?></a> </div> </div> </div>
  18. 18. PHP
  19. 19. Inspect Element / Firebug Using 'inspect element' and/or 'firebug' to find and test. Chrome dev tools
  20. 20. Inspect Element / Firebug
  21. 21. WordPress
  22. 22. As of February 2016 - More Usage Stats
  23. 23. Themes
  24. 24. WordPress Theme Editor
  25. 25. WordPress Theme Editor
  26. 26. Child Theme
  27. 27. Child Theme A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. ● If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved. ● Using a child theme can speed up development time. ● Using a child theme is a great way to learn about WordPress theme development. Read More at https://codex.wordpress.org/Child_Themes
  28. 28. Child Theme
  29. 29. Child Theme - style.css
  30. 30. Child Theme - functions.php
  31. 31. Modifying Theme Styles Typical modifications to themes and how to make them
  32. 32. Make the Logo Bigger .logo { width: 100%; height: auto; background: url(img/logo.png) center center no-repeat transparent; background-size: contain; }
  33. 33. Font Sizes .site-branding .site-title a { font-size: 20px; /* fixed size */ font-size: 2em; /* relative to parent font-size */ font-size: 2rem; /* relative to root font-size */ }
  34. 34. Color Edits - Links a { color: tomato; } a:hover { color: rgba(130,203,45, .8); } a:visited { color: #00cc33; }
  35. 35. Color Edits - Buttons
  36. 36. Style the Widgets .widget_meta { display: none; } .widget_recent_comments { padding: 1rem; margin: 1rem 0 4rem; } .widget_recent_comments .widget-title { background: black; color: pink; padding: 1rem; }
  37. 37. Hide Elements element { display: none; } element { opacity: 0; } element { text-indent: -999rem; }
  38. 38. Simple PHP Edits Rearrange elements, remove elements, edit html tags… If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. See the Template Hierarchy for details about how WordPress decides what template to use.
  39. 39. Questions ?
  40. 40. Thank You Slides and code available at https://circlecube.com/says/2016/03/modify-your-theme- learning-css-atlanta-wordpress/

×