Creating a CSS Hyperlinked Image for Themes and Using ResolveClientUrl
By Nannette Thacker
In ASP.NET, you may define multiple themes to be used within your web applications.
In this example, let's say you have a theme based around the color purple, and another
theme based around the color blue. When using your purple theme, you have a special
image, let's say a logo, that is designed with purple colors. But when using the
blue theme, you want your logo to change to one that uses blue colors. This tutorial
will show you how to setup your code within your master page so that you will pull
this logo image from your cascading style sheet, rather than hard coding it within
your master page or web form.
Normally, when defining a hyperlinked image, one would simply type an anchor tag
and an image tag like so:
<a href="/default.asp"><img src="/Images/Logo.jpg" /></a>
But if your path to your image is hardcoded within your web form, you've now limited
your ability to change your image based on your theme.
ASP.NET Themes and Skins Overview
for details on themes and skins. Although
how to implement a theme and master page is beyond the scope of this example, I
will briefly explain the concept. Within your ASP.NET project within Solution Explorer,
you would right click and select to add a Theme folder. Upon selection, an App_Themes
folder is created and within that folder, another Theme folder is created. You may
name it anything you want, preferably something that describes your new theme. Within
your theme folder, you may add several types of files, the primary one being your
cascading style sheet file. Each theme folder you create should have its own .css
Also note that when using a theme, the default theme to use is defined within the
web.config file. The style sheet is not included in the top of the web form or in
the master page. Here is an example of defining the theme to be used within the
web.config file in the
For our example, the style sheet will simply define a style for our Logo:
In the above style, notice that we define the display as block. Without this, our
image will not display. We also define the width, height, and path to the logo.
Be sure to include the path to your image, if the image is not in the same directory
as the style sheet. With themes, if your image is within your theme directory or
within a subdirectory within your theme directory, the path to the image is relative
to the theme directory.
For instance, if you have an "image" subdirectory within your theme directory, the
path would be:
It would NOT be
In our Logo example, notice we also set the style to not repeat the background by
. Other options are that you may
repeat the image vertically or horizontally or both, but we only want to display
it once, so we indicate
Now we are ready to call the "Logo" class within our web form page, in our case
our master page.
<a href="<%= ResolveClientUrl("~/default.aspx")%>" class="Logo"></a>
In our above example, we are defining a hyperlink that has nothing implemented between
the opening and closing anchor tags. But it does have a class defined within the
opening anchor tag as
. This goes to our style sheet and
picks up the
style, adding our image in this position on the
If you are new to ASP.NET, you may not understand the purpose of our
code. Simply put, the ResolveClientUrl Method
allows you to define a URL that
will be recognized within your browser and "the URL returned by this method is relative
to the folder containing the source file in which the control is instantiated."
For instance, if you define a regular hyperlink or image URL within a webform, you
may have no issues, but if you define one within your master page and this master
page is used by web forms throughout your site within several different sub directories,
use of ResolveClientUrl allows the path to be resolved from the master page and
thus found every time. This is true if used within a control as well.
Also, if you are building your application locally on an intranet, ASP.NET adds
your project name to the path as well, such as in my case
If I don't use ResolveClientURL for HTML hyperlinks and images, my path can really
be messed up when testing locally. So it is good practice to use ResolveClientURL
throughout your application, rather than hard-coding paths. Be aware that using
the ASP.NET Hyperlink control will use resolved urls, so you don't need to use it
For understanding the use of the (~) tilde, I would suggest you also read VirtualPathUtility Class
, where it explains: "An absolute
virtual path starts with the literal slash mark (/). A relative virtual path is
relative to the application root directory, if it is just a tilde (~) or starts
with the tilde and a double backslash (~\\) or the tilde and a slash mark (~/).
Making a virtual path relative makes the path independent of the application." With
stylesheets, you may also use Skins to define your images, but this is beyond the
scope of this example.
In our example, we could have also had our hyperlink go to our default page with
<a href="<%= ResolveClientUrl("~/")%>" class="Logo"></a>
The above code takes us to our root directory, where our application knows to use
the default page within that directory.
May your dreams be in ASP.NET!