Chapter 10: Referencing CSS issue

tomche · April 26th, 2009, 04:03 AM

Hello,
I have typed in the code from Chapter 10 however the ContactForm.ascx is not referencing the styles in the DarkGrey and Monochrome Theme. In the srop down box for typing the code in ContactForm.ascx it only shows a style1, style2, style3 option but doesn't reference any of the other styles programmed either. It doesn't seem to be referencing the the CSS at all.

THanks in advance..

Tomche

Imar · April 26th, 2009, 04:14 AM

Hi there,

What "styles in the DarkGrey and Monochrome Theme" are you talking about? The PleaseWait style? And isn't it being applied at run-time in the browser or at development time in VWD?

Since the code is inside a User Control (ContactForm.ascx) VWD doesn't know in which page it's going to be used and as such cannot pick up layout / styles from a Master Page or a Theme. This means you won't get IntelliSense for styles defined in one of the themes folders.

At run-time, the proper theme should be applied, so classes like PleaseWait get effective.

Hope this helps,

Imar

tomche · April 26th, 2009, 05:45 AM

Hello Imar,
The monochrome theme and the dark grey theme work at runtime.

At Development Time the ContactForm.ascx can't see anystyles from either the Monochrome or Dark Grey Theme. All it can see are generic styles "style 1" "style 2" etc.

How does one tell VWD to reference a certain theme whilst editing a user control?

Thanks

Tomche

Imar · April 26th, 2009, 05:54 AM

Hi Tomche,

By design, there's no official way to do it. Like I said earlier, since User Controls can be used anywhere, including pages that have their own theme set, overriding anything set at web.config level, there really is no way for VWD to tell what theme it should look for and apply.

However, you can simply add a <link /> reference to one of your stylesheets in the UC. Add this to your User Control, for example right before or after the embedded <style> element

Code:

<link href="../App_Themes/DarkGrey/DarkGrey.css" rel="stylesheet" type="text/css" />

Now you'll get IntelliSense in the UC. The downside of this is that the file also ends up in the browser. possibly messing with your other styles. To stop that from happening, wrap the <link /> element in a pair of server side comment tags. VWD still sees the reference, but the link won't end up in your browser:

Code:

<%--<link href="../App_Themes/DarkGrey/DarkGrey.css" rel="stylesheet" type="text/css" />--%>

Hope this helps,

Imar