We don’t have a specific tutorial for creating skins. You could just following the general instructions for applying styles in the getting started video: https://themeover.com/quick-start-microthemer-video-tutorial/. You would just double-click various things, building selectors and adding styles as you go. But if you’re CSS savy you may find it easier to manually enter in CSS selector code. This isn’t covered in the video.
To manually build selectors in Microthemer:
Create a new folder called ‘Gravity Form’ via the main menu (top toolbar)
Your folder will appear at the bottom of the list. Click the (+) icon to reveal the fields for manually adding a selector – you may need to scroll down to see them.
Copy any paste the CSS selector code from the plugin e.g. ‘.gravity-form-container’ (no need to enter curly braces {}) into the textarea.
Give the selector a descriptive name.
Click the ADD SELECTOR button.
Repeat this process for as many selectors as you would like to add.
The selectors can be renamed, copied, re-ordered and moved between folders (if you gravity forms folder get too big)
When you’re done creating selectors and entering new styles you can export your work as a design pack using the export option in the left toolbar.
Finally, go to the ‘Manage Packs’ page to fill out any meta data (e.g. description, screenshot) and then download your skin as a zip file.
You can then share your gravity forms skin with anyone. They can install it via the ‘Manage Packs’ page eve if they’re just using the free trial of Microthemer.
Tip: once you’ve safely exported and downloaded your skin, there is an option in the left toolbar for clearing all styles but leaving folders and selectors intact. If you do that, you will have a blank slate for inputting different styles without having to create the selectors again. We call these ‘Theme Scaffolds’, or in your case ‘Plugin scaffolds’ – because they scaffold the design process for the end user, a bit like a colouring in book.
I hope that’s of some use, we will be adding more tutorials and videos demonstrating this kind of thing in the near future.
Please let me know if you have any further questions.
Thanks,
Sebastian
ps I’m looking into making this process a bit more automated using a CSS parser to read and import selectors from a stylesheet. This feature will hopefully be added in the not too distant future.
