This might be a basic CSS question: I have a site designed with well-defined CSS themes. I'm adding some controls (from jquery), but they have the style of their designers, not my site's. What is the easiest way (least amount of work) to make the inserted controls use the site's css rather than the styles of the control? Is there an easy way to map one set of classes/ids onto another? Or am I missing something basic about css?
I'm assuming you're using jQuery UI? If so, they have a ThemeRoller.
You can try to "map" things by defining your own widgets and the external ones at the same time as much as possible:
div.my_widget,
div.external_widget
{ border: 1px blue solid; }
How successful that can be depends heavily on your site's and the controls' structure.
As a general rule, rather change your own stylesheets to work with the control, instead of changing the control to work with your stylesheet. That way, you can easily integrate new versions of the control.
Most common way is to inspect the DOM structure of the controls you are adding, and see if you can use the classes applied to style it the way you want, typically be overriding the CSS selectors in place for the control, or by writing CSS for the control DOM structure from scratch.
Related
I have changed my css sheet for my entire site and it works great. The change has to do with the background color of rows in tables. Although it does what I want, there is one view that I would like to be exempt from this alteration. Is there a way to exclude this view from the change or create a new css sheet for this specific view?
Well, I would come up with a CSS styling strategy. The goal should be to minimize CSS and overrides. Also, having an extra CSS file for just one page will cause an extra HTTP round trip to get the resource. My recommendation is to stick extra CSS classes on this view. Then, override precisely the styles that you need in your global CSS styles.
I figured out the solution which ended up being much easier than I expected. Since I am very new to using CSS and HTML I was unaware of the style tag. However, that is what I was looking for. For anybody looking at this in the future, just use:
<style>
(CSS that you would like to override)
</style>
I have written an embeddable Web component for data visualization. There are of course associated css classes in addition to the js and html. I need to isolate the css classes so they do not override and/or clobber css class names of the larger Web app context it gets embedded in.
What is the best practice for achieving this?
A possible way to fix this problem is to use scoped CSS. I don't prefer the solution and only use it when nothing else is possible.
I just found out that scoping is not supported, at least not all browsers support it, only Firefox does
Another solution would be to use a prefix for all your CSS classes and id's, but this could take a lot of time if your files are large.
By the way, if embedding means in an iframe, there is no problem, because it does not apply the css of the site imbedded in.
I've just started learning GWT so my question might be noobish. Tried to find a 'standard' solution but couldn't find it.
I'm developing an AddressWidget. It is implemented as a Composite widget which consist of atomic widgets (Labels, TextBoxes, ListBoxes...) defined in AddressWidget.ui.xml. These tiny building blocks should get their CSS from the common-widgets.css. The AddressWidget itself should get the default styles from address-widget.css.
As this widget will be used on different pages, they should be able to override the styles applied in order to customize the appearance. I.e. the OrderPage should apply its own from the order-page-address-widget.css, the ContactDetailsPage – from the contact-details-address-widget.css
How do I implement that?
My advice - drop this idea. It will be hell to develop and maintain, and I mean it. You will constantly try to figure out which CSS file has to be updated, and then you will have to test every update in multiple places, because an update in one file can mess up with CSS from another file.
Many GWT developers prefer to use CssResource approach to CSS. I've never heard any designer favoring this solution, though.
After years of working with GWT on both the code and design sides, I strongly prefer to use a single CSS file for the entire application. CSS was built for inheritance, and this is what a single file achieves. You can define basic style, like:
input {
height: 24px;
}
If you need to change these styles in specific widgets or parts of the application, you can set, for example, "contacts" class on the contacts page/widget, and then add this to your CSS file:
.contacts input {
background: grey;
}
The advatantages of this approach:
easier to enforce consistent look throughout the application
easier to maintain your CSS, because there is one file to update, and there are no conflicts with CSS defined anywhere else
it is an approach that most designers understand and know how to use
it is the easiest solution if you want to create multiple skins or themes for your application
it is easy to make your CSS adjust to different screen sizes, or define special styles for printing.
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.
I have started using BEM methodology while writing my CSS and there have been few occasions where I have struggled to find out the best way to do a particular thing.
I would like to take up a simple example of a panel here.
Lets say I am writing a panel component CSS using BEM style. So my CSS might look as follows:
.panel {}
.panel__titlebar {}
.panel__content { display: none; }
A panel can be either chromeless or with chrome. So I define another modifier class for the panel:
.panel--with-chrome {
border: 4px solid black;
border-radius: 4px;
}
Now lets say, the panel can be in a fullscreen/maximized state also in which the chrome and titlebar disappear. Instead of defining modifiers for both panel and titlebar, it would be be wise to define the modifier just on parent (say panel--fullscreen) and rest elements shall change accordingly. So now my CSS becomes:
.panel--fullscreen {
/* something has to be done here */
}
.panel--fullscreen .panel__titlebar { display: none; }
To remove the chrome in fullscreen mode, I can either:
toggle the panel--with-chrome class in JS along with the panel--fullscreen class
overwrite the chrome CSS inside the panel--fullscreen class.
First isn't good because ideally I would like to simply toggle just one class (.panel--fullscreen) in JS to toggle fullscreen mode.
And second one is bad because I'll have to overwrite previous CSS which is a bad practice.
So whats the best way to go about it? Appreciate your comments.
Thanks
The answer depends on many things.
First, how much logic and appearance have "panel--with-chrome" and "panel--fullscreen" modifiers. And also on what kind this logic is.
If "panel--with-chrome" brings a lot of CSS properties and special JS functionality, I would toggle it in JavaScript when applying "panel--fullscreen".
It also depends on a JavaScript framework you use. In "i-bem.js" which we use at Yandex it's easy to react to appending a modifier:
A square changes size modifier when after a click
Reacting on applying a modifier
But if the framework you use doesn't allow to express such a reaction handy, this answer won't work that great for you.
In the other case, when "panel--with-chrome" has not very much properties and doesn't bring any JavaScript logic to a page, I would redefine those CSS properties in "panel--fullscreen" class.
To sum up, there is no universal solution and strict rules to follow. You should decide yourself what will be useful in your case. The decision should depend on many things:
if you expect your project to be maintained in the future, which solution will be easier to support?
capabilities of the JavaScript framework you use
performance stuff
Not in this particular case, but sometimes we measure speed of rendering for variants we are choosing from.
opinion of the other guys, if you work in team
file structure of your project
We, here at Yandex, store CSS and JavaScript for a block in the same block folder. So, it is not a problem to share logic between CSS and JavaScript since they all are in one place.
But if you keep your JavaScript files separately, this can influence on how comfortable it is to support shared logic.
And so on...
I’d go with the first option; you are toggling state after all, so you need to add/remove/toggle classes accordingly. It’s better than undoing a load of stuff in CSS IMO.