Adding style sheets to web pages at runtime.

**Wokawidget** · May 18th, 2005, 04:12 AM

I have 2 methods here.

1) Using a literal control

ASPX Code

VB Code:

<HEAD>
   <asp:Literal id="StyleSheet" runat="Server" />
</HEAD>

Code Behind

VB Code:

Protected WithEvents StyleSheet As System.Web.UI.WebControls.Literal
 
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    StyleSheet.Text = "<LINK href=Badger.css type=""text/css"" rel=""stylesheet"">"
End Sub

2) Using code inline

ASPX Code

VB Code:

<HEAD>
   <LINK href="<%=gStylesheet%>" type="text/css" rel="stylesheet">
</HEAD>

Code Behind

VB Code:

Public gStyleSheet As String
 
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    gStyleSheet = "Badger.css"
End Sub

Which one of these methods would people use?

Also, I don't suppose anyone knows how to write a server side control that would allow me to do the above:

VB Code:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    MyStyleSheetControl.CSSFile = "Badger.css"
End Sub

Regards,

Woof

**plenderj** · May 18th, 2005, 04:34 AM

Personally I would use the HTML approach because you can then change stylesheets and designs without requiring a recompile

**Wokawidget** · May 18th, 2005, 04:45 AM

Errr...HTML metho? Method 1 or 2?

Woka

**dj4uk** · May 18th, 2005, 04:55 AM

You could even use the HtmlGenericControl like so:
ASPX Code

Code:

<head>
<link id="css1" runat="server" type="text/css" rel="stylesheet">
</head>

Code behind

Code:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    css1.Attributes("href") = "Badger.css"
End Sub

DJ

**Wokawidget** · May 18th, 2005, 05:28 AM

dj4uk, thanks for that.
I think you gave me that method a few months back if I can remember.
Oh you forgot the following from your above post:

VB Code:

Protected css1 As HtmlGenericControl

The is one slight problem with the code you posted, which is why I am re-visiting this problem.
The line:

VB Code:

<link id="css1" runat="server" type="text/css" rel="stylesheet">

Actually fails with a parser error

It requires a / at the end, like:

VB Code:

<link id="css1" runat="server" type="text/css" rel="stylesheet"/>

This now works a treat. Cool

BUT...thanks to the buggy IDE, .NET randomly sees the LINK tag and says "Oooo...there's a / at the end...I don't need that", and then strips it out.
This means everytime you compile your app you must sift through the ASPX pages and check to see if the IDE hasn't gone into spak mode

Don't suppose you know a way around this?

Woka

**dj4uk** · May 18th, 2005, 05:38 AM

Well spotted - didn't check the code before I posted so I'm not surprised I missed something!

I don't use the link tag myself - I use the following syntax for external CSS:

Code:

<head>
<style type="text/css">
	@import url("nutter.css");
</style>
</head>

You could use the HtmlGenericControl here again like so:

Code:

<style id="css1" runat="server" type="text/css"></style>

and then

Code:

Protected css1 As HtmlGenericControl

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    css1.InnerText = "@import url(""nutter.css"");"
End Sub

This might get around the bug you are experiencing with the link tag.

DJ

**nemaroller** · May 20th, 2005, 01:46 PM

Originally Posted by Wokawidget

dj4uk, thanks for that.

BUT...thanks to the buggy IDE, .NET randomly sees the LINK tag and says "Oooo...there's a / at the end...I don't need that", and then strips it out.
This means everytime you compile your app you must sift through the ASPX pages and check to see if the IDE hasn't gone into spak mode

Don't suppose you know a way around this?

Woka

The IDE does that because its using the schema as specified in your schema tag (probably a few lines right above that).

Code:

<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

According to that schema, a link tag shouldn't have an inline end slash.

The file is located (for Vs 2003) at:
C:\Program Files\Microsoft Visual Studio .NET 2003\Common7\Packages\schemas\html\ie5_0.xsd

If you open it up, and do a find for:
<xsd:element name="link"

you will find the attributes that define how VS handles it according to the schema. I don't know much more about it defines it will strip away the inline end tag... but a few hours will probably illuminate the correct one for you. Div's for instance always need a closing tag, so perhaps try comparing it against that.

**<ABX** · May 20th, 2005, 10:15 PM

I have used a HttpHandler to dynamicly select/generate the .css file on demand.

Thread: Adding style sheets to web pages at runtime.

Thread Tools

Display

Adding style sheets to web pages at runtime.

Re: Adding style sheets to web pages at runtime.

Re: Adding style sheets to web pages at runtime.

Re: Adding style sheets to web pages at runtime.

Re: Adding style sheets to web pages at runtime.

Re: Adding style sheets to web pages at runtime.

Re: Adding style sheets to web pages at runtime.

Re: Adding style sheets to web pages at runtime.

Posting Permissions