I see on the YUI page an example about changing the style for panels in general. But I'd like to change the style for all the tooltips (and not other panels) on my website. All my tooltips are not in one certain DIV, so changing the YUI panel styles within a div won't work for me.
Any tips?
It looks like YUI Tooltips add the class yui-tt to all tooltips. You could style just your tooltips by using that as a common ancestor, i.e.
.yui-tt .bd {
/* Styles here... */
}
I load the configurator's style sheet (with the default skin (sam.css) already included) in the head of my app followed by my own styles, so they are ready for immediate rendering. However as you mentioned, the YUI loader will subsequently override your styles.
If you load a lot of modules or make a lot of style declarations and don't want to write !important after every one, add the option
skin : {defaultSkin: ''}
to your loader configuration. This will also save a little bit of bandwidth for your users and lead to faster rendering.
Also note, that IE6 doesn't recognize !important so it won't work for that browser.
Hope that helps.
Related
I am using FullCalendar for Angular and I am having trouble applying custom styling. I need to change the background colour of the 'More Events' Popover, but no matter what I try, none of my styles are applying.
I am putting these styles into foo.component.scss:
.fc-popover .fc-more-popover .fc-day .fc-day-mon .fc-day-past .fc-day-other{
background: #303030 !important;
}
I can see in the classes that I have copied from inspect on Chrome references only one day, but it doesnt even apply to that day.
I have tried more generic class names such as:
.fc .fc-popover .fc-more-popover
to no avail.
I have also tried putting the styles in a style tag directly in the component template, and I have tried putting the styling into the main styles.scss file.
When I edit the styles in the inspect tab in my browser, it applies and achieves the desired result, but I just can't get these styles to apply any other way.
Angular has something called view encaspulation.
Without going to deep or being too complicated, it means that heach view has its own ecosystem, so that they can't collide with each other when it comes to styles.
So a style like .container in app.component.scss, won't collide with a .container in home.component.scss.
To avoid view encapsulation, you have one of two solutions.
The nasty one, ::ng-deep, is to be avoided. So it leaves you with a single one : move your styles into the style.scss file, where there is no view encapsulation.
Lastly, if it still does not work, try adding !important to your styles (and remove it after testing, it's nasty too) : if the style gets applied with !important, it means your CSS selectors are not "strong" enough, so try "strenghtening" them.
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.
When a JavaScript library creates a <div>, it typically sets a class on the div so that the user of the library can style it him/herself. It's also common, however, for the JS library to want to set some default styles for the <div>.
The most obvious way for the library to do this would be with inline styles:
<div style="application's default styles" class="please-style-me">
...
</div>
However, this will make the application's default styles trump the user's styles. A workaround is to use nested divs:
<div style="application's default styles">
<div class="please-style-me">
...
</div>
</div>
This works great for many styles like 'font' but fails for others like 'position', where the inner div's style will not override the outer div's.
What is the best practice for creating user-stylable elements with defaults in a JavaScript library? I'd prefer not to require users to include a CSS file of defaults (it's nice to keep your library self-contained).
When a JS library has a default set of styles that should be used, but should also be overridden, the JS library should include a separate stylesheet.
JavaScript should avoid adding styles directly as much as possible, and defer all styling to CSS where it's reasonable.
It's common for sets of styles to be toggled on and off. The way to elegantly handle these situations are with CSS classes.
A case where it may not be reasonable to simply use external stylesheets is animation. CSS animations could certainly be used, but for cross-browser support, asynchronous interpolation is used to animate styles from one value to another.
There isn't !notimportant or !unimportant in CSS. And I haven't run into an accepted best practice. It seems like a CSS file is the defacto standard for styles that should be user modifiable.
But if you want to keep things all in one library, I would take your second example, with your application default styles, then append a CSS class to it and prepend something unique to the class name. Then if the implementor wants to override your styles, the implementor could just use !important to override your user styles.
Adding !important to one or two styles in a CSS file shouldn't be a huge deal, but if you're creating a bunch of inline styles, this may not be the best solution.
Is there any way to override !important properties defined in browser's CSS code other than using per-element style? It seems that the browsers load their precompiled CSS after page's CSS defined in style or link tag. I want to remove borders and colors from default checkboxes and radiobuttons (appearance is not important so it can be easily disabled), my CSS works in userstyles, but on real web pages it doesn't work.
Any page (author) style sheet overrides a browser’s default stylesheet. There is no !important in browser stylesheets. Specificity does not matter here, by the rules of the cascade. What matters is that some presentational features are not controllable in CSS in the first place. Demo:
<!doctype html>
<style>
* { border: none; }
</style>
<input value=foo><br>
<input type=checkbox checked>
This removes the default border of the text input box. On most browsers, it does not affect checkbox rendering, since what we might see as border there is really part of the checkbox widget. IE, as usual, has different behavior, but even on it, you cannot remove the “border,” and if you use your own border on the element, the border is drawn outside the box.
There might be browser-specific ways of affecting their behavior in ways other than standard CSS. You may need to elaborate on what works “in userstyles” and on which browser(s).
So you wanto to "remove" browser default CSS?
I think you can do that with reset CSS, it basicaly resets the browsers styling.
There's many examples out there
Heres one: CSS reset
Yes. Use Javascript to remove the styles from the elements after loading.
Or, design the stylesheet right at first.
What I know is : external css, internal css and inline css. And its overridden order is :
external < internal < inline.
i.e. external css is overridden by internal and, internal and external is overridden by inline.
Also, we can update it through javascript.
Declare your styles, using selectors that are at least as specific as the original selectors.
Mark your overriding styles with !important
Declare/include your stylesheet after the existing styles
Here's an example, where the last !important styles declared take priority over earlier styles.
http://jsfiddle.net/8QHQk/1/
I have a PopupPanel, and I want to override some of the styles from the default theme. Eclipse gave me a .css in the doc root, and I put the styles I want to override in there. Inspection from the browser at runtime shows my styles being overridden by the GWT theme.
It's hard to believe that this is the default setup for a new project - an application .css that is loaded after the stock css?
I tried loading my css in my module XML (using stylesheet tag), but that has no effect, it's not loaded at all. The GWT docs say this is deprecated, so I suspect it's just been removed. Regardless, I don't want to use a deprecated interface.
To be clear, this is an ordering problem. I've verified my css is loaded correctly by inspecting the DOM. I can see my styles applied to the element in question, and I can see them overridden by the GWT theme css (dark.css in this case). Adding the !important flag does get my styles applied, but that's obvsiously not the right solution.
The popup is instantiated in the click handler of an anchor that's defined in a UI widget. The popup itself isn't defined in the template, I simply instantiate it and call show(). I'm not sure if that's relevant.
Can someone describe to me how this should be accomplished? If this is any harder than "put line XXX in file YYY", I'm going to seriously lose my faith in GWT.
GWT just generates some HTML to which CSS is applied. It looks complicated but there isn't any magic going on in the final output. Just HTML, CSS and some JS.
If your PopupPanel is picking up the wrong style it's because the browser isn't seeing your style, or the style in the standard theme (which is standard.css) is taking precedence.
If you have a DOM editor:
Inspect the element and see what styles it has against it.
Verify your style sheet is being included
Verify your style rules are being applied to the element as well.
Most likely it's a simple CSS error of some kind and GWT is the red herring. However if you can't see the error you can consider:
Give your element an id or its own additional style and use a rule to override the default behaviour.
Completely override .gwt-popupPanel with the style you want to apply everywhere
Subclass PopupPanel. Call the super
constructor but then strip out the
gwt-popupPanel style and replace it
with your own style instead. Or
augment the gwt-popupPanel and add
an extra style of your own.
Copy the entire default theme and rename it as something else and use that in your project.
The best option is probably the simplest which would be 1)