The issue is CSS Does not effect on website after bundle although all of bundle process is fine
From the view source code page i can see the css file but it does not take any effect on website. The code bellow is what i used to call css and saw from view source code page and from my layout file.
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
Does anyone have any idea for this?
Thank you.
You used
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
your code
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
try like ths
src should change to href
<head>
<link rel="stylesheet" type="text/css" href="/path/yourcssfilename.css">
</head>
Related
The file structure in my GitHub repo is
--root
index.html
resume.css
--folder assets
resume.css
(yes I made two identical css file just in case one of them works but none of them works...)
I tried to reference css file as
<link rel="stylesheet" type="text/css" href="resume.css" media="all" />
or
<link rel="stylesheet" type="text/css" href="assets/resume.css" media="all" />
But again none of them works..
When I download the entire GitHub repo as a .zip file on my computer and unzippit, the website can display normally.
Is it something else I could do?
The webpage shows on my local file
and webpage on github
Can you check where you placed the <link> tag?
It should be inside the <head> tag
EDIT:
You can move highlighted section in here to parent <head> tag and remove <head> tag inside <div> tag
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.
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">
I've placed a style sheet style.css inside the /assets/styles-folder and embedded it via <link rel="stylesheet" href="style.css" type="text/css"> in my something.ejs file.
But the stylesheet is not loading. Has anyone an idea?
Use the following to give the correct location of style sheet:
<link rel="stylesheet" href="../../assets/styles/style.css" type="text/css">
The first .. will take it to views folder, the next .. will take it to parent folder Employees, now you can give the path to your stylesheet.
This is because the path must always be relative to current .ejs or some other current file's location in the directory.
I have an ASP.NET MVC 3 project with a _Layout.cshtml and the css style sheet being accessed like this:
link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css"
This is fine for most of the views in my project but there is just one view that I would like to define the style sheet independently and in the view itself. Specifically in the head of the view. This means that the view would have to have it's own head and body tags independently of the _Layout.cshtml file.
Is this possible? If so can someone help me get started with it?
EDIT:
What I'm trying to do is put a style sheet in the head of this one view that would override the CSS from the _Layout.cshtml.
You could define an optional Razor Section in the head tag of your layout. Place it after your main stylesheet, and then it can be used in any views using the layout to bring in additional stylesheets that contain override rules.
_Layout.cshtml
<head>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css">
#RenderSection("CssOverrides", false)
</head>
View.cshtml
#section CssOverrides {
<link href="../../Content/themes/base/jquery.ui.override.css" rel="Stylesheet" type="text/css">
<!-- additional stylesheets -->
}