Slide 1

Slide 1 text

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

Slide 10

Slide 10 text

Microthemer  Check out: https://themeover.com/