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 (10)- 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
- Gutenberg Responsive CSS using Microthemer
Old videos (11)- CSS grid controls
- Designing ‘broken grid’ layouts
- 3-2 alternating grid columns
- Mobile-first Gutenberg grids
- CSS variables
- Learn flexbox
- Google fonts
- Elementor integration
- Beaver Builder integration
- Oxygen Builder integration
- Fast & scalable Sass compilation
Animation Event Target
Custom Microthemer option. Choose which element the animation should be applied to once it is triggered by a JavaScript event (this will not work with CSS events). If you leave this field blank, the animation will be applied to the element the current selector targets - the single element that triggered the event. But sometimes you might want to specify a custom CSS selector, so you can apply the animation to different element(s). For example, clicking one element could animate a related element close by.
But what if you only want the effect to apply to a single element, relative to the position of the triggering element? Imagine an FAQs page with multiple headings and answer blocks. You apply a click event to the headings to reveal answers, but you only want this to reveal the single answer immediately following the heading that was clicked - not all answers on the page. Microthemer supports this behaviour with jQuery-style syntax entered into the same input field separated with a pipe e.g. .faq-answer|next(). See below for details and more examples.
Enter a CSS selector e.g. img.avatar, followed by a pip (|), followed by jQuery-style dom selection syntax e.g. closest('article'). All together, this would look like: img.avatar|closest('article').
Chaining with dots (.) is supported. Quotes, brackets and selectors inside brackets are optional. Microthemer will default to using the selector entered before the pipe for the following directives: closest, parents, find, children, siblings. Microthemer also supports these directives (without defaulting to a selector): prev, next, parent.
Example: img.avatar|next.find equates to img.avatar|next().find('img.avatar')
Themeover CSS Reference