Simplify CSS theme to just change background image

Community Usage questions
1

Hi!
I'm creating a CSS theme to manage all my buttons in one place. I would like all my buttons follow the following base configuration:

.buttons_explorer {
border:none;
--color-fill: none;
--color-text: lightgrey;
--widget-padding: padding;
--line-width: none;
--alpha-fill-on: none;
--alpha-fill-off: none;
--alpha-stroke: none;
--color-widget: none;

    background-size: 90rem 90rem; 
    background-repeat: no-repeat;
    background-position: center

And just have different background images for each subclass. Something like:

.buttons_explorer .folder{
background: url('..assets/OSC/Images/win_folder.png');
}

but this doesn't work. I don't know if the issue is in the CSS configuration, or if it's the way I invoke a subclass. Can anyone help me with this?
Thanks!

2

Hello,

Make sure to use the classes in your buttons css prop, otherwise it won't affect them, like so:

class: buttons_explorer;
class: folder;

But if you want to change all buttons at once without applying a new class then target the original css class. In case of the buttons it's called button-container. (You can check the dev tools by hitting F12 and inspecting the element).

Also, make sure you're referencing the theme in the servers configuration theme` prop.

3

Clelson!

That did the trick! I was invoking the second class in the wrong way! Thank you!
It was also nice to know the button-container bit. But that will change all my buttons, in all tabs and containers, right?
Since I want to have different configurations in different tabs, I guess the way to go is to create different classes accordingly.
Obrigado!

4

De nada Carlos :slight_smile:

Yeah, it'll affect any button widget in your session.