How to apply inline css style to custom button

rdm

I've looked at the Buttons page for hints about styling a button via inline style.

If I have something like this, how can I tell the button what background and foreground color to use? One request I get from some of my users is to make a button this or that color because they associate something with a color more often than text.

This is what I have, and I figure I'd put the style declaration here. Just in case it actually worked, I tried backgroundColor: "#033C73". No such luck. No errors, but no luck.

Is there a way to do this?

buttons: [
    {
        text: 'Add new student',
        action: function() {
            location.href = '@Url.Action("Create", "MiaRoster1")';
        }
                // set background color to "#033C73" and text color to "#FFFFFF"
                
    }
    /* more buttons*/ 
]

Tester2017

Find the element selector and put .css('color','green') behind to get a green text.

To find the selector, use, for example, a browser like Google Chrome with has developer tools which allow you to select an element on your page and get the selector name. With this selector you, let's say get:

body > div.modal.fade.in > div > div > div > div.DTE_Footer.modal-footer > div.DTE_Form_Buttons > button:nth-child(2)

And you change it in $('body > div.modal.fade.in > div > div > div > div.DTE_Footer.modal-footer > div.DTE_Form_Buttons > button:nth-child(2)').css('color', 'green') to get a button with green text.

allan

You could use the buttons.buttons.init method to modify the button's DOM element since the button node is passed in as the second parameter - then use $().css() as @Tester2017 says.

Another option is to use the button().node() method to get the node and modify it there.

And finally use buttons.buttuns.className to add a custom class name and then add your own styling to that class (although that isn't inline).

Allan

rdm

I ended up using the className option after all. Although not inline, it looks like the easiest thing to do.

While I can change the text color using className, I cannot change the background color of the button.

LESS code

.addNewRecord {
    background-color: #033C73 !important;
    color: #ffffff !important;
}

jQuery

{
    text: 'Add new student',
    className: "addNewRecord",

        // more code...
}

This is what the button looks like when rendered.

Inspecting the button with Chrome Development Tools, I see.

Using the className approach, how do I change the background color? What am I missing?

rdm

So I tried a different approach. At the end of my jQuery script block, I added this:

var z = $("div.dt-buttons").find(".addNewRecord");
    z.css("background-color", "green");
    z.text("button text changed");

I could see that I was able to find the correct button and change the text of the button. However, the background-color still didn't change. Somehow the dt-buttons class is still taking precedence, even if I add an !important tag or add apply the jQuery code after everything has rendered.

This should work. I'm really baffled.

rdm

According to the Chrome Developer tools, I am successfully overriding the background-color css property.

I've even tried changing the border-color in case that played a role. No change. This should work.

rdm

Something finally sunk in. The reason I can't change the background-color is because there's a background-image here. I've so rarely used them that it didn't even register as a possibility.

So here's how I change my Less code to customize the button color. I can tweak the gradient at my leisure, but for now I know that it works.

.addNewRecord {    
    background-image: linear-gradient(to bottom, #ffffff,#e0ffff 100%) !important;   
}

@allan -- Is this something we can add in the documentation for button style customization? I.e, that setting background-color alone in css won't work unless you take the background-image property into account?

allan

Adding information about styling is very difficult. You want to change the background colour, while someone else might want to change the text-alignment, someone else might want to make it bold, etc, at which point it just becomes documentation of CSS itself.

If you use the shorthand background property, that would overwrite the background-image property. For that, the MDN documentation is your best bet.

Allan