Making Your Website Look the
Way You Want with
Microthemer
Victor K. Nip
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Free vs Premium
Free version limits you styling 15 selectors; no limit for premium version
Premium version supports flexbox, transition, and animation features
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
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