How to apply inline css style to custom button
How to apply inline css style to custom button
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*/
]
This question has accepted answers - jump to:
This discussion has been closed.
Answers
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.You could use the
buttons.buttons.initmethod 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.classNameto add a custom class name and then add your own styling to that class (although that isn't inline).Allan
I ended up using the
classNameoption 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
jQuery
This is what the button looks like when rendered.
Inspecting the button with Chrome Development Tools, I see.
Using the
classNameapproach, how do I change the background color? What am I missing?So I tried a different approach. At the end of my jQuery script block, I added this:
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-buttonsclass is still taking precedence, even if I add an!importanttag or add apply the jQuery code after everything has rendered.This should work. I'm really baffled.
According to the Chrome Developer tools, I am successfully overriding the
background-colorcss property.I've even tried changing the
border-colorin case that played a role. No change. This should work.Something finally sunk in. The reason I can't change the
background-coloris because there's abackground-imagehere. 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.
@allan -- Is this something we can add in the documentation for button style customization? I.e, that setting
background-coloralone in css won't work unless you take thebackground-imageproperty into account?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
backgroundproperty, that would overwrite thebackground-imageproperty. For that, the MDN documentation is your best bet.Allan