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

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
Full-time web developer since 2007

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

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

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>

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

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

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

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>

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

As of February 2016 - More Usage Stats

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

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;
background-size: contain;
}

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

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

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

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

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

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

Recommended

More Related Content

What's hot (16)

Similar to Modifying your themes design - Learning CSS - Atlanta WordPress users group (20)

More from Evan Mullins (11)

Recently uploaded (20)

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