This is a pretty basic question but I can't figure out why I can't change the css from the tabs template in Meteor. https://github.com/meteortemplates/tabs
I've installed the template and I am trying to change the css from the "active" tab. When I do inspect element, I'm seeing that the css file it's using is a "template_tabs.css" instead of the one I have in my root directory. I have no idea where this file is. I did a search in all my directories and can't find it.
Shouldn't my main css file in the root directory override this? If not, how do I edit this template_tabs.css file?
It likely had to do with file load order: http://docs.meteor.com/#/full/structuringyourapp You want your custom CSS files to load after the package CSS files have loaded.
Alternatively, you could mark your CSS with !important e.g.
div.sample {
background: none;
width: 200px !important }
In this example width will be set to 200px no matter when the file loads. I am not quite sure how it deals with conflicts if the style was marked !important in multiple files with different values.
I think it would be best not to mess with the original package CSS as that will be overwritten when it updates.
Related
I want to override a CSS setting on a form. I'm using bootstrap and I have my own custom CSS file that I have to do the override.
However, I see that it does not bring in my custom css file and does not reference the Bootstrap version rule for .form-control. Instead it is using a "forms.less" file that I don't even know where it is. It's not in my content folder. Though the pic indicates it is in the Contents\Less folder.
Here is the Content folder.
Here is the bundling. My custom site.css follows bootstrap.
Here is my custom CSS file and the .form-control rule where I am overriding the witdh.
You have to Overriding using the !important.
.form-control{
width: 0px !important;
}
for more details please check below url:
https://www.w3docs.com/snippets/css/how-to-override-css-styles.html
If you want to override your custom css , then use it after bootstrap css.
I had to add this at the bottom of my view. #Styles.Render("~/Content/css"). I thought having this in the _Layout_cshtml would take care of it. So not sure why I have to do it twice.
For the past two hours I've been trying to figure out a strange behavior when trying to override bootstrap in Django.
At the beginning, without any custom css file, the result was this:
Then I created a custom css file: my_site/css/master.css
.index-jumbotron {
background-color: #006DB0;
}
#main-title {
text-align: center;
color: white;
}
It resulted in this:
So far, so good.
But now, if I change anything on that same file (even when putting !important and taking good care of the specificity system), the result is always the same as the image immediately above.
However, when I indicate my template to point to another file my_site/css/master2.css or css/master.css, indeed the result is as I would have expected:
I can't get my head around this. Do you have any idea? Do you know if the package django-bootstrap3 could have anything to do with that? I installed it in between my two different version of the custom css file.
Looks like a browser caching issue - did you say 'disable cache' in the developer toolbar (network tab) of your browser? This is usually the easiest solution.
Another option is to open the styles file in your browser and hit 'ctrl+r' to force reload of the css file.
I'm using angularjs along with the angular-material framework. I started writing my project based on the angular-seed project.
In my project I have a form that contains <md-select> elements. My problem is that the selection view is always only as big as 5 select options. I want to see more options when scrolling.
I looked around the angular-material source code and found this !default SASS variable which controls how many options are displayed. I want to make it bigger.
The way I understand it, !default means SASS will ignore the value of that variable if it's already defined elsewhere.
But I also understand that the SASS preprocessor takes a single SASS file as input and outputs a single CSS file - which means I can't override a SASS variable in one file from another file.
I'm also quite confused on which component is responsible for compiling the .scss files found in the angular-material framework and at what stage are they compiled. Are they compiled when installed by Bower? Are they compiled when I call npm start?
I'm new to all these technologies so even though those stuff might seem trivial, I don't really know what to search for to find answers to these questions, I tried and found nothing.
Well I just looked around and realized that the angular-material Bower package comes with css files that have already been pre-processed from scss files. There's nothing I can do to affect that variable.
To show more options in the md-select component I just resorted to the ugly solution of adding these hard-coded pre-calculated attributes to my stylesheets:
md-select-menu {
max-height: 784px !important; }
md-select-menu md-content {
max-height: 784px !important; }
EDIT:
Actually I found this solution even nicer:
md-select-menu {
max-height: 100vh !important; }
md-select-menu md-content {
max-height: 100vh !important; }
It fills as much of the view as possible with options
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.