modifying your themes design - learning css - atlanta wordpress users group
TRANSCRIPT
Modifying Your Themes Design
Learning CSS
Atlanta WordPress User Group - 9 March 2016
IntroductionsEvan 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.
FTP Client
Text Editor
HTMLWhat 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>
HTML - In Browser
CSSWhat 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
CSSh1, 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;
}
CSS
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>
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>
PHP
Inspect Element / FirebugUsing 'inspect element' and/or 'firebug' to
find and test.
Chrome dev tools
Inspect Element / Firebug
As of February 2016 - More Usage Stats
WordPress Theme Editor
WordPress Theme Editor
Child ThemeA 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
Child Theme - functions.php
Modifying Theme StylesTypical 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 - Linksa {
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_recent_comments .widget-title {
background: black;
color: pink;
padding: 1rem;
}
Hide Elementselement {
display: none;
}
element {
opacity: 0;
}
element {
text-indent: -999rem;
}
Simple PHP EditsRearrange 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.
Questions
?
Thank You
Slides and code available at https://circlecube.com/says/2016/03/modify-your-theme-
learning-css-atlanta-wordpress/