1. Modifying Your
Themes Design
Learning CSS
Atlanta WordPress User Group - 9 March 2016

2. Introductions
Evan Mullins
Lead Web Developer
Brown Bag Marketing
@circlecube
circlecube.com
WordPress user since 2006
Full-time web developer since 2007

3. Internet
Throughout these slides almost everything is linked to related content or sources.
Click at will.

4. Internet

5. Internet

6. Tools

7. FTP Client

8. Text Editor

9. HTML
What is HTML?
Resources:
● W3
● HTML5 For Designers
● How to Code in HTML
● MDN: Learning Web Development
● Khan: HTML
● Codecademy: HTML

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. HTML - In Browser

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. 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. CSS

16. PHP
What is PHP and how?

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. 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>

19. PHP

20. Inspect Element / Firebug
Using 'inspect element' and/or 'firebug' to
find and test.
Chrome dev tools

21. Inspect Element / Firebug

22. WordPress

23. As of February 2016 - More Usage Stats

24. Themes

25. WordPress Theme Editor

26. WordPress Theme Editor

27. Child Theme

28. 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

29. Child Theme

30. Child Theme - style.css

31. Child Theme - functions.php

32. Modifying Theme Styles
Typical modifications to themes and how to make them

33. Make the Logo Bigger
.logo {
width: 100%;
height: auto;
background: url(img/logo.png) center center no-repeat transparent;
background-size: contain;
}

34. 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 */
}

35. Color Edits - Links
a {
color: tomato;
}
a:hover {
color: rgba(130,203,45, .8);
}
a:visited {
color: #00cc33;
}

37. Color Edits - Buttons

38. 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;
}

39. Hide Elements
element {
display: none;
}
element {
opacity: 0;
}
element {
text-indent: -999rem;
}

40. 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.

41. Questions
?

42. Thank You
Slides and code available at https://circlecube.com/says/2016/03/modify-your-theme-
learning-css-atlanta-wordpress/