How-to using a custom css class?

Community Usage questions
1

Hi,

## Extra css classes: `class` [#](https://openstagecontrol.ammd.net/docs/customization/css-tips/#extra-css-classes-class)

This non-standard css property can be used to add custom css classes to the widget element: `class: my-custom-class;` Multiple classes can be added (one per `class` statement). Custom classes are always added to the widget's root element, css selectors are ignored.

Where do i declare these lines ?

.my-custom-class { background: yellow ; font-size: 3em; }

In which widget field do i have to write “class: my-custom-class” ? I guess into the css field ?
thanks

1 Like
2

Trouvé !

you have to declare in the css fied of the root element (as said in the doc :slight_smile: ‘‘Custom classes are always added to the widget’s root element’’ )

.my-custom-class { background: yellow ; font-size: 3em; }

and then in a widget css field, add class: my-custom-class

But what does this mean Css selectors are ignored ?

VoilĂ  voilĂ .

3

But what does this mean Css selectors are ignored ?

It means you can't add a custom class to a specific element even with something like

.some-inner-element {
  class: my-custom-class;
}
1 Like
4

Hello everyone, I don't know if I should recreate a topic or post in one that already exists as it deals with the same subject. I chose to publish in the same one. Please tell me if this is not the right way to do it.

My example.
I have a panel with tabs, in these tabs I also have a panel with other tabs. I have applied a style to the first tab as follows:
inner > .navigation > .tablink{ background-image: url(assets/icons/add.svg); background-repeat: no-repeat; background-size: 30px 30px; background-position: 35px; }

But this style is applied to all tabs, with the same icon etc...
I "hacked" this because my first tab is vertical and the other horizontal. So I add on the first one the class .vertical
But I was wondering if it wasn't possible to add a custom class to the second navigation. To a specific location.

5

Adding a > before inner will ensure the rule only applies to the direct child element matching the selector.

6

I'm not sure I understand. Sorry I'm a newbie ahah I'm doing some testing now and
when I add my style like this
inner > navigation > tablinks { csscode }

All the tablinks get my style

Including the second panel with the following tabs. But what I want to do is give a different icon on each tabs link.

A picture is worth a thousand words
https://ibb.co/c3wVhdL

7

OK, I've only just understood. Just copy and paste the same code on each widget with inner >
Thanks for all the work here and the incredible quick answers :ok_hand:

8

I meant writing
> inner > navigation > tablinks { csscode }
instead of
inner > navigation > tablinks { csscode }

The first means

direct child "tablinks" of direct child "navigation" of direct child "inner" of widget

the second means

direct child "tablinks" of direct child "navigation" of any descendant "inner" of widget

See also: Child combinator - CSS: Cascading Style Sheets | MDN