Add new classes to elements

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 1 month ago.

Author Posts

sakomicro

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

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

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

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

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

You’re welcome Sascha, happy to help 🙂

You must login or register to reply to this topic.