I would like to stlye my .net core website. Currently there is a file called site.css with all the css for the website. However since i have multiple views i would like to be able to pick and choose what css is applied to what view. I want all my views to have the same navbar as my homepage or index view. Any suggestions?
However since i have multiple views i would like to be able to pick and choose what css is applied to what view.
You can add a Render Section control to your layout.
In your _layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
#await RenderSectionAsync("css", required: false) <-- Add this
</head>
<body>
#RenderBody()
</body>
</html>
And in your view file, you can specify which css it depends on:
#section css{
<link rel="stylesheet" href="some-css.css" />
}
I want all my views to have the same navbar as my homepage or index view. Any suggestions?
Simply put the navbar in your layout view file is fine.
Apply all your css changes to shared/_layout.cshtml page.
Document Reference
Related
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>
I am trying to add a css file to a basic html file (in /dashboard along with the css file) and it is not working:
#{
ViewBag.Title = "Index";
}
<head>
<link rel="stylesheet" href="~/Views/Dashboard/Dashboard.css" type="text/css" />
</head>
<body>
<h2 id="yes">Index</h2>
<h1>#ViewBag.test</h1>
</body>
I have tried multiple ways, including adding the file to the contents folder, and adding
#Styles.Render("~/Content/css")
Is this a syntax issue? Or a lack of understanding of how the layout system works? Still wrapping my head around asp.net and MVC...
You are not supposed to be loading CSS under the #section Scripts. There's a reason CSS is loaded first!
For example, check this reference here by Patrick Sexton: Call CSS First
Ensuring the calls for CSS
files come first helps ensure the browser gets it first. This saves
time by reducing network calls and not letting javascript activity
delay the browser from getting CSS
Real Solution - Loading your CSS First
Step #1
If you want to load different CSS files depending on the .cshtml file, and assuming they all use the same _Layout.cshtml, you can do something like this:
On your _Layout.cshtml, in between your <head> HTML tag, write this:
#RenderSection("Stylesheets", required: true)
Putting this in your <head> tag will ensure it gets loaded first!
Note: The required: true part is optional.
Step #2
Then, on your .cshtml Views, add this at the top:
#section Stylesheets {
}
And inside there, load your <link> tags.
Try this below at end of the body tag
#section Scripts
{
<link href="~/Content/yourcssname.css" rel="stylesheet" />
}
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 -->
}
I have two CSS files style1.css and style2.css. Each of them include many lines of styles.
I use them in all project pages. I have no problem with using them on Master page but, the content pages(the pages that inherited from master page) can't find the second CSS file!
For example on a inherited page when a div's class is set to a style from style2.css, it doesn't work. It can't find the CSS selector. :(
Master page's head tag:
<head runat="server">
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="~/css/style1.css" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="~/css/style2.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
Also, I've linked the CSS file on the inherited page but doesn't work.
Even, on the designing state the visual studio can't go to definition of the CSS selector line by pressing the F12 key on the desired selector name, so it raises "Could not find CSS class selector 'loginform'" error.
Do it declaratively in the master page by dragging the CSS files from Solution Explorer window to the code view of the mark-up.
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
In my inspector I see the following difference:
My page:
The twitter bootstrap page:
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
Most of the other CSS is working fine.
My css import:
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
<link href="assets/css/bootstrap.css" rel="stylesheet">
I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
font-size: medium;
When I wanted:
font-size:8pt;
I placed the following at the top of my HTML page:
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
However if you do have a user stylesheet issue, these values will be locked.
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
It worked for me.