How to link css file in vb asp.net project
Right now my css file is not beeing run from Home.aspx files. What is my All_Body.css file path that I should type in Home.aspx file.
I need to put this code on server so I can not use full path with my computer username
project Files:
>MyWebsite
>Styles
>All_Body.css
>UI
>Home.aspx
>Master.master
All_Body.css full path
C:\Users\Dave\source\WebSites\MyWebsite\Styles\All_Body.css
Home.aspx
<asp:Content id="Home_Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="~\Styles\All_Body.css" />
...
</asp:Content>
Master.master
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
...
</body>
</html>
I cleared my browser cache and it worked.
The browser doesn't reload the css or js files, so as a developer you have to do hard refresh /reload every time you update the css or js files and you must add query string like ?v=0.01 after the href or src when you publish the website to the server and change the number every time.
ex:
href="styles.css?v=0.01"
src="main.js?v=0.01"
Now the browser will think this is a new file and will reload it in the client browsers.
Home.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
....
</asp:Content>
Master.master
The link to your CSS file should be in the <head> element of the master page:
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" href="Styles/All_Body.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Note that I updated the path to your CSS file which was incorrect; this link is relative to the root. Also, the "~/" only works when you include runat="server" - either way it is not needed when using a relative link for CSS. You also had a malformed head content placeholder. The content placeholder for the main content was missing from your master page. There was no form tag so nothing could work. In fact the code you presented would not even compile. If you simply used the standard Web Forms template out of the box with the master page option, it would have worked.
Tip: The easiest way to get the CSS link correct in a master page is to drag the CSS file from Solution Explorer into the <head> section of the master page in Visual Studio.
Related
Its my first introduction into using aspx pages from originally creating html pages.
I am trying to link an external CSS page to the index.aspx page and it is not pulling through anything.
Maybe im not referencing it correctly or it needs to be in a specific directory, Im not too sure.
See below
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta name="viewport" content="width=device-width" />
<title>TestTitle</title>
<link href="Styles/Main.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p class="testp">HI MY NAME IS HARRY</p>
</body>
</html>
And this is the CSS code
body {
font-size: 36px;
}
.testp {
font-family:'Bradley Hand ITC';
}
Nothing hectic, im just testing the waters.
See directory below
If i could please get som help , or maybe a better way of doing it correctly.
Thanks
As a disclaimer, I have read all of the posts regarding this topic and have tried all of the suggestions and still don't seem to be able to get this to work. So, for purposes of this question, I have created a very simple Master page file and an index file. The code for the master page is:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master.master.cs" Inherits="EckankarInOklahoma.master" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ECKANKAR in Oklahoma</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
The index page's code is as follows:
<%# Page Title="" Language="C#" MasterPageFile="~/master.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="EckankarInOklahoma.index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
I DON'T GET THIS AT ALL :)
</asp:Content>
When I debug through Visual Studio, I get the expected white screen that just says:
I DON'T GET THIS AT ALL :)
But after publishing, uploading to the website via ftp and going to the website, I get nothing but my code. I have saved the files with encoding but without BOM. I used Sublime Text editor to ensure I was saving without BOM. I have published and then uploaded, and I have uploaded without publishing. All to no avail. I still get unrendered code.
Additionally, I have tried to validate through W3C Schools and the code will not validate. I have 3 errors and 3 warnings.
Can someone please advise what I might be doing wrong? Thanks in advance. Have a great weekend!
***update 1 = I tried what MarcusVinicius suggested and that did get me closer, but now instead of giving me my code as text, it says :
This is a marker file generated by the precompilation tool, and should not be deleted!
I am unsure of where to go from here. I published the website as not updatable and the config files are in the root directory. Any more ideas for me to try? Again, I appreciate all of the help and suggestions. :)
In my v4.master on SharePoint Server 2010 I have the following markup
<head runat="server">
...
<SharePoint:SPShortcutIcon runat="server" IconUrl="/Path/to/icon.ico" />
</head>
Alternativley I tried
<link rel="Shortcut Icon" href="/Path/to/icon.ico />
After the page has been rendered, this link tag is located in the body and ignored by Chrome (IE11, latest FireFox do render the favicon in the body section).
Is there a way to let SharePoint render this in the <head> section?
Use "PlaceHolderAdditionalPageHead" in your page layout.
And add the code you would like to push into Head section of your master mage
In the following example I am try to include rel links for multi language support. However the asp parser don't seam to recognize the <%=Alternate.Swedish%> if it's found inside a <link /> tag. This is done on a Site.master page.
link <!-- This works just fine -->
<link rel="alternate" hreflang="sv" href="<%=Alternate.Swedish%>" />
<link rel="alternate" hreflang="en" href="<%=Alternate.English%>" />
I assume the reason this is not working is because the <head> section in your master page has a runat="server" attribute.
When having a runat server attribute, any link tags in the head section are turned into System.Web.UI.HtmlControls.HtmlLink controls in which you can't use the <%= syntax.
A work around is to give your link tags IDs and then set the attributes in code like this:
<%# Page Language="C#" debug="true"%>
<script runat="server">
void Page_Load() {
link1.Href = "SE-se";
}
</script>
<html>
<head runat="server">
<link rel="alternate" id="link1" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
I have a master page which has an exteral css page in the header. Includes the height of the pages, however only one page needs to be longer. So I figured inline css would be the best option over creating a whole other master page or creating a new css page that only has one line different.
I looked through this site for an answer but ive only found how to change the external css link to one page, but like i said i dont want to add a whole new different page, I only need the hight property of the pages to be changed so is there a way to just override it by something similar to inline css? or is a new css page the only option?
If you are trying to add in the HTML page (seattle.html) then use the below code
<!--MS:
<style type="text/css">-->
#contentBox{ margin-left: 0; margin-right:0; width:100%; min-width:0; } #contentRow{padding-top:0;}
<!--ME: </style>-->
If you want a certain page to have just one difference, you don't need to copy and paste the whole stylesheet over to a different stylesheet. As long as it is included after (i think) the first stylesheet being included, all you need to put is the changes you want.
If you want to put a small bit of CSS on a HTML page without having a stylesheet, simply put it in
<style type="text/css">
css code here
</style>
I hope this works,
-Ben
First of all, you're talking about master pages, which are part of asp.net, not classic asp, so I'm retagging your question accordingly.
asp.net allows you to give the style tag the runat = server property. In header of am aspx page you could add
<style type="text/css" id="sitestyle" runat="server"></style>
In the codebehind you can then populate this as follows
sitestyle.InnerHtml = (your server generates css styles here);
Edit - master page with two content placeholders
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" %>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
If You want to use the Inline css then you can use that inside the <style> tag.
But Inline and Internal css is not the good option.
Because being as a good developer It is always a good practice that you use External css.
It will really help you to reuse your css.
&
Biggest Advantage is it will make your code more maintainable.
I hope this will help you.