What I would like to do is apply a system-wide CSS reset. How can I do this?
Here's a little bit of information about what is meant by a CSS reset.
The goal of a reset stylesheet is to
reduce browser inconsistencies in
things like default line heights,
margins and font sizes of headings,
and so on.
http://meyerweb.com/eric/tools/css/reset/
We do this by linking a reset.css in our host html page, as you normally would. It works like you would expect. You can also link reset.css into your module file, but it seems more appropriate in the host page.
What you might not expect is that GWT's default css will be injected afterwards, even if you don't link it in, if you're inheriting the default theme in the module.xml file. You can affect that behavior. Read http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html for more information about the details of CSS and GWT.
Related
I'm new to drupal and i was trying to do several common css tasks, like changing color background, links color etc. I guess i have not understood where the drupal css are. I tried to modify style.css in the folder my-site-name/sites/all/themes/mythemename/, which seems to be the main css, but it seems to have no effect on the site, even using the directive "!important".
So, where's the drupal 7 main css?
There is no "Main CSS". Drupal core uses some CSS files. Each module its own CSS. Then each theme overrides CSS using its own css files. You can have as much css files as you like in your theme and with any acceptable name.
Probably you have to clear the caches to see the results. If not, check the css styles with Firebug to see what is happening. This way, also, you can see what css files apply styles for each page/element.
I am frustrated. I have one website where my drop-down CSS menu works and another where it doesn't.
Their stylesheets differ wildly and, although I have tried to manually copy the menu styles from one to the other, but with no success.
Is their any tool which will let me (like FireDebug) click on a page section (the menu) and then copy the rules which affect that section - ignoring those which are hidden by other rules - so that I can post them into the second site's stylesheet.
It seems that rather than having multiple styles affecting the menu and trying to sort out which have precedence, I'd like to have some software sort it out and generate a single combined rule ... if you see what I mean.
Both FireBug and the inbuilt Chrome Dev Tools show you what styles are being utilised by the selected element. I don't work with FireBug much, but I know the Chrome Dev Tools will cross out overrided styles and even show default user-stylesheets where applicable. It's also kind of nifty when inline styles are applied, eg for a table the "frame" attribute, as it converts these to CSS and displays it as part of the styling ;)
Sounds like you've got problems with accidental inheritance. Try to make sure your CSS selectors are only referencing the elements you want to style. Otherwise things get messy, and stuff like this happens.
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)
In my .gwt.xml file I have uncommented the following:
<inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
When I run my application I do not see any stylesheet applied. Using Firefox there are a large number of warnings associated with Chrome.css. These mostly say that it doesn't recognize 'zoom' and 'cursor' so it is dropping the declaration. This seems to indicate that it is trying to use the theme but I see no evidence of it. The background remains white and the fonts seem to be the defaults.
Is there another step I need to take for stylesheets to be applied?
Stupid mistake. I tried the dark theme which is more dramatic and discovered they were being applied. They Chrome and Standard just don't look like much on the standard widgets.
If it possible to use #import in a .css file to load a style sheet from another site? Specifically, I have a main style sheet for my site which loads in other (local) style sheets using #import. I'd also like to load in a jquery ui theme hosted by google, e.g.
#import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css";
This does not seem to work - I wanted to check whether this is allowed before working out exactly where the problem is.
That should work. Are you sure it is not loaded? What browsers does this happen in? Can you confirm using Firebug?
There is no mention of it not working in the w3 specs nor in the related MSDN Article (The latter applies to IE only of course).
According to those specs, adding url(...) around the address is optional, but try whether that yields better results.