I am looking for the "proper way" to do this in MVC Razor...I'm using the bootstrap theme from
http://themes.getbootstrap.com/products/application
They show the following code:
<link href="dist/toolkit.min.css" rel="stylesheet">
I'm thinking that the proper way should look like this for MVC Core Razor for the href:
The same goes for the src:
<script src="dist/toolkit.min.js"></script>
<script src=#Url.Content("dist/toolkit.min.js")></script>
Should I wrap the above
in the following too?
#section scripts{}
ie.
Is this necessary for the following?
#section scripts{
}
Have you looked at that the default Templates provided? Most everything is done through the default template and you can adjust to your hearts desire. I assume you are using VS.NET or VS Code, it honestly doesn't matter which is used the scaffolding results in the same end layout, bower/gulp, or yeoman (vs code scaffolding), note default templates already have Bootstrap baked along with JS. Adding in other frameworks or features, using bower (client side) or nuget
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Default Web</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/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" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
</environment>
</head>
all located in the wwwroot folder... Gulp does most of the heavy lifting in the above case. Paths are coded in the gulpfile.js which does all of the "dynamics" of getting the script/css file set proper href/src items without having to resort to coding it with Razor..
Related
I have created a very simple ASP.NET Core 2.0 project and selected the new Razor Page template then I removed everything from homepage and added Paper-button web component in order to use it following is code for my Index.cshtml:
page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
<paper-button raised>My Button</paper-button>
Then I added import statements for this component in my file Layout.cshtml as follows this is how its head looks like now:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1,
initial-scale=1, user-scalable=yes">
<title>#ViewData["Title"] - DineAlong</title>
//notice the following script for pollyfills and then the import for paper-button
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js">
</script>
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<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>
</head>
After running html page only shows text MyButton and doesn't display the paper-button at that place.
Note: I have bower_components folder alongside Layout.cshtml and Index.cshtml, i.e: within the Pages folder so the reference import in Layout file should work fine.
Following is the errors in the console I can see the error but I don't know why it is happening.
Folder Structure:
You need to move the directory to under the wwwroot folder (probably under lib).
The Pages directory is only referenced by the MVC routing engine and not the web server.
For example I added Font Awesome to my project and can reference it like:
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css">
After building my web site for a while now, I wanted to see if I could upload it to my domain and see if it was functional from the web.
Now I have this error coming from my css files :
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://www.benny-water.com/Mainscss2.css"
I have been googling for 3 hours straight and haven't found a solution. If I understand it is my server (OVH) that is wrongly interpreting the css files as html or text files but I have no idea where to change this.
my code for the css files looks like this :
<head>
<title> Benny Water </title>
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oxygen"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Muli"/>
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio_style_default.css" />
<script type="text/javascript" src="js/Jportfolio/js/jquery-1.11.2.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/bootstrap.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/jportilio.js"/>
<script src="http://code.jquery.com/jquery-latest.min.js"/>
</head>
thank you for your help :)
Looking at your paths there seems to be a mismatch between where your CSS files are located.
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
The /style/Css3.css has a / in front of your path, but the style/Grid.css doesn't.
Your Mainscss2.css link is also closed incorrectly. I would removed </link> and close the tag with /> instead for consistency in your code.
The .css file must go inside the <head> tag, while the .js in the <body> tag. It is a rule but it obviously work anyway also when they all are inside <head> too.
About the path of your .css, are you sure it is correct?
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
there are 3 different paths for 3 .css
Use this scheme:
/var/www/mywebsite/index.php
/var/www/mywebsite/images/favicon.ico
/var/www/mywebsite/style/css/mytheme.css
/var/www/mywebsite/style/css/images/imagesUsedBymytheme.png
/var/www/mywebsite/style/js/myscript.js
of course modify it accordingly, if you are index.php, you would want to link your .css using this code:
<link rel="stylesheet" href="style/css/mytheme.css" type="text/css" >
EDIT:
<link> is a single tag, you can use it as <link rel="" href"" >
I prepared my bootstrap website using visual studio and it works properly.
But when I try to run html file through going in that folder then bootstrap css is not loading.
Can you tell me the reason behind this?
Thanks in advance
Here is my head section
<link href="../font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="../dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../dist/css/bootstrap-theme.css" rel="stylesheet" />
<title > K.P Facility Management</title>
<link href="StyleSheet.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="../images/title.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
Most probably the paths are wrong. With the "../" before your path, you're going up a level from the root, which will return an error (if you look at the inspector).
Try placing this html in the folder that contains the folders you are going to use files from, and change the paths to:
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
Kee-doke.
So I have internal style problems. With Wordpress. After many frustrating hours trying to figure out how to change styles on several different items, I discovered that the main html file had a ton of internal style sheets. They were overriding my styles that I input in the style.css file of my Wordpress theme.
The styles are inside the <head> of the web page. I need to know where I can go to edit these internal styles. That is, what template file holds them?
There is a lot of code, but here is the relevant stuff. The styles are way down at the bottom. I removed the actual styles. I just need to find out how to edit them. Obviously they have to be in a Wordpress php file. But which one?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Trailogy | Find the Trail. Hit the Trail</title><meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" />
<link rel="shortcut icon" href="http://localhost/wordpress/wp- content/uploads/2014/10/LogoThumbFav.png" /><link rel="apple-touch-icon" href="http://localhost/wordpress/wp-content/uploads/2014/10/LogoThumbFav.png" /><link rel="alternate" type="application/rss+xml" title="Trailogy » Feed" href="http://localhost/wordpress/feed/" />
<link rel="alternate" type="application/rss+xml" title="Trailogy » Comments Feed" href="http://localhost/wordpress/comments/feed/" />
<link rel='stylesheet' id='nirvanas-css' href='http://localhost/wordpress/wp-content/themes/nirvana/style.css?ver=4.0' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/nirvana/js/frontend.js?ver=4.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/nirvana/js/nivo-slider.js?ver=4.0'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.0" />
<script type="text/javascript">
jquery stuff for a slider.
</script>
<style type="text/css"> /*Hundreds of lines of css*/</style>
<style type="text/css">/* Nirvana Custom CSS */</style>'
And by the way STYLE.CSS ISN'T OVERRIDING THESE INTERNAL STYLES! That's the problem.
EDIT: Why me? Yeah, so after spending a whole day trying to figure this out, my associate up and says, "Dude, you can just add !important to the end of your styles and they'll override everything." So I created a style override css sheet. Talk about the solution staring me in the face!
This should be the stylesheet you are looking for:
/wordpress/wp-content/themes/nirvana/style.css?ver=4.0
My github pages site #americano-project.github.io is transferring css files as plaintext, not text/css, causing my browser(firefox 25.0.1) not to load the css.
The css is embedded as so:
<link rel="stylesheet" type="text/css" src="/css/tmp.css" />
<link rel="stylesheet" type="text/css" src="/css/toast.css" />
The code is at a github repo, what is causing the problem?
It should be href, not src (Chrome 33 also did not parse them for me until I changed the src to href).
<link rel="stylesheet" type="text/css" href="/css/tmp.css" />
<link rel="stylesheet" type="text/css" href="/css/toast.css" />