I am trying to get add a css file to my layout file, which is in the Shared folder. When I run the web application, my CSS is not rendered (CSS that is not in the solution (ie: Bootstrap CDN) renders.
I have tried linking the CSS using these methods, and they don't work:
<link rel="stylesheet" href="#Url.Content("~/Assets/Scripts/StyleSheet.css")" type="text/css"/>
<link rel="stylesheet" href="~/Assets/Scripts/StyleSheet.css" type="text/css"/>
The File Structure For my app is:
Is there something I should be adding to the Startup.cs file so it can read css files?
Thanks.
EDIT: ERROR 404 WITH THE STYLE SHEET
I ran the application on Mozilla Firefox, and used the built in Developers Console to see whats happening. After observing the network tab, it tells me ERROR 404 Occurred while trying to retrieve the style sheet. This is really odd.
Do other changes in your layout show up correctly? For instance if you add a random text string, does that show up? As far as startup.cs, you should have app.UseStaticFiles(); in the Configure section.
Once more note, my CSS in the _layout looks like this:
<environment names="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
I don't think it's required to be broken out, but I haven't tried it not broken out...
With Reference to a similar problem posted on StackOverflow: ASP.NET 5 MVC6 Custom CSS & Javascript placing convention
I placed the CSS File in the wwwroot directory, in a css folder.
Then, in my Layout file, I changed the href attribute:
<link rel="stylesheet" href="#Url.Content("../css/style.css")"/>
Finally, I made sure I had app.UseStaticFiles() in my Configure method:
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles();
app.UseMvc(config => config.MapRoute(
name: "Default",
template: "{Controller}/{action}/{id?}",
defaults: new {controller = "Home", action = "Index"}
));
}
Related
My project is here
(Look for "Laptop" branch, and "IsolatorUI" internal project)
I need to work with external css file I just saved in wwwroot/css.
I have a schtml Home view file and I would like to use it there.
So far, everything I tried did not work. Even using the site.css which was already there was unsuccessful.
Please ignore the different languague on cshtml HomeView file.
How can I establish a css file link? There are many discussions and suggestions I found on the internet, but none of them worked for me.
It's really frustrating when such simple thing doesn`t work...
Basically there is a disturbing bug with css in .NET framework files, but eventually this code worked for me:
In my View:
#section Styles {
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
}
And in my Layout:
<head>
...
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
#RenderSection("Styles", false)
</head>
I have a problem with CSS and Thymeleaf.
In my Spring boot app, I have this structure:
src/main/resource/static/css (for css files)
src/main/resource/static/templates (for html file)
Now, with my html page named ErrorPage and css file named Layout.css, using Thymeleaf I have, in the head of ErrorPage:
<link href="../css/Layout.css" th:href="#{css/Layout.css}" type="text/css" />
But this does not work.
What am I doing wrong?
Move your template folder right under resources:
src/main/resource/static/css (for CSS files);
src/main/resource/templates (for HTML templates).
Then correct the link tag as follows:
<link href="../static/css/Layout.css" th:href="#{/css/Layout.css}" rel="stylesheet" />
Move your template folder right under resources:
src/main/resources/static/css (for CSS files);
src/main/resources/templates (for HTML templates).
Then correct the link tag as follows (relative or absolute):
<link href="../css/firstcss.css" rel="stylesheet">
<link href="/css/secondcss.css" rel="stylesheet">
The old solution with static in front doesn't work for me.
The main culprit of this behaviour is a custom security configuration which is very likely you are doing in your WebSecurityConfigurerAdapter subclass.
If you use SpringBoot 2+ version you should add the following line in your WebSecurityConfigurerAdapter configuration
.requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()
I have my CSS and JS in my layout page.
I need to add a param string to the CSS and JS when I do changes and I upload them with these changes.
For example:
<environment names="Production">
<link href="~/dist/mycss.bundle.css" rel="stylesheet"/>
</environment>
To:
<environment names="Production">
<link href="~/dist/mycss.bundle.css?param=withchanges" rel="stylesheet"/>
</environment>
What is the best way to do that? Has new ASP.NET 5 a way to do that?
there is a built in taghelper that is just for this purpose
<link href="~/dist/mycss.bundle.css" rel="stylesheet" asp-append-version="true"/>
by adding the asp-append-version=true, a hash of the file contents will be automatically appended to the url so it will change if the file contents change.
I am trying to explore MVC6 application. I selected Framework 4.6 and Empty ASP.Net preview template. Using Visual studio 2015.
I have .css file under wwwroot/css directory.
And trying to use in index.cshtml as
<link href="../../css/css.css" rel="stylesheet" />
also tried
<link href="~/css/css.css" rel="stylesheet" />
But it's not working. Is here any technique required?
You have to tell ASPNET5 to use static files. In startup.cs add
app.UseStaticFiles();
in the Configure() function
try this
#section scripts{
<link href="~/css/css.css" rel="stylesheet" asp-file-version="true" />
}
but recommended it is to add the files to the layout
You need to add your files on the layout page, in MVC 6 you can specify which file you want to use for development, staging or production environment depending where you are working on.
Example:
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/YourStyleFile.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
go to your App_Start Folder > BundleConfig.Cs > then find the code block that will look similar to this
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
then add the path of your css file in here
edit 1
Now you have advised that you are using an empty preview template you have two options,
Add the App_start folder and add the above code block and then in your Layout.cshtml file add the line
#Styles.Render("~/Content/themes/base/css")
or
in your Layout.cshtml file reference is as you would normally, but youll need it in your shared view so it carries through the rest of the site
I have a application on asp.net mvc3 and working in a razor view.
On my layout page I attach a css file and put some css in that file, but when I access /Account/LogOn view the css is not working.
It only works if I attach the css on Logon view. Anyone know why my css attached on the layout page is not working on /Account/LogOn?
I also tried by including following code:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "xyz.com – Login";
}
It is still not working. Thanks in advance
Refer your css using url helper
like this
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/default.css")" media="screen" />
In your _layout.cshtml, ensure that you use a path referencing the root (~) of your application. Use #Url.Content() to escape the path:
<link href="#Url.Content("~/Content/css/styles.css")" rel="stylesheet" type="text/css" />
Create the stylesheet under the folder Contents by the name say abc.css
Now include the stylesheet in the LayoutPage so that it is included automatically in all the pages derived from the content page.
<link href="#Url.Content("~/Content/abc.css")" rel="stylesheet" type="text/css" />