Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 42 Ad

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

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

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

Advertisement

Recently uploaded (20)

Advertisement

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/

×