Modifying Your Theme's Design - Learning CSS - Atlanta WordPress Users Group

Transcript

1. Modifying Your Themes Design Learning CSS

2. Who am I? Evan Mullins Lead Web Developer Brown Bag

   Marketing @circlecube circlecube.com WordPress user since 2006 Full-time web developer since 2007

3. Internet

4. Internet

5. Internet

6. Tools

7. FTP

8. Text Editor

9. HTML What is HTML?

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

12. CSS What is CSS and why do we use it?

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

15. None

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

21. Inspect Element / Firebug

22. WordPress

23. As of February 2016

24. Themes

25. WordPress Theme Editor

26. Child Theme

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.

28. Child Theme

29. Child Theme - style.css

30. Child Theme - functions.php

31. Modifying Theme Styles Typical modifications to themes and how to

    make them

32. WordPress Theme Editor

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; }
36. None

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