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.
See the
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
style sheet.
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
system.web area.
<pages styleSheetTheme="Purple">
</pages>
For our example, the style sheet will simply define a style for our Logo:
.Logo
{
display: block;
width: 317px;
height: 72px;
background: url(Logo.jpg);
background-repeat: no-repeat;
}
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:
background-image: url(Images/Logo.jpg);
It would NOT be
../App_Themes/Purple/Images/Logo.jpg.
In our Logo example, notice we also set the style to not repeat the background by
using
background-repeat: no-repeat;. 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
no-repeat.
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
class="Logo". This goes to our style sheet and
picks up the
.Logo style, adding our image in this position on the
page.
If you are new to ASP.NET, you may not understand the purpose of our
ResolveClientUrl("~/default.aspx")
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
http://localhost:1120/ShiningstarVB/.
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
within those.
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
this code:
<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!
Nannette Thacker
"They say the snow on the roof was too heavy. They say the ceiling will cave in.
His brains are in terrible danger." - River Tam (Firefly/Serenity)