Background color button - CSS

Loveflowersx · 14 June 2023 13:43

Hi everyone,

I have this css and I want to change this button node to black with white letters. I have tried several ways and nothing, not even from the node itself.

<style>

    /*Main background*/
    body {
        background: -webkit-linear-gradient(
            55deg,
            #009785 0%,
            #245aa5 50%,
            #b800e9 100%
            );
    }

    /*Top bar*/
    body.nr-dashboard-theme md-toolbar,
    body.nr-dashboard-theme md-content md-card {
        background-color: transparent !important;
        color: #FFFFFF !important;
    }


    /*Left menu*/
    /*Sidebar*/
    body.nr-dashboard-theme md-sidenav {
        color: white !important;
        background-color: rgba(0,0,0,0) !important;
    }
    /*Hover selection*/
    a.md-no-style, button.md-no-style {
        border-radius: 10px !important;
    }
    /*Selected*/
    .nr-menu-item-active div button {
        border-right: 4px solid rgb(41 98 255) !important;
    }
    /*List*/
    body.nr-dashboard-theme md-sidenav div.md-list-item-inner {
        color: white !important;
        background-color: rgba(40,85,165,1) !important;
        border-radius: 10px !important;
    }


    /*Groups*/
    ui-card-panel {
        background-color: rgba(255,255,255,0.1) !important;
        border-radius: 10px !important;
    }
    .nr-dashboard-theme ui-card-panel {
        border: none !important;
    }
    /*Name groups*/
    .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
        color: rgba(255, 255, 255, 0.5) !important;
    }


    /*Bouttons*/
    .nr-dashboard-theme .nr-dashboard-button .md-button {
        background-color: rgba(255,255,255,.1) !important;
    }
    .md-button {
        border-radius: 10px !important;
    }


    /*Dropdown menu*/
    .nr-dashboard-theme md-select-menu{
        background-color: rgba(40,85,165,1) !important;
    }
    .nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {
        background-color: transparent !important;
    }
    .nr-dashboard-theme .md-select-menu-container {
        border-radius: 10px !important;
        border: none !important;
    }
    .nr-dashboard-theme md-select-menu md-option[selected] {
        color: white !important;
        background-color: #1a3566 !important;
    }

    /*Template*/
    md-card>img, md-card>md-card-header img, md-card md-card-title-media img {
        border-radius: 10px !important;
    }

    /* Color picker text BG */
    .nr-dashboard-theme .color-picker-input-wrapper > input {
        color: white !important;
        background-color: transparent !important;
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme p {
        background-color: transparent !important;
    }
    /*nose si funciona */
    ui-card-panel:has(.invisible-group){
   opacity:0 !important;
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme .mi-elemento {
        font-weight: bold !important;
        /* Otros estilos personalizados */
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme .mi-elemento-2 {
        font-weight: bold !important;
        font-size: 20px;
        /* Otros estilos personalizados */
    }
    
    /* background grafica */
    body.nr-dashboard-theme .mi-elemento-3 {
        background-color: black !important;
        /* Otros estilos personalizados */
    }
    
</style>

Thank you very much!

Best regards

hotNipi · 14 June 2023 17:15

If one and only button should be different from others, give it a unique class name and for your dashboard CSS add

.your-unique-class-name button {
    background-color: black !important;
    color: white !important;
}

Loveflowersx · 15 June 2023 05:24

Yesterday I did something similar and it didn't work, and now I've put your code and it doesn't work either. It's as if I were stepping on a code from above.

Thank you very much!!

hotNipi · 15 June 2023 05:27

button is not unique enough.

If you choose some class name ("my-unique-button" on that next image)

you'll need to adjust the CSS rule accordingly

.my-unique-button button {
    background-color: black !important;
    color: white !important;
}

Loveflowersx · 15 June 2023 05:35

In CSS class name, I have put:

button
your-unique-class-name

Then I changed your-unique-class-name to my-button, also button to another name and nothing

Thank you very much!!

hotNipi · 15 June 2023 05:52

OK. That is because you already use the !important flag for all of your buttons.

It takes over what ever you choose do afterwards. Powerful but same time restrictive rule.

Still there are some tricks...

Change your CSS rule

     /*Bouttons*/
    .nr-dashboard-theme .nr-dashboard-button .md-button {
        background-color: rgba(255, 255, 255, .1) !important;
    }

To not affect buttons where you need to have different look.

    /*Bouttons*/
    .nr-dashboard-theme .nr-dashboard-button:not(.my-unique-button) .md-button {
        background-color: rgba(255, 255, 255, .1) !important;
    }

See the :not() selectror.

You are using the !important flag on every rule. That is not recommended way to do things. Use it only for last resort if you can't make your rules to apply due the CSS specificity.

Loveflowersx · 15 June 2023 06:01

You know!, yesterday I saw that it could come from there...thank you very much.

I have changed that and now the buttons are like this, instead of transparent for example state is invisible, why change?

hotNipi · 15 June 2023 06:05

Doesn't happen for me. Paste again your CSS

Loveflowersx · 15 June 2023 06:07

Thank you very much for helping me!!

<style>

    /*Main background*/
    body {
        background: -webkit-linear-gradient(
            55deg,
            #009785 0%,
            #245aa5 50%,
            #b800e9 100%
            );
    }

    /*Top bar*/
    body.nr-dashboard-theme md-toolbar,
    body.nr-dashboard-theme md-content md-card {
        background-color: transparent !important;
        color: #FFFFFF !important;
    }


    /*Left menu*/
    /*Sidebar*/
    body.nr-dashboard-theme md-sidenav {
        color: white !important;
        background-color: rgba(0,0,0,0) !important;
    }
    /*Hover selection*/
    a.md-no-style, button.md-no-style {
        border-radius: 10px !important;
    }
    /*Selected*/
    .nr-menu-item-active div button {
        border-right: 4px solid rgb(41 98 255) !important;
    }
    /*List*/
    body.nr-dashboard-theme md-sidenav div.md-list-item-inner {
        color: white !important;
        background-color: rgba(40,85,165,1) !important;
        border-radius: 10px !important;
    }


    /*Groups*/
    ui-card-panel {
        background-color: rgba(255,255,255,0.1) !important;
        border-radius: 10px !important;
    }
    .nr-dashboard-theme ui-card-panel {
        border: none !important;
    }
    /*Name groups*/
    .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
        color: rgba(255, 255, 255, 0.5) !important;
    }


    //*Bouttons*/
    .nr-dashboard-theme .nr-dashboard-button:not(.my-unique-button) .md-button {
        background-color: rgba(255, 255, 255, .1) !important;
    }
    .md-button {
        border-radius: 10px !important;
    }


    /*Dropdown menu*/
    .nr-dashboard-theme md-select-menu{
        background-color: rgba(40,85,165,1) !important;
    }
    .nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {
        background-color: transparent !important;
    }
    .nr-dashboard-theme .md-select-menu-container {
        border-radius: 10px !important;
        border: none !important;
    }
    .nr-dashboard-theme md-select-menu md-option[selected] {
        color: white !important;
        background-color: #1a3566 !important;
    }

    /*Template*/
    md-card>img, md-card>md-card-header img, md-card md-card-title-media img {
        border-radius: 10px !important;
    }

    /* Color picker text BG */
    .nr-dashboard-theme .color-picker-input-wrapper > input {
        color: white !important;
        background-color: transparent !important;
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme p {
        background-color: transparent !important;
    }
    /*nose si funciona */
    ui-card-panel:has(.invisible-group){
   opacity:0 !important;
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme .mi-elemento {
        font-weight: bold !important;
        /* Otros estilos personalizados */
    }
    
    /* Agrega esta regla después del bloque existente */
    body.nr-dashboard-theme .mi-elemento-2 {
        font-weight: bold !important;
        font-size: 20px;
        /* Otros estilos personalizados */
    }
    
    /* background grafica */
    body.nr-dashboard-theme .mi-elemento-3 {
        background-color: black !important;
        /* Otros estilos personalizados */
    }
    
    .my-unique-button button {
    background-color: black !important;
    color: white !important;
    }
    
</style>

hotNipi · 15 June 2023 06:36

Change the "Bouttons" rule again

 /*Bouttons*/
    .nr-dashboard-button button {
        background-color: rgba(255, 255, 255, .1) !important;
    }

And keep in mind that rule for unique button must be after that rule. The order matters.

Loveflowersx · 15 June 2023 06:42

Now, if it works!!

I am learning a lot, pure gold you!

Thank you very much!

system · 29 June 2023 06:42

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Change colour of widget in dashboard Dashboard	4	2223	14 July 2020
Style notification buttons Dashboard	7	392	12 June 2022
Button colour settings - need help Dashboard	8	393	24 April 2020
Dashboard - set background color of text node FAQs	5	20478	3 November 2019
Really basic problem trying to set CSS for a text box in Dashboard 2 Dashboard dashboard-2	6	330	28 February 2024

Background color button - CSS

Related topics