I guess this should be straight forward, except I just can't figure it out. I'm trying to use a stackpanel. I'm trying to style it so that the header's text, background color, etc matches the rest of my app.
I'm using css and a client bundle to apply styles to my components.
I've tried to style the stackpanel using two methods and both have failed.
Method1:
If I apply the following to the MyProject.html style section:
.gwt-StackPanel .gwt-StackPanelItem {
font-weight: normal;
font-size: 8pt;
width: 100%;
background: green;
}
.gwt-StackPanel .gwt-StackPanelItem-selected {
background-color: red;
}
And then load it in firefox, I still see the default styling. If I open up firebug and inspect the element, I see that the gwt default styles are still being applied.
Method 2:
If I encapsulate the above styles in my css file then GWT compiler complains about obfuscated styles? So I added the #external attrib to the styles, the compiler doesn't complain, but I still don't see my changes applied.
Thanks in advance!
I know this is a late answer, but in case someone comes here later I have a suggestion. The reason your CSS gets overridden by the gwt theme is that the gwt theme is taking precident in your module file (.gwt.xml). The way to change this is to include your own CSS file in your module file after the gwt theme.
For example, you should see something like this in your module file:
<!-- You can change the theme of your GWT application by -->
<!-- uncommenting any one of the following lines. -->
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->
<inherits name='com.google.gwt.user.theme.clean.Clean' />
Somewhere after this, add a stylesheet statement for you own css file:
<!-- CSS Style Sheet includes -->
<stylesheet src="<pathToYourCSSFile>.css" />
Now, because your file is included after the gwt style, your styles will take precedent over gwt!
I always comment out this line from the xml file of the module:
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
then you can use your own styles adding stylenames to widgets (stackPanel.setStyle...)
And if you need a default style of gwt you can copy it from gwt-user.jar com.google.gwt.user.theme.standard.Standard.public.gwt.standard.standard.css to your own css file.
Related
Sorry if this is a silly question, I'm completely new to bootstrap and ASP.NET.
I'd really like to change the nav-link colours for my web application but applying inline CSS and changing the bootstrap.css is not working. According to inspect all CSS for the nav-links are being overridden by Navbar.less
Screenshot of inspect:
Bootstrap v3.4.1
Of course you should be compiling bootstrap's files combined with your style to make a perfect match, taking advantage of bootstrap variables, and overriding them in case of need. You can compile it automatically when saving using editor extension or other way you choose.
I assume you are using bootstrap 3 because it uses less files.
main.less <-- your file
#import "path/to/bootstrap.less";
// your overrides here: (see file variables.less)
#navbar-default-color: white;
#navbar-default-bg: pink;
// and also
.my-primary-border {
border: 1px solid #brand-primary;
}
// and rest of your styles.
my-html.html
<!-- main.css is automatic output of main.less -->
<link rel="stylesheet" href="main.css">
If you're using bootstrap 4/5 it's the same idea. See here
I wish to set some styling on the storybook canvas and docs at a global level. Could anyone suggest me a way out?
Thanks!
You can use the preview-header.html for that. Just add that file to your .storybook folder. Then add a style tag there, e.g.:
<style>
body {
font-size: 15px;
}
</style>
All it's contents are being injected to the Storybook preview Iframe, so you can add styles as well as other scripts and stuff.
https://storybook.js.org/docs/react/configure/theming#global-theming
Create manager-head.html file in .storybook directory and set your styles in
<style>
...
</style>
I don't think it is possible, but I will ask anyway:
Can I apply an external css file (Bootstrap for instance) to a div and its children without affecting the rest of the page.
For example, I need to migrate a footer written with Bootstrap over to an existing page. That page does not use bootstrap. If I link Bootstraps css at the top of the page, the css is applied to the whole page which ruins existing css. How can I just apply the bootstrap styles to the footer section without having to rewrite most of the page's css?
Any suggestions?
I ended up using LESS to compile a new css of bootstrap with a prefix of .bootstrap as seen below. It works, but i wonder if there is a more traditional way of handling this problem.
file: bootstrap-only.less
.bootstrap {
#import 'bootstrap.css'
}
file: bootstrap-only.css
.bootstrap .container {
width: 100%;
}
file: page.html
<style>
.container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">
<div class="not-bootstrap">
<div class="container">I am 20px</div>
</div>
<div class="bootstrap">
<div class="container">I am 100%</div>
</div>
You can try usig scooped css.Please do refer the following sample code.
<div>
<style scoped>
#import "filename.css";
</style>
//your div with its children will come here
</div>
Your inline styles should not be affected by adding Bootstrap as inline styles take precedence over styles from external resources. The only elements that should be affected are the ones in the page that share class names with bootstrap classes.
You can try referencing the Bootstrap css before your own css and your stylesheet will take precedence over the Bootstrap css. Unfortunately this may add styles additional styles to some of your classes which that you didn't explicitly reference in your stylesheet and may still change the look of your page.
For those classes that exist in both bootstrap and your stylesheet it's probably best to just change the names of those classes in your stylesheet and page. A quick way to do this is to use "replace" search for the class name and replace it with the new class name most IDEs have a way to "replace all" so it's often just a bit of typing and a few clicks to change a bunch of styles.
You can try using the Angular 2+, where you can simply create an component and us it anywhere irrespective of the page css. Basically it will create a shadow DOM and will not be accessible outside that component.
I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?
The IFRAME solution works like this:
In your main HTML file, you'll have your DIV:
<div id="myspecialdiv">
<iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>
Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:
<html>
<head>
<link rel="stylesheet" href="path/to/external/stylesheet.css" />
</head>
<body>
<!-- The contents of your DIV -->
</body>
</html>
If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:
<div>
<style scoped>
// Styles here
</style>
</div>
This will helps you a lot:
http://css-tricks.com/saving-the-day-with-scoped-css/
Applies only style to a certain delimited escope. Good luck!
IMHO better than the iframe solution..
related: Limit scope of external css to only a specific element?
If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:
p { font-size: 12px; }
You'd modify that to:
.mydiv p { font-size: 12px; }
And format your DIV as
<div class="mydiv">...</div>
You would then load the script as a stylesheet, rather than the external stylesheet directly.
<link rel="stylesheet" href="path/to/internal/script.php" />
I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
Hope this helps.
I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p> (and thus it cannot be included in your page headers). Include your div in a <style scoped> tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/
You could assign a CSS prefix to target the section of your document you want to style.
scoped is a good idea, but has browser compatible issue.
I solve this problem by adding pre-class before all selector in css file:
https://github.com/ericf/grunt-css-selectors
I have some html files with their own css. I want to use them in a gwt application so i copied the html and the css files in the application.
The problem is when i open the html it uses the gwt theme style. For example in my css the html 'body' background color is black, but it looks white unless i deactivate the theme.
How could I override the gwt theme style and use my css styles?
This post on the GWT mailing list describes an alternative solution. You have to create a new ClientBundle which references your CSS file:
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
public interface Resources extends ClientBundle {
public static final Resources INSTANCE = GWT.create(Resources.class);
#Source("style.css")
#CssResource.NotStrict
CssResource css();
}
And then inside your onModuleLoad() method you have to inject the CSS file:
public class YourApp implements EntryPoint {
public void onModuleLoad() {
//...
Resources.INSTANCE.css().ensureInjected();
//...
}
In my opinion this is the cleanest and easiest way to override the styles.
Like Sarfaz said - !important should be your last resort as it kind of defeats the whole concept of Cascading Style Sheets.
Anyway, in GWT, in order to easily override the core GWT styles contained in the theme you selected, you should locate your module file (the one that has a file name ending on *.gwt.xml), then locate the line where you declare your theme and put your custom/whatever stylesheet after it, like this:
<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />
Note, however, that for GWT 2.0 CssResource and UiBinder is recommended.
Be sure to read the appropriate section of the docs for more pointers.
You can override the styles of GWT by using the keyword !important in all your css of the html files, for example, if one of your html file contains this css:
background-color:#000000;
Then you should write it like this:
background-color:#000000 !important;
Do the same for all your styles in html files.
Note that using !important is not the best way, if you can find any better alternatives you should go for them first.
In addition to using !important you can also rely on CSS Selector Specificity.
Most (all?) of the GWT styles are stated using just class eg:
.gwt-DisclosurePanel .header {
color: black;
cursor: pointer;
text-decoration: none;
}
To override this you can use !important or you can be more specific in your selectors eg:
table.gwt-DisclosurePanel .header {
text-decoration: underline;
}
How does this work? This works because adding the element name (table) to the class in the selector makes it more specific than just the class alone. This will override other styles even from stylesheets listed lower in the header.
Giving your widgets IDs and using those is even more specific.
I know it's not very elegant but I found it rather effective to replace the standard.css file in the output files generated by GWT with an empty file.
(Maven can take care of that reliably.)
The solution <stylesheet src="CustomStylesheet.css" /> is deprecated and did not work with the new superdevmode.
A solution that worked for me (using GWT 2.7) was to create a new custom theme:
projectPackage/themes/MyCustomTheme/MyCustomTheme.gwt.xml
<module>
<stylesheet src="gwt/MyCustomTheme/MyCss.css"/>
</module>
projectPackage/themes/MyCustomTheme/MyCustomThemeRessources.gwt.xml
</module>
projectPackage/themes/MyCustomTheme/public/gwt/MyCustomTheme/MyCss.css
(Note: removing the gwt/MyCustomTheme/ part of the path worked in devmode but didn't work in deployed version, of cause you can still rename 'MyCustomTheme' to something of your liking)
The css file you want to use
Project.gwt.xml
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
"http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="Project">
(...)
<!-- Inherit GWT theme. e.g. the Clean theme -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Our custom theme -->
<inherits name='projectPackage.themes.MyCustomTheme.MyCustomTheme'/>
(...)
</module>
Note: You can get a sample custom theme using http://gwt-theme-generator.appspot.com/ and extracting the downloaded .jar file.
That's easy. Just put your CSS link under the GWT's module script:
<script type="text/javascript" src="myapp/myapp.nocache.js"></script>
<link rel="stylesheet" href="myapp.css" type="text/css">