I successfully changed the webtoolbar menu background:
with:
.dropdown-menu.show {
background-Color: #797979 !important;
}
But I’m struggling with how I can change the test from black to white for instance. Funny enough that color seems to be “hard scripted” via an inline style element?!?
Does anyone have a hint? I read that a dirty trick consists in adding an animation, as that would override such a style but I had no success whatsoever.
I know how to change the bootstrap theme, but for my project I need to change an existing theme via code. All those “hard coded” styles look weird to me. Perhaps I’m overlooking something. I understand that those style are needed, but why not putting them into a separate CSS, as we have anyways already many of those in Xojo Web 2?
You can override in your stylesheet using !important
https://www.w3schools.com/css/css_important.asp
Thank you, but not such hard-coded styles to my knowledge, at least it doesn’t work on “dropdown-item” for me, neither with the “!important”. Please note this style=“color: rgb(33, 37, 41);” next to the “a href”. I thought that those “inline styles” are overriding everything else?
Yes, it does work.
https://jsfiddle.net/u0f8ve1j/
You want:
li.dropdown-item a {
color: #f00 !important
}
Thank you! A the li was missing? Not at my desk right now, will test later.
No, your original code was applying to the full menu while the CSS in the style property was in the anchor element that is a child of “dropdown-item”.
1 Like
My original code was for the background only, right. But when I tried Dropdown-Menu for the text color only I had the a anchor but I didn’t use the li - anyways, good to know it will work and I am sure I will get it work later. Though I have a suspicion while walking: I think my current code might Alter other „Dropdown“ stuff as well, I should doublecheck this 
I mixed up things. if someone places an !important into the style, then you have at my knowledge no chance to overwrite it, or are you aware of any CSS trick? I would not know how to override this one.
<a class="myLink" href="#" style="color: #f00 !important">Test</a>
You can’t override that unless you use JavaScript to clear it.
1 Like
Thank you for confirming this. Which, we are not allowed to do via the WebSDK, if I understand the tutorial correctly, at least not if sharing the solution publicly.
I haven’t looked in a while, but I believe that applies to the framework itself, not the style of elements rendered on the page.
@Greg_O_Lone can clarify.
1 Like
When it comes to the Document Object Model (DOM), you are only permitted to manipulate the content within your own controls. Changing the structure of built-in controls or the controls of other 3rd-Party developers is not permitted.
And I can understand why. Though we all have the best intentions, this can easily result in a big mess if ignored, with unhappy end-users. On a side note: I can only imagine how much work you invested with GraffitiSuite in all this CSS stuff. It’s somehow fun, but could not be my daily job 
1 Like
Yeah, I’m looking at the words content and structure in that. Irresponsible style manipulation can get you booed and hissed out of town unless it’s part of the intended purpose of the component, but sometimes it is.
I wouldn’t otherwise intentionally include CSS or JavaScript that universally alters a project that’s not my own, but there are ways around that using specificity. Such as adding a base classname to your component like “JeannotsClass”, then CSS like:
.JeannotsClass li.dropdown-item a {
color: blue !important;
}
Likewise, with JavaScript (I’ll use jQuery because it’s easier to write in the browser):
$(".JeannotsClass li.dropdown-item .a" ).css("color", "blue");
1 Like
