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.
Related
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
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 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 attached css file following code my web site.I can display css style visual studio design time on my web page but when i run web project css style can not displayed.I use expolerer 8, and firefox 13.0.Also I can display css style my other web site project.What I forgot this web site? Thanks.
<link rel="Stylesheet" href="Themes/default.css" type="text/css" />
There is a handy helper in .net that will work out any path issues you may be having:
<link href="<%=Url.Content("~/Themes/default.css") %>" rel="stylesheet"
type="text/css" />
If you are not sure whether it is working, substitute your css file for something really simple:
body { background-color: Aqua; }
This will help to check whether the problem is:
The stylesheet isn't referenced
Or
The stylesheet is referenced, but is perhaps invalid / isn't doing what you expect
Since there are no header sections for user controls in asp.net, user controls have no way of knowing about stylesheet files. So css classes in the user controls are not recognized by visual studio and produces warnings. How can I make a user control know that it will relate to a css class, so if it is warning me about a non-existing css class, it means that the class really do not exist?
Edit: Or should I go for a different design like exposing css classes as properties like "HeaderStyle-CssClass" of GridView?
Here's what I did:
<link rel="Stylesheet" type="text/css" href="Stylesheet.css" id="style" runat="server" visible="false" />
It fools Visual Studio into thinking you've added a stylesheet to the page but it doesn't get rendered.
Here's an even more concise way to do this with multiple references;
<% if (false) { %>
<link rel="Stylesheet" type="text/css" href="Stylesheet.css" />
<script type="text/javascript" src="js/jquery-1.2.6.js" />
<% } %>
As seen in this blog post from Phil Haack.
Add the style on your usercontrol and import css in it.
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="WCReportCalendar.ascx.vb"
Inherits="Intra.WCReportCalender" %>
<style type='text/css'>
#import url("path of file.css");
// This is how i used jqueryui css
#import url("http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css");
</style>
your html
If you are creating composite UserControl, then you can set the CSSClass property on the child controls..
If not, then you need to expose properties that are either of the Style type, or (as I often do) string properties that apply CSS at the render type (i.e. take them properties and add a style attribute to the HTML tags when rendering).
You Can use CSS direct in userControl.
Use this in UserControl:
<head>
<title></title>
<style type="text/css">
.wrapper {
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
</style>
</head>
This will work.