How to reference embedded images from CSS? - c#

I have a CSS file that is embedded in my assembly. I need to set a background image for certain elements using this CSS file, and the image needs to be an embedded resource also. Is this possible? Is there any way I can reliably do this?
I ran into the problem when putting an existing stylesheet into this dll then realized images weren't showing up. I don't know of any way to make it work though because I would need to know the URL to the embedded image.
Has anyone done anything like this?

<% = WebResource("image1.jpg") %>
You can use above statement inside your CSS file, and while you register your CSS with
WebResourceAttribute, you can set "PerformSubstitution" to true
Default.css
body{
background: <%=WebResource("xyz.jpg")%>
}
[assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
[assembly, WebResource("xyz.jpg","image/jpg")]

Just follow the following steps to refer a web resource as background Image in CSS
Refer Image URL as "background: url('<%=WebResource("xyz.jpg")%>');" in following manner.
Default.css
body{
background: url('<%=WebResource("xyz.jpg")%>');
}
In AssemblyInfo.cs file register the CSS file with "PerformSubstitution=true" attribute in following manner
[assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
Now again in AssemblyInfo.cs file register the image file as
[assembly, WebResource("xyz.jpg","image/jpg")]
Right Click the Image File (xyz.jpg) and CSS File (Default.css) and click on Properties now select "Build Resource" option as "Embedded Resource".
and its done.
Happy Coding !!!

Mine is a slight variation on the other suggestions but it works for my inline CSS within my ASP.NET page
Add the following entry to the AssemblyInfo.cs file - [assembly: WebResource("MyImageFile.png", "image/png")]
add the following code within the CSS to reference the embedded resource - background-image: url('<%= Page.ClientScript.GetWebResourceUrl(typeof(MyUserControl), "MyImageFile.png") %>')

What about exposing the resources through a Web service?
Such as in the CSS file, set background: url( getImage.aspx?image=newyork.jpg )?

Related

Change default style of all asp:HyperLink tags

He, I'm currently restyling a site that I'm working on. It's a VS2013 project and I'm still getting the hang of using Visual Studio for web dev.
Currently the project has quite a lot of <asp:HyperLink></asp:HyperLink> tags
I know that I can use <asp:HyperLink CssClass="testingCss"></asp:HyperLink> to change the css of these HyperLinks in css using classes but there are so many links that I'd have to edit to fix this. Is there any quicker way of dealing with this? Like making a default text color property in my site's css file?
For example, the css used in p tags:
p {
color:red;
}
I'm sure there has to be a way to do what I want to do like this p tag example I gave. Would appreciate any help I can get here as it should save a lot of time and maintenance.
Thank you in advance!
It will be a <asp:HyperLink> in your markup but when the page is rendered, this will be output as a regular HTML anchor - <a>
For this reason you can target it the same way you would any other anchor:
a { color:red }
Just Add this code to your css
a{color:#ff0000}
Turns out my problem was the bootstrap css conflicting with my other css file. I just changed the css in the bootstrap file to get what I wanted. You guys were right to say that you just need to change the a tag for HyperLinks in asp.net projects. Thanks for the help.

MVC4 Bundling misdirect background-image url

I have this bundling configuration:
bundles.Add(new StyleBundle("~/styles/style1").Include("~/Content/library/styles/style1.css")
Then I added this code to render the bundled CSS:
#Styles.Render("~/styles/style1")
My CSS has this content:
.style1 {
background-image: url("../img/image.png");
}
Due to bundling, the path of background image is misdirected to ~/Content/library/img/image.png instead of ~/img/image.png. I don't want to edit the CSS file path because many other pages are using it. Do you know of any solution to it or am I missing a configuration in bundling?
You're gonna need to apply the CssRewriteUrlTransform to fix this:
bundles.Add(new StyleBundle("~/styles/style1")
.Include("~/Content/styles/style1", new CssRewriteUrlTransform())
Alternatively, you can also use absolute paths in your stylesheets.
P.S: As stated in the comments, you have to add the Web Optimization Package to your project through Codeplex or NuGet to be able to use the CssRewriteUrlTransform class

Printing html file with pagebreaks

I am trying to create a program / service that can read an html file and print it.
I need to include page breaks; but don't know how to define them or make them print correctly.
The html files are mine, so I can add any elements to them to represent the page break position. I was thinking a hidden field, or using the page-break-before:always css style in the next element.
How should I approach this?
Css is the way to go. I'd recommend to create a class "page-break":
.page-break { page-break-before: always; }
Whereever you add this class to an HTML-element you get a page-break before this element (e.g. before every h1).
This tutorial covers almost every part of CSS and printing:
http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
hope this helps

How do I create hyperlinks from resource files?

I have some text which is loaded from a resource file. Ordinarily, to get dynamic content I would use:
string.Format(GetLocalResourceObject("SomeText"), PhoneNumberAsString)
I want to do the same with a link, only the link needs to be application relative as I have URLs like mysite.com/page.aspx and mysite.com/fr/page.aspx.
I normally use an <asp:HyperLink /> tag to create the links as I can then just put a squiggle at the start NavigateUrl="~/page.aspx". However, I don't know of a way to get a dynamic HyperLink to appear as a string without adding it as a control to something.
Simply writing ToString() outputs System.Web.UI.WebControls.HyperLink..
How do I get a link out of a resource file and make it into a hyperlink using ASP.NET Webforms?
UPDATE
With some help from the answers I now have the following code on my page:
<p><%= string.Format(GetGlobalResourceObject("Resource", "MoreThan1000Users").ToString(), ResolveUrl("~/contact-us.aspx")) %></p>
and in my resource file I have:
If you would like more than 1000 users please call our sales team.
Does this seem like good practice or is there another way to achieve what I'm doing? I don't know if I should be happy or not that there is HTML inside the resource file.
Since you haven't posted code, I'm guessing somewhere you have a HyperLink WebControl object that you're hitting ToString() on. If that's the case, you can access the URL associated with it using its myHyperLinkControl.NavigateUrl property.
If you're storing the link in your resource with a squiggle/tilde (which is good) then you can replace the squiggle with your application location. If you have a control/page, then you can easily call its ResolveURL method (which takes the tilde and automatically replaces it) There's some existing solutions if you don't have a control/page reference with your context, then there's some discussion to do that here: ResolveUrl without an ASP.NET Page
I guess this is what you want:
Server.MapPath("~/page.aspx")
That will work inside your aspx and your code-behind.

Using site root relative links in Razor

I have a website that is working fine with Razor (C#) all the coding is working properly when I use my local testing (WebMatrix IIS).
When I put it "online" on my server the website is not at the root of the site it self
For example:
http:// intranet.mycompany.com/inform
That's basically the "root" of my folder structure so all my folders starts from there (css file default.cshtml... and so on)
My "_PageStart.cshtml" sees it properly cause when I access my site from the link http://intranet.mycompany.com/inform it gives me the Layout I have configured in _PageStart.cshtml (and it really show the layout + the rendered default.cshtml)
BUT nothing else is getting the proper path, for example :
<img src="~/images/logos/hdr.png" />
The img holder is there I can see it but shows that the link is broken... when I Right-Click the img holder and do properties to see where the files should be it shows me :
http:// intranet.mycompany.com/images/logos/hdr.png
So it's going to the "full" root not the relative root...
How can i fix that ?
You have to use relative paths all over your app:
~ won't work within static html code.
You can write
<img src="#Url.Content("~/images/logos/hdr.png")" />
or
<img src="../images/logos/hdr.png" />
The first approach is good for layout files where your relative path might be changing when you have different length routing urls.
EDIT
Regarding to your question about normal links:
When linking to another page in your app you don't specify the view file as the target but the action which renders a view as the result. For that you use the HtmlHelper ActionLink:
#Html.ActionLink("Linktext", "YourController", "YourAction")
That generates the right url for you automatically:
Linktext
EDIT 2
Ok, no MVC - so you have to generate your links yourself.
You have to use relative paths, too. Don't start any link with the / character!
Link
Link
Link
EDIT 3
When using Layout pages you can use the Hrefextension method to generate a relative url:
<link href="#Href("~/style.css")" ...
Use Url.Content as shown bellow:
<img src="#Url.Content("~/images/logos/hdr.png")" />
I know that '~' is added by default, but I tend to change it so that all paths are relative to my code file rather than application root, using ".." eg. "../images/logos" etc

Categories