I'm new to web development but have some experience with C#, so I'm trying my luck with ASP.NET.
I was able to create the base app and so on, however now I want to use my own CSS stylesheet.
I tried using the exact syntax that the base app uses:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - SmtteProject</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
</environment>
<link rel="stylesheet" href="~/css/test.css"/>
<link rel="stylesheet" href="~/css/site.css" />
</head>
Where the test.css is the stylesheet I want to use. It is in the exact same directory as site.css, however I get this error in the console on the page:
GET http://localhost:5000/css/test.css net::ERR_ABORTED 404 (Not Found)
I tried using runat="server" in both the head and in the link, as I saw quite a few answers online with this solution. However, that did not do the trick either.
I tried displaying an image that was in an images directory in the exact same way, but encountered the same issue.
Any help welcome.
It's Cascading Style Sheets, or CSS. Not CCS. I think that this naming confusion is the root of your problem.
Your file is named test.ccs. It should be named test.css, per the HTML snippet you provided.
Related
Ok, so I recently had an SEO audit done on my site and per the recommendations I added the Geo.txt, robots.txt, Schema.txt and sitemap.xml files to my root directory (not sure exactly if this is where these files go...) And now for some reason my page displays like there is no CSS file at all. Could adding one of these files affect that? Do I need to add the path to my CSS to one of the files? I will add my header section below.
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L6BBJ36NQR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-L6BBJ36NQR');
</script>
<asp:ContentPlaceHolder ID="contentHead" runat="server">
</asp:ContentPlaceHolder>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="Web Development Erie PA Application Custom Software Northwest PA" />
<link rel="manifest" href="site.webmanifest" />
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- CSS here -->
<link href="" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" />
<link rel="stylesheet" href="assets/css/slicknav.css" />
<link rel="stylesheet" href="assets/css/flaticon.css" />
<link rel="stylesheet" href="assets/css/progressbar_barfiller.css" />
<link rel="stylesheet" href="assets/css/gijgo.css" />
<link rel="stylesheet" href="assets/css/animate.min.css" />
<link rel="stylesheet" href="assets/css/animated-headline.css" />
<link rel="stylesheet" href="assets/css/magnific-popup.css" />
<link rel="stylesheet" href="assets/css/themify-icons.css" />
<link rel="stylesheet" href="assets/css/slick.css" />
<link rel="stylesheet" href="assets/css/nice-select.css" />
<link rel="stylesheet" href="assets/css/style.css" />
</head>
The page is supposed to look like this:
Proper site look
But instead it looks like this:
Wrong site look
I am attempting to load a blazor spa inside a static web page hosted in a different web service. I am using the Visual Studio Code extension Live Server to host the following static html file. I'm using a generic out-of-the-box blazor server side project for my example.
My problem is that the blazor.server.js loads and attempts to establish a connection but I get two console errors following the connection establishing.
Error: The circuit failed to initialize.
Error: Invocation canceled due to the underlying connection being closed.
screenshot of the two errors
I'm no sure how to proceed with getting the actual app to load correctly. Any advice, suggestions, and/or answers are appreciated.
index.html
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>AAH.FirstAvailable.Client</title>
<base href="http://localhost:5083/" />
<link rel="stylesheet" href="http://localhost:5083/css/bootstrap/bootstrap.min.css" />
<link href="http://localhost:5083/css/site.css" rel="stylesheet" />
<link href="http://localhost:5083/AAH.FirstAvailable.Client.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</header>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<script src="http://localhost:5083/_framework/blazor.server.js"></script>
</body>
</html>
I just create a .net core 2.0 project on my visual studio and found in _Layout.cshtml few new properties like called- "environment". I worked on MVC5 but there was no such properties. What these propertie does? Is it replacement of Rezor Syntax which i used in MVC5 view? Please provide details with doc for use those properties to get started with those.
_Layout.cshtml:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
We have 3 Environments; Development, Staging and Production.
This tag helper help us to render what we need in different environments.
the code below means that, if we are in DEVELOPMENT environment, render this css files.
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
and the code below means that render the content when we are NOT in DEVELOPMENT environment.
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
*note: asp-fallback-href in code above means if can't connect to cdn, go and use minified bootstrap file from server!
also you can write code above like this:
<environment include="Staging, Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
that means render the content if we are in STAGING or PRODUCTION environments.
The environment tag helper uses the value of IHostingEnvironment.EnvironmentName to include/exclude content in the DOM (Document Object Model) based on the current application environment.
In your snippet, the first two style sheets are included when running your code in a development environment, and the bottom two are excluded when in development environment.
See Microsoft docs on Tag Helper in ASP.NET Core and Environment Tag Helper , which could help more clearly to answer your question.
The Environment Tag Helper conditionally renders its enclosed content based on the current hosting environment.
The include attribute basically means render the code whether you're in Development environment, while it won't be rendered with exclude attribute.
I can't get my style sheet to work in Visual Studio. I have tried quite a few things. Here is my code as it currently is.
Index File (Home Page)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<link href="indexStyleSheet.css" rel="stylesheet" />
</head>
<body>
<h2>red</h2>
</body>
</html>
CSS (The file type is .css)
h2 { color: red;}
Screen shot of file hierarchy
As your css file is in the same directory as your index.html, you don't need to specify a path starting from the root of your project.
This should do it.
<link href="indexStyleSheet.css" rel="stylesheet" />
Edit:
Also, I didn't catch that immediately, what is most likely the cause of all your problems is that your h2 isn't inside the body tag !
The solution structure of my application is:
Now I am in Login.aspx and I am willing to add favicon.ico, placed in the root, in that page.
What I am doing is:
<link id="Link1" runat="server" rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link id="Link2" runat="server" rel="icon" href="../favicon.ico" type="image/ico" />
Also I have tried:
<link id="Link1" runat="server" rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link id="Link2" runat="server" rel="icon" href="favicon.ico" type="image/ico" />
But these aren't working.
I have cleared the browser cache but no luck.
What will be the path to the favicon.ico from:
Login.aspx
Site.master
Thank you.
The login page's URL: http://localhost:2873/Pages/Login.aspx and the favicon.ico's URL: http://localhost:2873/favicon.ico.
I am unable to see the favicon.ico after changing my code as:
<link id="Link1" rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link id="Link2" rel="icon" href="/favicon.ico" type="image/ico" />
/favicon.ico
might do the trick
I have tried this on my sample website
<link rel="shortcut icon" type="image/x-icon" href="~/ows.ico" />
Try this one in your site put the link in MasterPage,It works :)
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
I have tested in ,
FireFox.
Chrome.
Opera.
Some troubleshoots:
1. Check if your favicon is accessible (correct url) ,goto view source and click on the favicon link
2. Full refresh your browser by Ctrl+F5 every time you make changes.
3. Try searching from SO you may find your related problem here.
Some Links to help you out:
Serving favicon.ico in ASP.NET MVC
Favicon Not Showing
Why is favicon not visible
resolve the url like this href="<%=ResolveUrl("~/favicon.ico")%>"
I have the same issue. My url is as below
http://somesite/someapplication
Below doesnot work
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
I got it to work like below
<link rel="shortcut icon" type="image/x-icon" href="/someapplication/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
This worked for me. If anyone is troubleshooting while reading this - I found issues when my favicon.ico was not nested in the root folder. I had mine in the Resources folder and was struggling at that point.
Simply:
/favicon.ico
The leading slash is important.
Check out this great tutorial on favicons and browser support.
#Scripts.Render("~/favicon.ico");
Please try above code at the bottom of your Layout file in MVC
<link rel="shortcut icon" href="#Url.Content("~/images/")favicon.ico" type="image/x-icon"/ >
This works for me in MVC4 application favicon image is placed in the images folder and it will traverse from root directory to images and find favicon.ico bingo!
for me, it didn't work without specifying the MIME in web.config, under <system.webServer><staticContent>
<mimeMap fileExtension=".ico" mimeType="image/ico" />