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" mce_href="/default.asp"><img src="/Images/Logo.jpg" mce_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(/nannettethacker/creating-a-css-hyperlinked-image-for-themes-and-using-resolveclienturl/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