Add new classes to elements

Tagged: 

Author Posts

sakomicro October 22, 2021 at 11:29 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hi!

Can I add css classes to an element? I mean really creating a new more specific class for an element that has been non-unique? I am asking because I then want to adress those elements by their new class name from elementor? With any function that uses css selectors to work? Or is microthemer only creating “microthemer internal labels” for existing selectors when I click on “create selector”?

Thanks!

Sascha

Sebastian October 23, 2021 at 1:31 pm

I’m not 100% sure I understand what you’re asking here. But here’s some info that might be relevant (let me know if not):

  1. Strictly speaking you don’t add CSS classes to an element with Microthemer, you reference CSS selectors already in the HTML. So you would add the custom class via Elementor and then some of the CSS selectors Microthemer generates will reference your custom class (if you click on the relevant element).
  2. The labels for CSS selectors in MT are just to help you understand what an MT selector targets. The default name isn’t always meaningful because the Elementor CSS classes often consist of random numbers and letters, so it’s good to set your own. But regardless, they are just for internal MT use.

Cheers,
Sebastian

sakomicro October 23, 2021 at 2:18 pm

I feared you would say that 😉 The problem here is that elementor does only give the option to add a class or ID to a widget element. But if a widget includes several other elements (which it more or less always does) I can not add an ID or selector to any of the “inner” elements. I can only find the elements Id or class with the browser inspector (or your tool). But then there is the problem that nearly all widgets are built with classes not IDs so if I want to adress a single “inner” element that only has a non-unique class to it, I have no way to easily make it unique, without digging into the root code of that widget. Am I interpreting this correctly?

Or do you see any options within elementor or Microthemer to achieve this: “Give any element (specially those elements that can not get a custom ID/class by elementors “Add ID/Class”-Option under it´s widget´s “Advanced tab” => “a widgets inner elements”) a unique Selector (ID or unique class) so that you can adress this element from any tool that uses classic CSS IDs or Classes to adress elements.”

I hope that is understandable… and even more hope you know a way 🙂

Thanks

Sascha

Sebastian October 25, 2021 at 9:24 am

Hey Sascha,

I understand what you mean, and I think this would need to be done on the Elementor side, if they are open to it. They may say that an id or class on the container is enough because you can target elements with:

#my-custom-id .inner-element-class

This does require looking at the root code for the inner-element-class, as you say. But adding custom classes to inner widget content might be considered too niche for Elementor to support.

sakomicro October 25, 2021 at 1:41 pm

Hi Sebastian,

you just saved my life! 😉 Thanks for the hint with the “#my-custom-id .inner-element-class” !

So looking forward to your v7!

Sascha

Sebastian October 26, 2021 at 8:33 am

You’re welcome Sascha, happy to help 🙂

You must login or register to reply to this topic.