Hi – I bought Microthemer because I’m using Oxygen and wanted a solution to writing CSS independently of Oxygen. However I am struggling with it when it’s not in full editor mode. I find all the buttons for targeting and doing CSS more confusing to use than just figuring out the targeting on my own and writing the CSS myself. So I am using it by setting the full code editor to on.
In this mode it’s fine but I don’t see any way to make multiple separate files if I wanted to. Is that possible? In this mode has everything always got to be in one file?
Currently, the full code view CSS does gets written to a single file (active-styles.css) – the same file as the CSS code that is generated when using the other view.
In the not too distant future, the full code view will be merged with the folder system in the main view. So, as well as adding individual selectors to a folder, you will be able to add free form CSS or Sass snippets too. Optionally, assets added to a specific folder can be written to a separate CSS file. To enable this, you will be able to assign page logic to folders, so that certain CSS files can load on certain pages of the site.
I understand if you prefer to write CSS code by hand, rather than use the GUI fields. The advanced targeting options are designed to offer the same inspection tools you get with the browser, but with the advantage of not needing to copy and paste selectors. This video explains how to use the targeting options – just thought it worth mentioning. Also, I’m happy to explain any specific aspects of the program you have questions about.
I watched the video and can see how I could target items if I needed to, using the target tools, but still carry on using the full code editor (my brain cannot hack the button interface). I’d previously missed the breadcrumbs along the bottom which help when you can’t quite click on the precise thing you want to target.
But I do not see what purpose the label has. If I change it, it has no bearing on what is deposited in the SCSS window. Why would I want to change it anyway and even if I did, how would it get added as a class or id to the code, and if it did what makes it a class as opposed to an id? Or is it something else?
You’re absolutely right. There is no need for those fields in the full code view. I’ve just released version 6.0.7.6 which hides the fields when they’re not needed.
BTW you can click on the lines of HTML in the pane on the left to target elements too. Sometimes that’s easier than the breadcrumbs when elements aren’t directly clickable.
The labels are useful when the actual CSS selector code isn’t very meaningful. Noobs often don’t know what the selector code relates to. And for experienced coders, it sometimes useful to use a label if the HTML markup isn’t semantic. For instance, page builders often add random string classes e.g.
.my-builder-j9024ufj2o4j024
And in this case, it’s useful to add the label e.g. “Testimonials” when creating the selector.
You can also opt to use the actual CSS code as a label when working in the main view by the way. See the option to the right of the selector label field.
