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.
Related
I am using Laravel 6 and want to change the structure of some of my routes in the web.php file. When registering the following route like this:
Route::view('/my-article', 'articles.my-article')->name('my-article');
everything works as it should.
But when changing the URL like this, adding /articles:
Route::view('/articles/my-article', 'articles.my-article')->name('my-article');
Suddenly no CSS is applied anymore. No Bootstrap, Fontawesome or own stylesheet. JS script on the other hand, and HTML of course, were loaded.
Oddly (for me): The other routes worked fine, all CSS stylesheets loaded.
I tried the same with another route that had a Controller action. I changed it from
Route::get('/{continent}', 'ContinentController#index')->name('continent');
to (adding /continents)
Route::get('/continents/{continent}', 'ContinentController#index')->name('continent');
And again, no styles were applied. Only JS scripts and HTML.
Why is that so? Why can't I add something to the URL by hand and why does it affect the loading of the CSS stylesheets?
Thanks and best regards.
EDIT:
Here is the part of my template.blade.php file where the styles are included:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Own CSS -->
<link rel="stylesheet" href="css/style.css?{{ time() }}">
It's only problem with visability of css. There are a lot of answers in google, but since yesterday I've checked all of them and I still didn't solve my problem...
My project structure in eclipse looks like this:
Only in one file I have relation to css - in header.jsp:
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/css1/bootstrap/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/css1/main.css"/>
This path should be fine. What could be the problem?
In jsp also you can use the Html tags freely so just use
<link rel ="stylesheet" type="text/css" href="src/resources/css1/bootstrap/bootstrap.css">
i think this should work, see that you are not making spelling mistakes or Capital/small alphabet mistakes.
I've tried this exact code on my other computer and once run it is shown differently. Could you correctly show me how I should insert the references? Also how could I override the style of the default bootstrap?
I think that's all the info you need, but if you need anything else just ask.
I assume that you html file is inside wwwroot folder, so:
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
...
</style>
</head>
Where you have:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove the ~.
I believe that the ~ is a Windows only thing used for finding the path. If it's your mac where Bootstrap is not working, then I'm 98% sure that was the issue. ~ isn't used in the mac environment for paths like it is on Windows.
You will also need to do that for your other paths being found this way.
Going in and changing the bootstrap CSS can get a little complicated so I usually create a new CSS file with my edits. Since CSS is cascading stylesheets, I make sure that my CSS file is the last stylesheet in the head section so it overrides the stylesheets above it.
The location of your CSS file in reference to your HTML file will determine what the file path looks like in your reference. If your HTML file is in the root directory, the reference/paths mentioned in the other answers should work.
As stated above:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove ~.
If you want to overwrite CSS place the default.css or your own css after the one you want to overwrite for example:
<!-- Bootstrap and Custom CSS Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
what can I do that "bootstrap/less/bootstrap.less" is not overwriting all my css -styles (I could only use the .less files I only needed(e.g.: bootstrap/less/buttons.less ), but I need all classes).
When I import "bootstrap/less/bootstrap.less" it's going to overwrite my bootstrap menu and all standard selectors like input, textarea ..., but I want only to overwrite the css classes i want, but not everything ...
thanks :)
[UPDATED: 09-04-2014]
Background information for my project:
Important NuGet Pakages:
Bootstrap (v 3.0.0 ) -> imported in the master page
Bootstrap.Less (v 2.3.2 ) ->these files I use for impor in
"Site.less")
dotless (v 1.4.0.0)
html5shiv (v 0.1.0.8)
Modernizr (v 2.6.2) -> imported in the master page
Respond JS (v 1.2.0)
Visual Studio 2013
MVC5
my "Site.less" looks like
/*#import "bootstrap/less/buttons.less";*/
#import "bootstrap/less/bootstrap.less";
.BWButton {
.btn;
}
Its a little bit strange when I only import "bootstrap/less/bootstrap.less" everthing is going to be overwritten, it doesn't matter which order of the css/less import I have made in the master page and when I use only "#import "bootstrap/less/buttons.less"" no effect is on the page not even if I remove all css/less imports in the master page...But intelli sense works on both imports("bootstrap/less/buttons.less" and "bootstrap/less/bootstrap.less") (when imported inside the site.less), but on the client site Site.less(when i import "bootstrap/less/buttons.less" before in site.less ) is empty(when I select "Site.less" in fire bug)..
my master.page(Shared/_Layout.cshtml) looks in the header like this:
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/dataTable.css")
#Styles.Render("~/Content/popup.css")
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
#Styles.Render("~/Content/Site.less")
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/site.css")
the output on the client side:
<script src="/speScripts/modernizr-2.6.2.js">
<link rel="stylesheet" href="/Content/dataTable.css">
<link rel="stylesheet" href="/Content/popup.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="/Content/Site.less">
<link rel="stylesheet" href="/Content/bootstrap.css">
<link rel="stylesheet" href="/Content/site.css">
May be this helps you a little bit more :)
In your html , make sure you include your own stylesheet at last !
<head>
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/style.css" rel="stylesheet">
</head>
In my example above, my custom stylesheet will overrule the bootstrap.min.css sheet.
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.