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.
Related
I set up a background image with css (background-image) in the body tag of the template so that only shows in the pages generated with it, however that's affecting all 'body's in the entire gatsby.js website.
This is normal behavior. It's not a Gatsby issue. It's how React's templating/code-splitting works.
You are defining a CSS rule in your isolated CSS but it's bundled when the project is compiled (because of webpack) and because of the specificity, it affects all body tag. In the end, your template will be also injected into the output HTML so all the imports in it will also merge in the final output.
The easiest and most straightforward solution I think is to define a <section> (or another tag) just as a direct child of the body for each template/page you want to customize and give a specific class name to apply the CSS only to that template/page. Increasing the specificity is the easiest way to apply.
Soon, in the new Chromium version (99) we will be able to define layered components in order to enhance the specificity and improve that kind of behaviors you've described.
Please note: I found this question as well as this one, but both of their answers involve writing and executing customized JS. My question here is about how to wield Chrome Dev Tools (or similar) to accomplish the same thing in real-time.
I have a quasi-legacy JVM app that serves (and creates as part of its build pipeline) all sorts of nasty and messy CSS files.
I'm wondering if Chrome Dev Tools (or any other modern OSS webdev tool for that matter) has a "reverse engineering" feature in it that allows you to click on an HTML element and get a list of all the CSS rules that apply to it. And, not only that, but which rules are overriding other rules.
This way, when I need to tweak my CSS, it's less of a wild goose chase to figure out which rules are coming from which CSS files and that are actually being applied to the live element at runtime.
Any ideas?
Yes, in Chrome DevTools (F12 in Windows / Option+Cmd+I in OSX) within the Elements panel you can click on an element and see the applied CSS rules on the right-hand side. The overridden styles or classes are crossed out, and you can see the file name in which the CSS rule comes from. See below:
element.style refers to inline styles. For example, if I modified the selected element to be <div class="container" style="background-color:#000">...</div>, background-color:#000 will show up in the that section.
#content refers to the div element with the associated id of 'content'. The checkboxes that are checked on the right indicate that they have been applied with no overriding. You can check and uncheck these to play around with the styles so that you can see what you should change in your source code.
The html, body, div, span etc. allows multiple selectors to use the same styles. All the selectors in that comma-separated list will have the styles, except some may be overridden by other CSS rules - in this case, margin and padding are overridden by the more specific #content selector.
The next block is for user agent styles. These are styles that are applied by the browser, and each browser may apply different ones. This can be a problem if you have more specific rules defined yourself. Many people use normalizers to make sure things remain consistent among browsers. Check out Normalize
The inherited section shows all the styles that are inherited from parent styles. In this example, the text-align: left style was applied from the .container class as that is the parent element and the #content element didn't override it explicitly.
Update
Added better quality screenshot (thanks to #SLaks)
Added keyboard shortcuts for access (thanks to #NKD)
Added simple explanations of the sections of the Styles panel on the right.
Modern browsers have an "inspector" option that allow you to select a piece of generated HTML and view the CSS applied to it. Each one varies slightly, but normally hitting F12 will get you going.
I have some h1, h2, h3 and a lot of bootstrap snippets that I want to apply only to a specific part of my site, I added a unique class, say .unique but it would take hours to prefix over 1000 of CSS lines
I use sublime text
Thanks in advance
You could use a CSS-preprocessor like LESS or SASS (there are more). Both can do what you want, by just doing this:
.unique {
// Old CSS goes here
}
The have many other advantages over normal CSS.
common I would like to give you some ideas, cause i think your question has something to do with control css overriding.
the Jost's LESS or SASS solution is very good actually to prefix cause can use nested css features, but it requires a compile process, their eventually compiled files are still css. cause the .less or .sass files can not be recognized for html to render styling.
Another thinking To avoid css conflicts and wrong overriding,
Instead of including global styling, see if you can embed them in part of the specific section/page where they can get higher priorities than the rest global styles.
even the same css, generally, !important > inline css > internal css > external css
or javascript can trigger css override after previous css finished rendering on the page.
Instead of using css priorities or script running priorities to override styles, making two external mobile.css, destop.css for example, then using javascript to reload page to include different stylesheet when device width are detected to have been changed in browser resizing behavior.(This is one pop way used in responsive view)
using IDE to locate css patterns and replace them with your prefix if it's simple to match all the patterns.
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)
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.