I am using Telerik Reporting with an MVC 3 site. I followed this tutorial to set up my report viewer page and have the CSS conflict issue mentioned at the end of the tutorial. They recommend just removing the rules from Site.css so their styles will apply properly.
I don't really like that solution. I want to be free to use the Site.css styles on all my non Telerik report pages and still have Telerik work properly. Is there a way (css or javascript) to remove the offending rules from my stylesheet on the report page only?
Put a class on the body of your report page
<body class="report">
And then in your style sheet:
.report .someelement {
// The styles that fix the problem, e.g.
position: static;
}
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.
So I got my custom app.css in my project and I'm using bootstrap template. Now when I create new button style for example in app.css it's accessible everywhere (on every page since I got master template and other pages are extending it) but when I override bootstrap theme in app.css it's not working. When I use same code to override bootstrap on top of the page using <style> tags it's working. app.css is included properly and after bootstrap.css so any idea what I'm doing wrong ?
Try a cache refresh, for me in Chrome, I use Ctrl+Shift+R.
If this doesn't produce any results, use the inbuilt inspectors on Chrome or Firefox to view the attached properties to the element you are editing. If the app.css is overriding the bootstrap.css, you will see something like the below image, showing the app.css is above the skin-purple.min.css meaning the app.css was the latest to be loaded.
I would say that there is a hierarchy, try to include the bootstrap.css after the app.css, you could also give those css attribute an !important like so:
#bla {
display:none !important
}
But that is not a good practice I think, it may be ok if you do not override alot of the bootstrap.css
You could also try this:
http://bootstrap-live-customizer.com/
to customize your bootstrap.
It most probably is a style precedence issue. I found this article very useful to at least understand what goes on with style precedence and what specificity is.
In your very case it may be helpful to simply use a class selector such as
.mybutton button{
color: blue;
font-size: inherit;
...
}
and give your buttons the attribute class="mybutton". In the class definition you may freely override whatever you want and also let other properties be inherited from Bootstrap.
There is also the !important rule. However, it is usually referred to as a bad practice, since it breaks the normal cascading rules and makes debugging an incredibly painful task.
I'm attempting to use the Stylish extension on the Chrome extensions page.
But for some reason it's not working. I've attempted to Google this, but I only get answers about overriding CSS with an extension not overriding the Chrome extension page.
Any ideas why it's not working? Or how I can force it?
I initially tried this to style a specific extension without !important. Then I tried it with !important to force it.
#fjnbnpbmkenffdnngjfgmeleoegfcffe {
display: none !important;
}
And then I tried on a general class, just in case I got the extension id wrong. But still it wouldn't work.
.extension-list-item-wrapper {
display: none !important;
}
Thanks.
All Chrome extensions, including Stylish, cannot modify content on chrome:// URLs.
If you want to apply a style to chrome://extensions/ (actually, chrome://extensions-frame), edit the user stylesheet located at path/to/chrome profile dir/Default/User StyleSheets/Custom.css.
This style sheet is applied to all pages (including the devtools), so make sure that you choose a sufficiently specific / unique CSS selector.
I am building a chrome extension that attaches a widget sort of thing to gmail message. It appears below every email (something like a gmail contextual gadget) when the user is on gmail.com site.
I looked at few css frameworks like twitter bootstrap to use in my app. When I used it in mywidget, it messed with the existing gmail styles because of css class name clash. Is there any other framework that I can use where there would be no name clash? I came across jquery-ui framework. All the classnames here start with .ui-* thereby causing no name clash. Are there any other css frameworks like this with unique class names?
Update 2: Here is a gist of v3.1.1 provided by #GFoley83
Update: The pastebin joined below is the Twitter Bootstrap version 2.0.4
You should definitively use the up-to-date version and compile it yourself.
Here is what I did with the bootstrap less files :
.tw-bs {
#import "less/bootstrap.less";
}
And this is the result : http://pastebin.com/vXgRNDSZ
Demo (jsfiddle)
If you don't like tw-bs you can easily do a find/replace, there shouldn't be any conflict.
I used #Sherbrow solution but had to add the responsive file too.
.my-bootstrap-container {
#import "less/bootstrap.less";
#import "less/responsive.less";
}
and then run
node_modules/less/bin/lessc demo.less -x > demo.css
If somebody needs the complete step by step tutorial how to compile bootstrap for your own namespaced container I made a blog post about it http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension
The last part is for Joomla but the beginning can be used globally. It has also a link to the latest compiled bootstrap version 2.3.2. Just make a search and replace for .dp-container.
2016 Update: A future way to mitigate this issue (rather than having to recompile bootstrap) is to take advantage of web components, specifically shadow DOM. This allows your app to be self contained (almost like an iFrame) without the web browser having to open a separate page / losing the ability to communicate between pages.
say your component is contained in <div id='plugin'>...</div>
You can move what's inside that div to a tag in your head, eg.
<template id="template"><!--Your Code Here--></template>
Your template can include all the bootstrap link tags and js you want. Then in your javascript/bookmarklet, you can write
var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);
You can read a lot more about Web Components (along with Shadow DOM) here: http://webcomponents.org/articles/introduction-to-shadow-dom/
I started off using jquery ui - http://jqueryui.com/ because it has its own css classes which don't clash with gmail. YUI is another such framework that I found. But Sherbrow showed how I can use bootstrap css with our own unique css style names.
The currently accepted answer did not render forms correctly (using SASS and bootstrap 4 beta). The following works for me:
.bootstrap {
#import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';
box-sizing: border-box;
}
The box-sizing is important, because, when compiling your SASS stylesheet, the following will be generated.
.bootstrap html {
box-sizing: border-box;
...
}
I.e. the box-sizing property will be placed on an html element inside an element with class="bootstrap" - which of course will not exist. There may be other styles on html and body that you may want to manually add to your styles.
And now you can place content styled using bootstrap inside a bootstrap class:
<div class="bootstrap">
<div class="container">
...
</div>
</div>
I am using ASP.NET MVC 2 & C#.
I want to include/embed an html page (raw text & styling; no forms) in one of my views as is without my own css styling (read: The site.css styles for the ASP.NET MVC 2 application itself) affecting it. I can access the page statically and open it in a new window and it retains it's styling; however, if I do:
<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
<!--#include virtual="~\Static\Instructions.htm" -->
</asp:Content>
The styling from the html & the site.css in the web application seem to get merged.
I've added the following ignore route entries as well:
routes.IgnoreRoute("{resource}.html/{*pathInfo}");
I also tried making a partial view control with the raw html in it and rendering that here. That gives the exact same results as this.
Thoughts?
When you include a file with the code above, it's like appending the entire data into the original file, as if there was no include at all. Doing it this way, you will inherit all relative JavaScript and CSS that is on the parent file.
The only way you can solve this is by creating a wrapper around your main content and setting all the CSS elements to affect that wrapper only. Aside from that, the only other option is setting a CSS style for your appended file with specific IDs or clean up your current CSS to be more specific.
One final method, if you have CSS affecting the included file (I assume from your OP, you have CSS styling inside the file itself), you can set !important to them so that they overwrite any other CSS classes affecting them.
You could add a wrapper <div id="embed"> around your embedded content and then use #embed in your site.css to override the styles you don't want applied.
p {
color: red;
}
#embed p {
color: blue;
}
I can only suggest to do so as Pat and lighthazard said.
There's no routing problem.
Try to change your perspective to the rendered html code.
If you have a page, and there's an area, that should be in other (none) styles. then you must mark this area either by a css class, if there are many areas, or if this is the only one per page an css id.
By the way, not to style ist not possible in html. At least the browser stylesheets will define the output.
Here's en interesting Question, i hope this will help.
CSS Reset, default styles for common elements