Import and edit current css?

Author Posts

Leftklick July 30, 2024 at 4:24 pm

Hi, I have just installed MT. Congrats on a beautiful and carefully crafted interface!
My question: rather than overriding the current CSS, can I somehow import it and then change it in the editor? I currently use VS Code to write my CSS but if I could select targets directly, and then change the CSS right there, so it affects other elements with the same class, that’s what I am looking for.
I suspect that’s not the mission of MT though, am I correct?
Thanks!

Sebastian July 31, 2024 at 3:20 pm

Hey, thanks for the kind words!

There is actually an import feature in Microthemer:

Settings > Import / Export > Import CSS

You can copy and paste code into the editor or enter a stylesheet URL at the top. Once you’ve imported the code, you can edit the styles via the GUI. It might be a bit harder to locate styles compared to viewing a single CSS file (so you will likely want to use the folder search feature at the top left of the interface). But it might be worth experimenting with. You can always undo a CSS import via the history feature.

Let me know if you need any help.

Cheers,
Sebastian

Leftklick August 1, 2024 at 8:54 am

Thank you. I have done that. I can now select my elements and the css selector comes up in the code editor, showing the current styling. Great! However, if I make any changes to the style definition for that selector, nothing happens.
I had hoped for a direct way to change the stylesheet that way. Should this work?
Thanks again!

Sebastian August 1, 2024 at 1:14 pm

Hey,

Microthemer never modifies stylesheets aside from the ones it creates (in /wp-content/micro-themes/). The import system has no memory of where the styles came from. So once you have imported into Microthemer the styles are solely under Microthemer’s management. You can’t jump between MT and VS Code with any kind of synchronisation.

If you still want to work with VS code and use Microthemer for certain selectors, you would need to copy and paste the selector from VS Code into the code editor in MT (next to the Font GUI group). Make the GUI changes, and then copy the generated code from the code editor back to VS Code.

If on the other hand, your MT changes aren’t even affecting the site preview, that would be a bug that I would be happy to troubleshoot for you.

Cheers,
Sebastian

Leftklick August 3, 2024 at 6:46 am

Ok, I understand, thanks for your response. Have you ever considered allowing to edit the actual css? I was hoping for a more direct and graphical way to edit my css, instead of using the inspector, looking at the line number, finding that line in VS Code, editing, saving and reloading the page. If Microthemer could edit the actual line in my css file, that would be a game changer for me.


Sebastian August 5, 2024 at 8:37 am

I can see how that feature would be beneficial for certain workflows. So I won’t rule it out. But it’s not a feature that I would prioritise in the near future because I’m not certain how many people would want Microthemer to modify external CSS files. I suspect that most people would want to keep Microthemer separate from their VS code managed CSS. I could be wrong of course. I will watch out for any similar requests.

Also, apologies for not understanding exactly what you were after when I suggested importing CSS into Microthemer.

Leftklick August 5, 2024 at 9:08 am

Not at all, I was not being overly precise in my own wording.
It took me some time to wrap my head round what Microthemer does and it is very elegant and, for a change, has a beautiful and useful UI, which is actually what made me dig deeper. When you have a large set of CSS files with many lines (over 3000 in some cases), you start thinking about reorganisation and how to make editing faster and more organised. I have toyed with tailwind to keep styles near the point of use and it is very good but it creates so many styling classes that it shoots itself in the foot at some point. So I abandoned that. Microthemer could be the solution IMO, because it could serve the styles up at the point of use. Anyway, thanks for considering and I hope some old-school CSSers might chip in and add their +1.
Keep up the great work, Sebastian!

Sebastian August 5, 2024 at 10:32 am

Interesting to hear your thoughts on Tailwind. I’m actually working on a “HTML Editor” addon for Microthemer, that will also be available as a standalone plugin. One of the features will be support for Tailwind. For logged in admins, it compiles tailwind CSS when detecting TW classes in the DOM. But, it creates individual CSS files for each page, rather than one global stylesheet (which only serves as a fall-back for pages not yet viewed by a logged in admin). Just thought it worth mentioning in case the growing KBs in a global CSS file was your main concern with Tailwind.

Cheers,
Sebastian

Leftklick August 5, 2024 at 11:26 am

Interesting. Would be happy to do some beta testing. I have been using LiveCanvas for many years (as well as DIVI, if I need some backend friendliness for non-expert contributors) and there are some plugins emerging for LC that are centered around Tailwind integration (LC is based on Bootstrap). Most of what is being tried is class name management (as this is the real pain point with TW).

Sebastian August 5, 2024 at 2:21 pm

That’s very kind of you to offer to test it, I would be very grateful for that. I’ll email you when it’s ready.

Could you elaborate a bit more on the class name management pain point?

Thanks!
Sebastian

Leftklick August 6, 2024 at 5:37 am

what I meant by this is that you end up with a lot of classes for some elements. I tried using line breaks to keep the code visual but while this helps reading classes for one particular element, it makes it harder to recognise the overall structure of the page, as everything becomes separated more. Here’s an example:

	<div class="
                                bg-[#91cccb66] 
                                event-button 
                                flex 
                                h-[70px] 
                                items-center 
                                ml-[-69px] 
                                pl-[100px] 
                                relative 
                                transition-[background-position] 
                                duration-150 
                                w-full 

                                before:absolute 
                                before:bg-center 
                                before:bg-no-repeat 
                                before:bg-[length:6px_10px] 
                                before:bg-[url('/wp-content/uploads/assets/hover-arrow-blue.svg')] 
                                before:h-full 
                                before:right-[8px] 
                                before:transition-[right] 
                                before:duration-150 

                                after:absolute 
                                after:bg-[#91CCCB] 
                                after:h-0 
                                after:left-[17px] 
                                after:opacity-0 
                                after:transition-all 
                                after:duration-150 

                                hover:after:bg-[#91cccba3] 
                                hover:after:h-[calc(100%+11px)] 
                                hover:after:opacity-100 
                                hover:after:transition-all 
                                hover:after:duration-150
                            ">

Sebastian August 6, 2024 at 1:12 pm

Ah yes, I see what you mean.

My personal view on Tailwind is that it’s particularly good for developers that don’t know CSS very well and get very frustrated with CSS specificity issues. Even for more experienced devs, the spacing/sizing classes can speed up development. But I think the case can often be made for adding custom CSS in the usual way for certain styling challenges.

Cheers,
Sebastian

You must login or register to reply to this topic.