WordPress Meetup #19: 利用 Microthemer 修飾你的網站

We often need to re-style our WordPress websites because of the inconsistencies among the plugins used, or because of the flaws of the plugins and themes we choose. Writing CSS directly is relatively difficult for many beginners. Using Microthemer for such purpose is much easier. Intermediates will find this tool a time-saver for the same purposes.

Transcript

1. Making Your Website Look the Way You Want with Microthemer Victor K. Nip
2. What is Microthemer?  WordPress Plug-in to style web page elements visually  Supports over 100 style options, including Google Fonts, gradients, shadow, etc  Supports responsive design  Coding optional  Instant response
3. Assumptions  You have experience in using WordPress to design a web site  You have some understanding of HTML  You know what CSS is  You don’t expect me to know everything about Microthemer
4. Why do you need Microthemer?  Consistency of looks of objects created by different plugins (e.g., fonts, input style)  Fix visual flaws of themes and plugins  Style your objects the way you want without learning to code in css
5. Demo  Start from scratch: creating and styling card-like objects  http://test.viva.ws/cards/  Create 4 cards  4 cards per row on PC, 2 cards per row on iPad, 1 card per row on smartphone  Modify the look of the cards  Modify existing theme  Change the page title to use proper case (no forced uppercase)  Change the color or page title  Remove “Back-to-top” button  Premium feature: creating transition  Move card down on hover
7. Free vs Premium  Free version limits you styling 15 selectors; no limit for premium version  Premium version supports flexbox, transition, and animation features
9. Tips  Use a high resolution monitor  Breaking the 15-selector barrier  microthemer-css  microthemer_g_font-css (if using Google fonts)  If certain styling doesn’t work, use “Inspect Element” in Chrome to understand why an element behave in a certain way
10. Microthemer  Check out: https://themeover.com/