I'm working with jQuery datatables and oTableTools aButtons. I'm doing this:
oTableTools: {
aButtons: [
{
sExtends: 'text',
sButtonText: 'Add +',
fnClick: function ( nButton, oConfig, oFlash ) {/*stuff*/},
sButtonClass: 'btn-success'
}
]
},
My problem is that the a.DTTT_button class on dataTable.tableTools.css:38 is overriding the .btn-success class on bootstrap-combined.min.css:9, so my button is grey instead of green. They are both being loaded from external sources, so I can't edit them, and changing the order in which they are loaded did not affect anything, presumably because the defintion in dataTable.tableTools.css is more specific, what with being specifically for anchors.
Is there a way to force sButtonClass to take precedence over a.DTTT_button at loadtime, or am I going to have to create a new class in my local css file to duplicate the style I want and call it instead? That feels less clean to me, so I'd rather not do it if I don't absolutely have to.
I think the cleanest way given the parameters in this case is actually to create a a.sButtonClass selector in your "local css file" that loads after the a.DTTT_button class. Specificity will match, but the cascade will win for a.sButtonClass. I know you said this "feels less clean," but your contraints of not being able to manipulate the two css files make it one of the cleanest solutions. Also, if you are using a preprocessor (like LESS that boostrap is based off of), then you can have your local enhancement automatically match the bootstrap class by using that class as a mixin for your more specific selector.
However, an alternative is to not apply those styles by a class at all, and write the sButtonClass styles directly to the style attribute of the anchor element, as that will override anything that a.DTTT_button is doing (assuming a.DTTT_button does not have !important tags on its properties).
You can't change precidence unless you want to remove and re-insert the sytesheets into the DOM using JavaScript in the order you want. That's a little ugly, but it can be done.
The proper way is to use CSS specificity, but since you can't edit the external files, manipulating the DOM may be the only way to go.
This may help:
Add: Add stylesheet to Head using javascript in body
Remove: How to dynamically remove a stylesheet from the current page
Related
I have a custom CSS file for my shiny app. I know it is being read, because some of the elements come through. However, some of the elements are overridden. If I add !important, it fixes them, but there are a lot and this is not good practice. Can I specify my custom CSS always takes priority?
I have tried both methods of hooking in the css and they both do the same job.
ui <- fluidPage(
tags$head(includeCSS("www/my_theme.css")
#tags$link(rel = "stylesheet", type = "text/css", href = "my_theme.css")
),
What you are looking for is named specifity of the css selectors. On the first look it seems to be a complex theme ... but it is not as complicated.
It has do do how many tags/ids/classes had been used to specify a styling.
id are more important than classes
classes are more important than tag (element name like div)
And a higher number off used id/classes/tags in general is more important than stylings which uses less classes (= .a.b.c {...} is more important than .a.b {...}).
Styles noted direct in html (inline-styles) are more important than styles in loaded files.
And some other rules ...
Bringing this alltogether CSS calculates the specifity for a selector.
Here are two links
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specifishity.com/
Practical
// most often it is enough to add one more tag/class/id
// to the rule --> BUT YOU HAVE TO TEST IT ON THE ACTUAL RULE
// before
.classA { ...}
// now to overwrite:
div.classA {...}
// or much higher specifity
body .classOffContainer div.classA {...}
NOTE: but keep it simple for possible debugging!!!
Most often really ONE more 'actor' in the selctor is enough!
SORRY!! -- UPDATE
Here are so many beginners that I did get your question maybe false ...
No. There is no way to rank one css file above another one. Included files are allways get the same specifity value, independend in what order they are loaded.
I am not sure about the following:
Maybe you try to move your css from the css file to the script block in the head off the html file ... but I am not very otimistic that this will get a higher specifity.
UPDATE 2
Just as rough and dirty fast working idea to the problem:
Copy your code in a SASS file.
Wrap the whole code in a html and/or body tag.
That adds a htmland/or body before all of selectors/clases off your css.
Not elegant but fast, generate higher specifity and easy to debug, - and at the end (nearly) nobody cares about a clean CSS.
Add the new generated css file to the project.
// example off SASS file
// to expalyin what I mean:
html [optional: body] {
... your whole css ...
}
I'm developing a multi-module application using GWT 2.5.1. I'm not using any GWT theme. I want to customize the style for some of the GWT widgets, for example Button and CheckBox.
I see two solutions:
Write a CSS file loaded in the application (link in the HTML page). The CSS will contain CSS rules using GWT defined names, like .gwt-Button for buttons and .gwt-CheckBox, .gwt-CheckBox-disabled for checkboxes. This solution don't takes the advantage of CSS optimizations made by the GWT compiler.
Use a CssResource and set the style name each time I use a Button or a Checkbox. This solution will take advantage of CSS optimizations but it requires to set the style name every time I create a new Widget.
There are other solutions? Which is the correct one?
You can put those styles in a CssResource as well.
Just put #external on top of those styles in your css file, and you are good to go.
For example:
#external gwt-DatePicker;
.gwt-DatePicker {
...
}
Hope it helps.
Other solution: Button is html element button and Checkbox an html element input[type=checkbox]. So you could set styles on those elements and use css selectors for specific states. i.e. button:disabled. That way you won't have to set style names, or don't have lots of extra style names and use cleaner css.
You could subclass whatever widgets you want to style (e.g. MyButton), and have your subclass either just add a style name to each widget that gets created, or do the styling inline using calls to this.setWidth(), this.getElement().getStyle.setXXX.
Also, what optimizations does the GWT compiler perform on CSS? I know that it will obfuscate style names to avoid collisions, but I'm not sure CSS is even able to be optimized?
I would personally use emanuele's solution, but just to offer an alternative: you can use a widget's getElement() method to access style names directly, so if you really want to, you can override the style names with ones you created. This gets rather difficult, however, with larger widgets and panels that have multiple styles.
Problem: An existing resource dependency (which I'm not permitted to alter or remove from the build) which contains a stylesheet that dictates an unwanted button style. I want to somehow overcome the influence that this stylesheet has on the button style in my page.
Question: Using my own local stylesheet, how can I revert to the default Windows css button style (background, shape, text)? -I dont know what the css attributes should be, etc. (I assume I would have to use the "!important" phrase, etc.)
Each browser has its own set of default CSS rules. There is no "Windows" CSS unless you're explicitly referring to IE which does its best to match said style. You'll need to find your preferred browser's defaults and append them after the new CSS to overrule them back to the default theme.
Some common browser default styles:
Firefox
Chrome
IE
Don't use !important
Instead define your button styles with higher specificity and give your buttons the desired look. So if in the original stylesheet you have
button { ... }
then in your stylesheet do
#parent button { ... }
You won't, and shouldn't, use !important. You just need to properly override following the principles of CSS specificity and inheritance.
Explanation of CSS Inheritance
For example--let's say your 'unwanted' button style is something like this:
<input type="button" class="unwanted" />
And you've got CSS in your (uneditable) style sheet:
.unwanted {
fooRule: whatever;
barRule: whatever;
}
Using inheritance, you just need to write your own external stylesheet. Things to remember:
(1) You should put it below the existing that contains the 'unwanted' stylesheet reference. Inheritance processes external stylesheets sequentially. This follows the 'closest rule wins' principle.
(2) The way you write the CSS rule must be MORE specific than the rule that currently applies the unwanted style. Again, the above link really helps explain this.
Going back to our previous example, the unwanted style is being applied simply by a class of 'unwanted'. Your rule can override without editing the HTML. Alternately you can edit the HTML--it's up to you. It also depends on how globally you want to affect button styles.
If you want to globally affect all buttons with 'unwanted' class, you would do:
input[type='button'] .unwanted {
fooRule:override;
}
If you only want to change SOME of the buttons that have a style of unwanted, you would instead do:
.unwanted.newRule {
fooRule:override;
}
And then you would mod your HTML to be:
<input type="button" class="unwanted newRule">
Note that .unwanted.newRule means it will only impact 'elements' with a class of both unwanted and newRule. It would not change anything if the unwanted style is set up like this:
<form class="unwanted">
<input type="button" class="newRule" />
</form>
The reason being .unwanted.newRule means 'both classes are on the same element'. You would change it to :
.unwanted .newRule {foo}
So--my point is, there are a ton of semantically correct ways to CORRECTLY utilize CSS specificity and inheritance, and do what you want to do, without having to use !important.
On a side note, the only reason you'd have to use !important is if the css styling the button is actually being applied using javascript that writes 'style' attributes to the HTML element. If that is the case, (1) don't use that JS, as that is a horrible method for styling using JS, (2) you will have to use !important to override the inline style being applied by the JS. Again, this is because of how cascading works--in this case, CSS is applied by (1) browser (user agent), (2) external css, (3) internal 'head' css, (4) internal inline css, (5) author !important declarations, (6) user !important declarations.
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.