Docs index
Getting started (6)- Introducing Microthemer 7
- Install and setup
- Basic workflow
- Who is Microthemer for?
- Troubleshooting
- V6 to V7 (main changes)
The interface (18)- Dark mode and layout options
- Selecting elements
- Styling options
- Draft vs published changes
- Folders
- Load CSS on specific pages
- Automatic page speed
- Responsive media queries
- Uninstall, but keep changes
- Preferences
- Site navigator
- History restore points
- HTML and CSS inspection
- Single selector vs full code editor
- Adding custom JavaScript
- Generated CSS
- Keyboard shortcuts
- Development roadmap
How To (9)- Create gradient text
- Blur the background, not the content
- Use Microthemer with Bricks Builder
- Apply CSS shapes and SVG masks
- Copy CodePen HTML/CSS/JS to WordPress
- Style WishList Member Registration Forms
- Use CSS pseudo elements (::before) for tooltips, Font Awesome icons, and speech bubbles
- Reuse styles with custom body classes
- WP container queries using Microthemer
Old videos (11)- CSS variables
- Learn flexbox
- Google fonts
- Elementor integration
- Beaver Builder integration
- Oxygen Builder integration
- CSS grid controls
- Designing ‘broken grid’ layouts
- 3-2 alternating grid columns
- Mobile-first Gutenberg grids
- Fast & scalable Sass compilation
Styles
Enter CSS properties by hand instead/as well as using the GUI options. This is useful if Microthemer doesn't support a particular CSS property, or if you just prefer writing CSS styles by hand.
This hybrid method of using the GUI with a code editor may be preferable over using just the custom code editor for many. Using this hybrid method, you can leverage the time saving selector wizard, as well as the repetition saving responsive tabs in the GUI view. You only need to update the CSS selector code in one place - the quick edit option in the top toolbar. The CSS selector will automatically update for all media queries.
Themeover CSS Reference
Online CSS Tutorials: Editor