Remove !important from CSS

[strelniece]

I use the transparent theme and there the !important modifier is used which stops the user from changing the rule in custom.css At least I haven't found a way that works.

I've used the "easy" way and just removed the one place that matters to me, since there were more things needing changes in the html-file as well in the old structrue. But in css-file it is used 26 times, meaning it might be a problem more users deal with before they find out why their custom.css doesn't works.

I'm afraid that my knowledge in css is very rudimentary, otherwise I would take a look and se how difficult it is to change, but at least as of now, that is outside my competence.

[rchl]

CSS specificity is a delicate thing and just removing all !importants would likely break the overrides of the transparent theme.

I think you should still be able to override those from custom.css as long as your selector has the same specificity or is more specific. So if you'll use the same selector and also use !important then you should be able to override.

Ideally, the !importants would not be used but it's a quick way to get things done and in some rare cases is necessary.

[strelniece]

I have tried diffrent versions on how to override it, but have yet to find something that actually works. The same selector with just. !important added has so far not worked. But as I said, know just the very very basics of css.

[rchl]

If you give a specific override example I can try to see why it's not working.

[Romkabouter]

If you want to overrride !important, you need to create a css with a higher specificity. So if you can give an example, we can give you some pointers.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[strelniece]

Give me some time and I will, as of now I have got it to partly work...

[strelniece]

Okay, giving up now, Might be me, or not ;)...

Have this in custom.css and works:

.-theme-transparent .item {
color: #fff1cce6;/*text*/
background: rgba(132, 122, 116, 0.1) !important; 
box-shadow: 2px 2px 2px 2px rgba(54, 47, 36, 0.1), -2px -2px 0 rgba(200, 200, 200, 0.1);
border-radius: 2px;
}

but then I would like to have a different background in some tiles, and that is not working, like: 

> 

.transparent-tile .-theme-transparent .item { background: rgba(255, 0, 0, 0) !important; box-shadow: none; border-radius: 0px; }

tile:

> 
       empty_tile:{ 
        width: 3,
        height: 1.5,
        state: false,
        type: TYPES.CUSTOM,
        id: {},
        classes: ['transparent-tile']
        },

and then I have some tiles changing backgound depending on state, and not working, with or without !important...

> 
        climate_arbetsrummet: {
        height: 1.5,
        type: TYPES.CLIMATE,
        id: 'climate.arbetsrummet',
        unit: '°C',
        title: '&sensor.arbetsrummet_temp_mi.state°C',
        state: 'Arbetsrummet',
        subtitle: '&sensor.arbetsrummet_hum_mi.state% ',
        useHvacMode: true,
        customStyles: function(item, entity){
            if (entity.attributes.hvac_action == 'heating')
                return {'background': 'rgba(79, 129, 29, 0.15)'};
            else if (entity.attributes.hvac_action == 'idle')
                return {'background': 'rgba(204, 0, 0, 0.15)'};
            else
                return {'background': 'rgba(132, 122, 116, 0.1)'};
        },
        classes: [  'item-climate-button-state',
                    'item-climate-text-temp',
                    'item-climate-text-hum', 
                    'item-climate-button',
                    'item-climate-button-center-right',
                    'item-climate-button-bottom-right',
                ],
    },

[Romkabouter]

.transparent-tile .-theme-transparent .item { background: rgba(255, 0, 0, 0) !important; box-shadow: none; border-radius: 0px; }

This should be: .-theme-transparent .item.transparent-tile No spaces between item and transparent-tile.