I’d like a little clarity on creating a new selector versus using an existing selector…
I’ve used create a new selector and that works fine…but what if I don’t want to add a selector? Or am I confused on what a selector is?
For example, I have a page that has already existing the selector img.staff-icon. If I want to edit the styling for this selector how do I go about doing so? Or do I have to create a new selector?
In CSS, a selector is a piece of code like the one you referenced:
img.staff-icon
In Microthemer, a selector contains this CSS selector code (e.g. img.staff-icon) but is also an item in the interface that can be renamed, deleted, and moved into a different folder etc. The styles you apply (e.g. font-size) are done so on a per-selector basis (the styles always relate to a particular selector).
You can manage the existing selectors you’ve created by clicking the folder icon in the top left of the interface. Click on an existing selector’s name to navigate to it. The styles in the toolbar will then apply to the selector you’ve navigated to.
In terms of your question at the end “have a page that has already existing the selector img.staff-icon“, do you mean to say that you’ve already created a selector in Microthemer that uses ‘img.staff-icon’ to target things on the page? If so, you can relocate it using the folder icon in the top left as I suggested.
However, if you’re saying that a CSS selector in your theme’s stylesheet (or any other stylesheet) is having an effect on your staff icon image and you’re wondering how to override it, yes, you need to create a new selector in Microthemer.You can double-click an image to launch the selector wizard. Or you can also manually create selector in Microthemer by pasting in the selector CSS code (e.g. img.staff-icon) via the ‘add selector’ option in the main menu (hover over a folder name to see it).
The selector wizard’s primary function is to build appropriate CSS selectors for you in response to your double-click. But when you already know what CSS selector you’d like to use, the manual method might be preferable.
I hope that helps, please let me know if I’ve missed the mark with my explanation.
Thanks for the clarification. In my case what I had done was add a class to my div with the name staff-icon.
I then went into Microthemer and wanted to style anything with the class staff-icon. I think I understand now though. I need to create a selector in Microthemer that targets that class. Right?
