SharePoint Foundation 2013 - Linking CSS files in a site collection - css

I ran into an issue with linking my css files in master page.
<SharePoint:CssRegistration ID="StyleSheet1" Name="~sitecollection/_catalogs/masterpage/Resources/css/quack_1200.css" After="corev15.css" runat="server" />
<SharePoint:CssRegistration ID="StyleSheet2" Name="~sitecollection/_catalogs/masterpage/Resources/css/main.css" After="corev15.css" runat="server" />
These files are not being loaded. When I access the console in browser it doesn't show any errors and when I investigate the HTML it does not show the CSS files.
However if I access the files on the URL they do exist.
This is the deployment XML definition.
<File Path="Resources\css\main.css" Url="masterpage/Resources/css/main.css" IgnoreIfAlreadyExists="TRUE" Type="GhostableInLibrary" />
<File Path="Resources\css\quack_1200.css" Url="masterpage/Resources/css/quack_1200.css" IgnoreIfAlreadyExists="TRUE" Type="GhostableInLibrary" />
If I type the whole URL I am able to access the files.
http://[computer
name]/sites/PCF/_catalogs/masterpage/Resources/css/quack_1200.css
http://[computer
name]/sites/PCF/_catalogs/masterpage/Resources/css/main.css
Could you please help me on resolving this issue.
Thank you

The problem is that CssRegistration doesnt handle the ~sitecollection token.
I havent tested this, but try to add:
<link rel="stylesheet" type="text/css" href="resources/css/main.css" />
If you cant figure out how to build up your url, you could always add the css files with javascript / jQuery.
var linkTag = '<link href="' + _spPageContextInfo.siteAbsoluteUrl + '/_catalogs/masterpage/Resources/css/quack_1200.css" rel="stylesheet" type="text/css"/>';
$(document).ready($('head').append(linkTag);

Where you are adding your css files in master page or in html page?In SP2013 you cannot do any modifications directly on master page. What ever you want to do, you should do in a html page only. In html page add your css file like below.
<link rel="stylesheet" type="text/css" href="../../../../images/MyFolder/css/styles.css" />
If you save this html page and see in the master page it will render like below
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/images/MyFolder/css/styles.css %>" runat="server" after="SharepointCssFile"/>
Note : if your changes not applying in your master page try to convert the associated html file once again. Check this MSDN Link

Solved with:
<link rel="stylesheet" type="text/css" href="Resources/css/quack_1200.css" />
<link rel="stylesheet" type="text/css" href="Resources/css/main.css" />
</head>

Related

How to load CSS for different URL in spring MVC app

I have a problem loading css for different URL.
This is my current structure:
-webapp
|--resources
|---css
|---generalize.css
|---js
|---images
|--WEB-INF
|---views
|---login
|---dashboard
This is my spring configuration to look for the resources:
<mvc:resources mapping="/resources/**" location="/resources/" />
And in the jsp page, I try to load it as:
<link href="<c:url value="resources/css/generalize.css" />" rel="stylesheet" type="text/css" />
If I have an url like localhost:8888/myapp/login or localhost:8888/myapp/dashboard, the css will apply fine. But when I try to map the dashboard page with the url localhost:8888/myapp/user/dashboard, the page loses its css style. Would anyone help to explain how would be the correct way to load the css (or using the resources)?
I have tried to prepend the contextPath as below but it does not work as well.
<link href="<c:url value="${pageContext.request.contextPath}/resources/css/generalize.css" />" rel="stylesheet" type="text/css" />
Simply use context relative path by appending / in the beginning.
<c:url value="/resources/css/generalize.css" />
You don't need to append context path in the beginning.

Why does MVC automatically expand virtual URLs?

In my Layout.cshtml file I have the following line:
<link rel="stylesheet" href="~/Content/bootstrap.css" />
My assumption was that since I did not include Url.Content() call, it would actually just render what I wrote but not expand the virtual URL automatically. This assumption is wrong - the generated HTML does include the correct path to the file, not the virtual path I entered.
If I wrap the <link> in <script>
<script type="text/html">
<link rel="stylesheet" href="~/Content/bootstrap.css" />
</script>
then the URL is not expanded.
Which part of ASP.NET MVC does this automatic parsing of HTML and is there a way to control it?
This was a new feature included in Razor2 and ASP.NET MVC 4 and was designed to make life easier by not having to use Url.Content everywhere.
http://www.davidhayden.me/blog/asp.net-mvc-4-the-new-tilde-slash-feature-in-razor-2
The feature only works inside standard HTML attributes and that's why you don't get it inside your <script> tag or anywhere else.
You could use a simple output write to work around this:
<link rel="stylesheet" href="#("~/Content/bootstrap.css")" />

Using ASP.NET Inline Expressions in a master page [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Inline tag not executing in an asp.net master page
I have the following lines in my master page:
<script type="text/javascript" src="/Scripts/TimeClock/Themes/<%= ThemeName %>/jquery-ui-1.9.2.custom.min.js"></script>
<link href="/Styles/Themes/<%= ThemeName %>/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
Everything compiles fine, but when I run my web application, my css file doesn't load. The reason is because when I view source on the rendered page, this is what appears:
<script type="text/javascript" src="/Scripts/TimeClock/Themes/Smoothness/jquery-ui-1.9.2.custom.min.js"></script>
<link href="/Styles/Themes/<%= ThemeName %>/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
So it appears my ASP.NET Server tag is working for the script line, but not the CSS line. Does anyone know what I am doing wrong and how to fix this?
When you place it inside the header and the header contains the run at server then you can not use this with out pass from the header filter that also change that part that you have the issue.
To by pass it use a literal control and fully render it on code behind, eg as:
<asp:Literal runat="server" id="txtScriptOnheader" EnableViewState="false" />
and on code behind:
txtScriptOnheader.Text = "<link href=\"/Styles/Themes/\"" + ThemeName + "/jquery-ui-1.9.2.custom.css\" rel="stylesheet\" type=\"text/css\" />";

Link tag is ignored in asp.net dynamic data master page

I'm getting mad. Site.master page contains the following line within head tag. When the project starts I can see in firebug Net panel that this line is ignored. Even I don't get 404 not Found error;
<link href='<%=Page.ResolveUrl("~/NewStyles/ui-lightness/jquery-ui-1.8.20.custom.css")%>' type="text/css" />
What's wrong with it?
Try using a pound sign and call Page.Header.DataBind
<link href='<%# Page.ResolveUrl("~/NewStyles/ui-lightness/jquery-ui-1.8.20.custom.css")%>>' type="text/css" />

Implementing CSS as a variable in the site.master page in ASP.NET MVC3

I am implementing a web application using ASP.NET MVC3. In the application I want to add the option of switching between CSS files (for themes) based on clicking some links. I did some research and I came up with the following:
To pass data to site.master, the good solution is to create an abstract controller and inherit that into the other controllers that have site.master as their template, according to this article: Passing Data to View Master Pages
I can pass a viewbag message to the link which controls the css file URL to set the current css file to use, based on the code that I am seeing being passed to scripts at the top of the site.master page:
script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"
So I created an abstract controller, ApplicationController, with the following method:
public ApplicationController()
{ViewBag.NewMessage = "../../Content/Site2.css";}
And in the site.master, I included this link:
<link href="<%: (string) ViewBag.NewMessage %>" rel="stylesheet" type="text/css" />
However, that doesn't seem to be working, as it is being interpreted as:
<link href="<%: (string) ViewBag.NewMessage %>" rel="stylesheet" type="text/css" />
And only when I remove the quotation marks:
<link href=<%: (string) ViewBag.NewMessage %> rel="stylesheet" type="text/css" />
is it being interpreted correctly (and the webpage gets rendered with the correct css), except that it violates html standards:
<link href=../../Content/Site2.css rel="stylesheet" type="text/css" />
Any suggestion about how to go tackling this problem or is there a more elegant solution I'm missing? I was going to proceed and implement variables in the ApplicationController that get selected based on links the user clicks at the top of the page, to switch between css styles.
Thank you!
Check to make sure your <head> tag does not have runat="server".
After making this change, be sure to check your script and css tags. This change can break the paths if you use the ~/ to ref app root. To help with this, use the Url.Content(...) helper.

Resources