Paths defined within master files are not working on a new server. They worked fine on production server and development machine. Here is an example of the file:
/HeadOffice/Styles/HeadOfficeCalendar.css
Unless I put full URL with the virtual name, the paths don't work.
working:
https://connect.server.co.uk/FesQA/HeadOffice/Styles/HeadOfficeCalendar.css
I can also include resolved URL within ASP>NET code tags but I don't want to change all those paths they are probably hundreds of them. so if the head office folder is in the same folder as master file it should just be able to reference like:
/HeadOffice/Styles/HeadOfficeCalendar.css
It seems the references within the master files and aspx files seems to work fine by adding ~ and runat = server. but images references within the CSS files are not working unless I include the full path.
DOESN'T WORK
url(/HeadOffice/Images/tlcorner.png)
DOES WORK
url(connect.server.co.uk/FesQA/HeadOffice/Images/tlcorner.png)
I know I've answered this before, but this has been known issue forever in VS.
Simple way to do this correctly is to drag the CSS file from Solution Explorer window to head section of master page in code view.
For other links on your site, make sure to include the runat="server" attribute and resolve your links like this (with "~" operator):
<img src="~/images/sample.jpg" runat="server" />
In my webapp, I have a folder Views. In this folder several .aspx pages live. I don't use the rendered contents directly in the webapp, rather I request the contents using ajax in a main aspx page on the root of the webapp.
Now when I refer to an image, "images/image.png" will work since the image reference lives in the aspx page on the root. When I change this to "/images/image.png", this won't work since the root is determined by the virtual IIS folder.
How can I have a clean reference e.g. "/images/image.png"?
Firstly and probably most elegant, make the element run at the server and use the root-reletive url:
<img src="~/images/image.png" alt="image" runat="server" />
This will automatically translate your src-value into a path which will resolve from your current location. However, there is one caveat. If you do it on pages which are included, asp.net may create an incorrect value here, as it could be morphed into
<img src="../images/image.png" alt="image" />
if you are a directory down. So if you include this result in a page in the application root folder, your value may not be correct. I have not seen a good way to work around this. It will, however, show you a warning if the file doesn't exist.
Alternatively, you may want to manually set the root path for such pages:
<img src="<%=Request.ApplicationPath %>/images/image.png" alt="image" />
which will transform into a path always coming from the root of the site:
<img src="/AppPath/images/image.png" alt="image" />
Obviously, this is a bit more verbose. Additionally, you will not be able to see any warnings if the referenced file does not exist, as it will be dynamically built.
I have a bunch of images in my localhost folder (C:\inetpub\wwwroot\Images) which I am trying to access within my ASP.net application. The image src generated in my markup is:
<img id="MainContent_MainImage" src="localhost/Images/FGOStuart_7166.jpg" />`
This fails to load the image and if I look at the source for the page it actually directs to
http://localhost:64395/Pages/localhost/Images/FGOStuart_7166.jpg
so it looks like it is trying to access a path relative to the page (on the Pages folder). The src works if I type it into the browser manually and the image is displayed.
Can anyone explain what's going on here and how to fix it? I'm attempting to move the images out of the database and onto the file system but without much luck so far.
That's because the browser assumes "localhost" is a folder and adds it to the current relative path. Add http to it and it should work fine, or remove localhost altogether and just leave the /Images... part.
Try it like this:
<img id="MainContent_MainImage" src="~/Images/FGOStuart_7166.jpg"
alt="An Image" runat="server" />
This resolves it server-side from the root down. And always use an alt :)
What you really want to be doing is using the magic tilde:
<img id="MainContent_MainImage" runat="server" src="~/Images/FGOStuart_7166.jpg" />
~ signifies the root of the application. Notice I added runat="server", too.
I have installed SharePoint 2010 on a single machine in farm mode pointing to a db on another server. I would like to start dabbling into branding the site by doing something that I initially thought to be trivially straightforward, link to a custom CSS from a SharePoint 2010 master page.
I have uploaded a custom css (Let's call it custom.css) using SharePoint designer in the Site Assets. What syntax do I need to put to link to it? I have tried the following:
<SharePoint:CssRegistration name="custom.css" After="corev4.css" runat="server"/>
But the server cannot find the CSS file. I receive the following error:
Cannot make a cache safe URL for "1033/styles/custom.css", file not found. Please verify that the file exists under the layouts directory.
I've assumed I need to use SharePoint:CssRegistration - Is my assumption correct?
So what is it exactly that I need to put in the name tag to link to a css uploaded via SharePoint designer?
Am I even on the right track or would you suggest an alternative way of putting this together?
I would use Alternate CSS first. But other options are:
If you put the CSS file in Style Library, you can do this:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom.css%>" runat="server"/>
Put the CSS on the server as 14\TEMPLATE\LAYOUTS\1033\STYLES\custom\custom.css and then you can do this:
<SharePoint:CssRegistration name="custom/custom.css" runat="server"/>
Putting the file into its own directory is considered best practice so that it does not interfere with updates to out of the box files.
Assume I have an "images" folder directory under the root of my application. How can I, from within a .css file, reference an image in this directory using an ASP.NET app relative path.
Example:
When in development, the path of ~/Images/Test.gif might resolve to /MyApp/Images/Test.gif while, in production, it might resolve to /Images/Test.gif (depending on the virtual directory for the application). I, obviously, want to avoid having to modify the .css file between environments.
I know you can use Page.ResolveClientUrl to inject a url into a control's Style collection dynamically at render time. I would like to avoid doing this.
Unfortunately Firefox has a stupid bug here... the paths are relative to the path of the page, instead of being relative to the position of the CSS file. Which means if you have pages in different positions in the tree (like having Default.aspx in the root and Information.aspx in the View folder) there's no way to have working relative paths. (IE will correctly solve the paths relative to the location of the CSS file.)
The only thing I could find is this comment on http://www.west-wind.com/weblog/posts/269.aspx but, to be honest, I haven't managed to make it work yet. If I do I'll edit this comment:
re: Making sense of ASP.Net Paths by
Russ Brooks February 25, 2006 # 8:43
am
No one fully answered Brant's question
about the image paths inside the CSS
file itself. I've got the answer. The
question was, "How do we use
application-relative image paths
INSIDE the CSS file?" I have long been
frustrated by this very problem too,
so I just spent the last 3 hours
working out a solution.
The solution is to run your CSS files
through the ASPX page handler, then
use a small bit of server-side code in
each of the paths to output the root
application path. Ready?
Add to web.config:
<compilation debug="true">
<!-- Run CSS files through the ASPX handler so we can write code in them. -->
<buildProviders>
<add extension=".css" type="System.Web.Compilation.PageBuildProvider" />
</buildProviders>
</compilation>
<httpHandlers>
<add path="*.css" verb="GET" type="System.Web.UI.PageHandlerFactory" validate="true" />
</httpHandlers>
Inside your CSS, use the Request.ApplicationPath property
wherever a path exists, like this:
#content {
background: url(<%= Request.ApplicationPath
%>/images/bg_content.gif) repeat-y;
}
.NET serves up ASPX pages with a MIME type of "text/html" by default,
consequently, your new server-side CSS
pages are served up with this MIME
type which causes non-IE browsers to
not read the CSS file correctly. We
need to override this to be
"text/css". Simply add this line as
the first line of your CSS file:
<%# ContentType="text/css" %>
In case you didn't know you could do this...
If you give a relative path to a resource in a CSS it's relative to the CSS file, not file including the CSS.
background-image: url(../images/test.gif);
So this might work for you.
Make you life easy, just put images used in your CSS in the /css/ folder alongside /css/style.css. Then when you reference your images, use relative paths (e.g. url(images/image.jpg)).
I still keep images that are displayed with a <img> in an /images/ folder. Photos for example are content, they are not part of the website's skin/theme. Thus, they do not belong in the /css/ folder.
Marcel Popescu's solution is using Request.ApplicationPath in the css file.
Never use Request.ApplicationPath - it is evil! Returns different results depending on the path!
Use the following instead.
background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>);
Put your dynamic CSS in a user control in an .ascx file and then you do not need to run all your css files through the asp.net page processer.
<%# Control %>
<style type="text/css>
div.content
{
background-image:(url(<%= Page.ResolveUrl("~/images/image.png") %>);
}
</style>
But the easiest way to solve the ~ problem is to not use a ~ at all. In Visual Studio, in Solution Explorer, right click your application, select Properties Window and change the Virtual Path to /.
On Windows 7, IIS 7.5:
Not only do you have to do the steps mentionned by Marcel Popescu.
You also need to add a handler mapping in IIS 7.5 handler mappings. So that IIS knows that *.css must be used with the System.Web.UI.PageHandlerFactory
It's not enough to just set the stuff in the web.config file.
Inside of the .css file you can use relative paths; so in your example, say you put your css file in ~/Styles/mystyles.css. You can use url(../Images/Test.gif) as an example.
I was having difficulty in getting background images to display for content containers and have tried many solutions similar to other posted here. I had set the relative path in the CSS file, set it as a style on the aspx page I wanted the background to display - nothing worked. I tried Marcel Popescu's solution and it still didn't work.
I did end up getting it to work following a combination of Marcel's solution and trial and error. I inserted the code into the web.config, inserted the text/css line into my CSS file but I removed the background property in the CSS file altogether and set it as a style on the content container in the aspx page I wanted the background to display.
It does mean that for each or any other pages that I want to display the background I will need to set the style background property but it works beautifully.