In ASP.NET MVC4 application, style bundle is created using
bundles.Add(new StyleBundle("~/css/pos.css")
.Include("~/css/mypos.css"));
and rendered in view as
#Styles.Render("~/css/pos.css")
Generated output in debug mode is
<link href="/myapp/css/mypos.css" rel="stylesheet"/>
How to add media attribute to output so that style is used for screen
<link href="/myapp/css/mypos.css" media="screen" rel="stylesheet"/>
or for print
<link href="/myapp/css/mypos.css" media="print" rel="stylesheet"/>
Or is there better way to to this, can media specified in css file or other solution ?
jquery and jquery-ui are used.
Within your Razor page you would add the following:
<link href="#Styles.Url("~/css/pos.css")" rel="stylesheet" type="text/css" media="print" />
Late to the party, but nonetheless: There is a method
Styles.RenderFormat(string tagFormat, params string[] paths)
This is used internally by the normal Styles.Render call. For the format, you can simply use
"<link href=\"{0}\" rel=\"stylesheet\" media=\"print\" />"
or whichever other attributes you wish to add.
Related
I have a ASP.NET MVC project which uses JQuery Datatables to show a table.
The problem: the css stylesheet isn't applied when links to local css file. I've tried the following:
<link rel="stylesheet" type="text/css" href="~/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="../Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="Content/datatables.min.css" />
But this one (at the same place of my HTML) is working:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
Even current sorting column highlight from this css doesn't work!
Of course, the CSS file exists in my project's Content folder, and its contents is totally the same, because I even try to copy the file from https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css and put it in project's Content folder.
So, the question is why doesn't the first HTML link snippet work?
Maybe, a bug in the MVC (it's up to date)?
jQuery DataTables distribution includes CSS, JS and image files (in the images folder).
Use Download builder, select Download tab and download all required files.
Also you should not use ~ in your URL. Most likely that is the reason why CSS is not applied. Use absolute URL /Content/datatables.min.css or relative URL Content/datatables.min.css instead.
When adding some custom CSS to your ModelAdmins, you usually do something like this:
class BookAdmin(admin.ModelAdmin):
class Media:
css = {
"all": ("my_custom_styles.css", )
}
My problem is that such style sheets are added BEFORE third-party apps style sheets, making it impossibile to override them easily (in fact, they override the custom styles):
<link href="my_custom_styles.css" type="text/css" media="all" rel="stylesheet" />
<link href="base_styles.css" type="text/css" media="all" rel="stylesheet" />
I'd like to swap such order. Is there any easy way to accomplish that?
I'm slightly obsessive about the readability (and hence indentation) of all markup.
When I call #Styles.Render("~/content/css") in an ASP.NET MVC4 project, only the first line maintains indentation from my Razor template.
Here is the output:
<link href="/Content/css/ie.css" rel="stylesheet"/>
<link href="/Content/css/1140.css" rel="stylesheet"/>
<link href="/Content/css/screen.css" rel="stylesheet"/>
<link href="/Content/css/compatibility.css" rel="stylesheet"/>
I would prefer all generated markup have the same indentation as the #Styles.Render() call.
Is this easily done? If so, how?
Ideally the rendered HTML would be minified. Formatted markup is great while developing but makes for a bigger file if that is what you are serving to the user.
The only reason you see four style sheets is that you are running in a debug environment, which has disabled your bundling. As I explained in the post "Scripts.Render using outdated javascript file" if you add BundleTable.EnableOptimizations = true; to the bottom of your RegisterBundles in your BundleConfig, it will force bundling to work (as it would in release mode), and you'll see that this:
<link href="/Content/css/ie.css" rel="stylesheet"/>
<link href="/Content/css/1140.css" rel="stylesheet"/>
<link href="/Content/css/screen.css" rel="stylesheet"/>
<link href="/Content/css/compatibility.css" rel="stylesheet"/>
now renders as this:
<link href="/Content/css?v=Sn3f8Vf56Sr9k0EreIZnouVoGt2cfrd41" rel="stylesheet"/>
So yes while developing, it isn't maintaining your indentation, but once you publish it will be what you want.
I know this is a simple question but for some reason I'm wondering if I'm doing something wrong here.
My understanding is that if you declare 2 CSS files
<script type="text/css" src="JQueryUI.css"></script>
<script type="text/css" src="Override.css"></script>
I want to use the "Override.css" to override some values, so if I type let's say ".ui-accordion" and put my own values, i would expect them to take priority over the original values located under that name on the JQuery.css file.
Mainly because the declaration states that Override.css comes AFTER JWuery.css.
For some reason this is NOT happening.
I tried switching the declaration of the 2 files
...but the Jquery.css seems to ALWAYS seems to take priority.
Any reason why ??
This is not working because you are not loading correctly the css files.
It should be:
<link rel="stylesheet" href="JQueryUI.css" type="text/css" media="all" />
<link rel="stylesheet" href="Override.css" type="text/css" media="all" />
I am agree with Zhihao about specificity of elements, but I have also noticed that your are using <script> to attach CSS files, use <link> tags instead, maybe that would load your css and it will override existing styles:
<link rel="stylesheet" type="text/css" href="JQueryUI.css" />
<link rel="stylesheet" type="text/css" href="Override.css" />
P.S. just posted my notice in the comment as an answer
I need to print my reports in a web application.
I have <link rel="stylesheet" href="print.css" type="text/css" media="print" /> in my code. But it does not apply any style. On the other hand, if I write print.css codes inside my document using <style></style> everything works fine.
What's the matter ?
maybe you insert print style sheet before main styles?