What I want is, for example, to change the css background color of navigations bar of .navbar-default, which can be done by .navbar-default{background-color:#000;}
But I want is, to see the full css style definitions of .navbar-default class, so I can look and change every element(text-color, hovering colors and every other thing) as I like. Rather than inspecting webpage elements for css codes from browsers, I want to look in a place where the definitions contain.
You can find all in readable format here
If you are using the CDN "version" of Bootstrap, then you won't be able to edit the CSS.
A good way to do what you want is by using your own local copy of the bootstrap.css file. You'll find herein all the definitions, and you can alter them as per your wish.
Conversely, you could also edit the .sass or .less files if you want more control.
edit:
Since the OP is using CDN, follow the following steps and you should be just fine:
Identify the element/ tag that you want to edit: div, input, etc.
Identify the attribute you want to edit: color, height, etc.
most importantly: identify the class or id of the element.
After you've done the above, create a new styles file, for example: styles.css, and write your new custom CSS rules in there as per CSS rules.
Include this file by linking it in your .html file using the link tag
Voila!
You can find and edit it in bootstrap.min.css
This is for new version
https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css
Just check the header import link and remove .min part if its minimised link
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 know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
I have a web page, Page-A, that uses a primary css file. I have other pages, Page-B, that use another primary css file. I'd like to use two classes of the Page-B css file into Page-A, but I do not want to override other classes and functions of Page-A css with this Page-B css file.
Is it possible to import only two classes of a css file instead of all its classes. In other words, is it possible to constrain an #import or link to load only a few classes?
What you could do is mark the classes that will be overriding everything with the !important tag in CSS, which means that it will not be overridden.
I would just input the two classes you want into the Page-A css file, as there is unfortunately no way to just import certain classes.
I would suggest making one master CSS file and input into both pages, that way all of your changes are reflected on both pages.
No. It's not possible.
But: You can still prefix your CSS rules with a class or an ID. It can helps you work with specificity (http://bit.ly/1aODhdu) and with rule importance.
You can also prefix CSS rule which will be applied-only for some nodes like html.one div html.two div so after load second CSS file will be still ignored.
No, it is not possible to import specific classes from a CSS file.
The correct way to do this would be to create a master CSS file, which all your webpages can share.
Delete the classes you need from PageBs css(OPTIONAL), add them to a new CSS file.
Link the new file to both the pages.
This way you will not override any classes and have a CSS file which has all the shared classes both pages need.
When I want to change for example the style of a bootstrap button how should I do that:
Remove the css class in the bootstrap file and create a class in my css file with my settings
Leave the original css file and create a class in my css file with !important to overwrite the original file settings.
There are surely other ways...
What is the best my also considering upgrading to new bootstrap.css file?
The best way is to:
Leave the bootstrap file untouched
Modify the class in your own stylesheet
Load your own stylesheet after the bootstrap CSS
You have the benefit of not having to use !important and you can still update bootstrap.
Note: although you can update the bootstrap-file, you still have to test your page to see whether the update broke something, but this will at least assure you that you didn't lose any work
1.) Make a backup of the file and just edit the file as you please. I wouldn't create multiple files with !important since you'll lose track of things pretty fast.
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.