Add a StyleSheet to the body dynamically

  • Thread starter Thread starter _Who
  • Start date Start date
W

_Who

I use the code below to change to a style sheet that has:

body

{


....


background-image:url(../images/background brown.gif);



}

Rather than:

body

{

....

background-color:black;

}





Dim HtmlLinkObj As HtmlLink = New HtmlLink()

HtmlLinkObj.Attributes.Add("href", "StyleSheets/Textured.css")

HtmlLinkObj.Attributes.Add("rel", "stylesheet")

HtmlLinkObj.Attributes.Add("type", "text/css")

HeadMaster.Controls.Add(HtmlLinkObj)



Works OK on IE but has no effect in FireFox nor Safari

On the .master there is:

<head id="HeadMaster"...



I once saw where some one added to the body tag in addition to the head (I
think).

Been looking but can't find it now that I'd like to try it.

Do you know how to do that?

Have any other ideas how to make it work in FireFox and Safari



Thanks
 
Use the following code:

this.Page.Header.StyleSheet.CreateStyleRule(new
CustomStyle("background-color:black;"), null, "body");

The two important parameters in this method are the first one, which is a
Style object, and the third one, which is the selector to be used with the
style rule. You will also need to include the following class:

public class CustomStyle : System.Web.UI.WebControls.Style
{
private System.Web.UI.CssStyleCollection currstyles;

public CustomStyle(System.Web.UI.CssStyleCollection custom) {
this.currstyles = custom; }
public CustomStyle(string cssvalue)
{
System.Web.UI.CssStyleCollection tempstyle = new
System.Web.UI.WebControls.WebControl(System.Web.UI.HtmlTextWriterTag.Unknown).Style;
tempstyle.Clear();
tempstyle.Value = cssvalue;
this.currstyles = tempstyle;
}

protected override void
FillStyleAttributes(System.Web.UI.CssStyleCollection
attributes,System.Web.UI.IUrlResolutionService urlResolver)
{
base.FillStyleAttributes(attributes, urlResolver);
foreach (string currkey in this.currstyles.Keys) { attributes[currkey] =
this.currstyles[currkey]; }
}
}

It took me a while, and some help as well, to figure out how to do this, but
I now use this class quite often, it can be quite useful when dynamically
determining an attribute that is used in many elements. Good Luck!
 
I'll bet it did take some time.
Thanks for sharing.
I need to change the entire style sheet file.
I'm not sure but I think this code is for changing one rule at a time.
Is that correct?

Thanks again



Nathan Sokalski said:
Use the following code:

this.Page.Header.StyleSheet.CreateStyleRule(new
CustomStyle("background-color:black;"), null, "body");

The two important parameters in this method are the first one, which is a
Style object, and the third one, which is the selector to be used with the
style rule. You will also need to include the following class:

public class CustomStyle : System.Web.UI.WebControls.Style
{
private System.Web.UI.CssStyleCollection currstyles;

public CustomStyle(System.Web.UI.CssStyleCollection custom) {
this.currstyles = custom; }
public CustomStyle(string cssvalue)
{
System.Web.UI.CssStyleCollection tempstyle = new
System.Web.UI.WebControls.WebControl(System.Web.UI.HtmlTextWriterTag.Unknown).Style;
tempstyle.Clear();
tempstyle.Value = cssvalue;
this.currstyles = tempstyle;
}

protected override void
FillStyleAttributes(System.Web.UI.CssStyleCollection
attributes,System.Web.UI.IUrlResolutionService urlResolver)
{
base.FillStyleAttributes(attributes, urlResolver);
foreach (string currkey in this.currstyles.Keys) { attributes[currkey] =
this.currstyles[currkey]; }
}
}

It took me a while, and some help as well, to figure out how to do this,
but I now use this class quite often, it can be quite useful when
dynamically determining an attribute that is used in many elements. Good
Luck!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

_Who said:
I use the code below to change to a style sheet that has:

body

{


...


background-image:url(../images/background brown.gif);



}

Rather than:

body

{

...

background-color:black;

}





Dim HtmlLinkObj As HtmlLink = New HtmlLink()

HtmlLinkObj.Attributes.Add("href", "StyleSheets/Textured.css")

HtmlLinkObj.Attributes.Add("rel", "stylesheet")

HtmlLinkObj.Attributes.Add("type", "text/css")

HeadMaster.Controls.Add(HtmlLinkObj)



Works OK on IE but has no effect in FireFox nor Safari

On the .master there is:

<head id="HeadMaster"...



I once saw where some one added to the body tag in addition to the head
(I think).

Been looking but can't find it now that I'd like to try it.

Do you know how to do that?

Have any other ideas how to make it work in FireFox and Safari



Thanks
Click to expand...
Click to expand...
 
That is correct. If you need to dynamically change an entire stylesheet at
the same time, you can do one of the following:

1. Call the this.Page.Header.StyleSheet.CreateStyleRule method multiple
times

2. Create an *.aspx file that returns ContentType="text/css" and use your
original method to set the href attribute to that file, possibly with a
querystring

Are the different style rules that you will have generated or just
different? If they are generated, then you really don't have much choice
other than my suggestions. If they are just different, then you could use
the following technique instead:

1. Create several *.css files
2. Add id and runat="server" attributes to the link tag
3. In your code, set the href attribute of the link tag to the location of
the appropriate *.css file

Also, if there are only a few style rules that need to be determined in
code, use a stylesheet like you normally would for those to keep the code to
a minimum. Good Luck!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

_Who said:
I'll bet it did take some time.
Thanks for sharing.
I need to change the entire style sheet file.
I'm not sure but I think this code is for changing one rule at a time.
Is that correct?

Thanks again



Nathan Sokalski said:
Use the following code:

this.Page.Header.StyleSheet.CreateStyleRule(new
CustomStyle("background-color:black;"), null, "body");

The two important parameters in this method are the first one, which is a
Style object, and the third one, which is the selector to be used with
the style rule. You will also need to include the following class:

public class CustomStyle : System.Web.UI.WebControls.Style
{
private System.Web.UI.CssStyleCollection currstyles;

public CustomStyle(System.Web.UI.CssStyleCollection custom) {
this.currstyles = custom; }
public CustomStyle(string cssvalue)
{
System.Web.UI.CssStyleCollection tempstyle = new
System.Web.UI.WebControls.WebControl(System.Web.UI.HtmlTextWriterTag.Unknown).Style;
tempstyle.Clear();
tempstyle.Value = cssvalue;
this.currstyles = tempstyle;
}

protected override void
FillStyleAttributes(System.Web.UI.CssStyleCollection
attributes,System.Web.UI.IUrlResolutionService urlResolver)
{
base.FillStyleAttributes(attributes, urlResolver);
foreach (string currkey in this.currstyles.Keys) { attributes[currkey]
= this.currstyles[currkey]; }
}
}

It took me a while, and some help as well, to figure out how to do this,
but I now use this class quite often, it can be quite useful when
dynamically determining an attribute that is used in many elements. Good
Luck!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

_Who said:
I use the code below to change to a style sheet that has:

body

{


...


background-image:url(../images/background brown.gif);



}

Rather than:

body

{

...

background-color:black;

}





Dim HtmlLinkObj As HtmlLink = New HtmlLink()

HtmlLinkObj.Attributes.Add("href", "StyleSheets/Textured.css")

HtmlLinkObj.Attributes.Add("rel", "stylesheet")

HtmlLinkObj.Attributes.Add("type", "text/css")

HeadMaster.Controls.Add(HtmlLinkObj)



Works OK on IE but has no effect in FireFox nor Safari

On the .master there is:

<head id="HeadMaster"...



I once saw where some one added to the body tag in addition to the head
(I think).

Been looking but can't find it now that I'd like to try it.

Do you know how to do that?

Have any other ideas how to make it work in FireFox and Safari



Thanks
Click to expand...
Click to expand...
Click to expand...
 
So my code down below builds a new link and adds it to the master's
controls. You're saying that instead I can just change the href on the
existing one. Is that right?

I did what you said which replaced the 5 lines below with one line. I show
it below in case anyone else reads this thread. There are many sites in the
Internet that suggest the way I had done it. This seems simpler.

StyleSheetLink.Href = "StyleSheets/Textured.css"

The only thing is that I had to make the link run at server. Is there a down
side to that?

Thanks a lot

Nathan Sokalski said:
That is correct. If you need to dynamically change an entire stylesheet at
the same time, you can do one of the following:

1. Call the this.Page.Header.StyleSheet.CreateStyleRule method multiple
times

2. Create an *.aspx file that returns ContentType="text/css" and use your
original method to set the href attribute to that file, possibly with a
querystring

Are the different style rules that you will have generated or just
different? If they are generated, then you really don't have much choice
other than my suggestions. If they are just different, then you could use
the following technique instead:

1. Create several *.css files
2. Add id and runat="server" attributes to the link tag
3. In your code, set the href attribute of the link tag to the location of
the appropriate *.css file

Also, if there are only a few style rules that need to be determined in
code, use a stylesheet like you normally would for those to keep the code
to a minimum. Good Luck!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

_Who said:
I'll bet it did take some time.
Thanks for sharing.
I need to change the entire style sheet file.
I'm not sure but I think this code is for changing one rule at a time.
Is that correct?

Thanks again



Nathan Sokalski said:
Use the following code:

this.Page.Header.StyleSheet.CreateStyleRule(new
CustomStyle("background-color:black;"), null, "body");

The two important parameters in this method are the first one, which is
a Style object, and the third one, which is the selector to be used with
the style rule. You will also need to include the following class:

public class CustomStyle : System.Web.UI.WebControls.Style
{
private System.Web.UI.CssStyleCollection currstyles;

public CustomStyle(System.Web.UI.CssStyleCollection custom) {
this.currstyles = custom; }
public CustomStyle(string cssvalue)
{
System.Web.UI.CssStyleCollection tempstyle = new
System.Web.UI.WebControls.WebControl(System.Web.UI.HtmlTextWriterTag.Unknown).Style;
tempstyle.Clear();
tempstyle.Value = cssvalue;
this.currstyles = tempstyle;
}

protected override void
FillStyleAttributes(System.Web.UI.CssStyleCollection
attributes,System.Web.UI.IUrlResolutionService urlResolver)
{
base.FillStyleAttributes(attributes, urlResolver);
foreach (string currkey in this.currstyles.Keys) { attributes[currkey]
= this.currstyles[currkey]; }
}
}

It took me a while, and some help as well, to figure out how to do this,
but I now use this class quite often, it can be quite useful when
dynamically determining an attribute that is used in many elements. Good
Luck!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

I use the code below to change to a style sheet that has:

body

{


...


background-image:url(../images/background brown.gif);



}

Rather than:

body

{

...

background-color:black;

}





Dim HtmlLinkObj As HtmlLink = New HtmlLink()

HtmlLinkObj.Attributes.Add("href", "StyleSheets/Textured.css")

HtmlLinkObj.Attributes.Add("rel", "stylesheet")

HtmlLinkObj.Attributes.Add("type", "text/css")

HeadMaster.Controls.Add(HtmlLinkObj)



Works OK on IE but has no effect in FireFox nor Safari

On the .master there is:

<head id="HeadMaster"...



I once saw where some one added to the body tag in addition to the head
(I think).

Been looking but can't find it now that I'd like to try it.

Do you know how to do that?

Have any other ideas how to make it work in FireFox and Safari



Thanks
Click to expand...
Click to expand...
Click to expand...
 
In addition to Nathan's suggestion, you can dynamically alter the entire CSS
(point to a different file). There are two methods to do this:

1. If all you are changing is CSS, try this:

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

You leave the actual pointer empty here. You can then do the following:

MyStyleSheet.Attributes.Add("href", "{location of file}");

You can also do an Attributes.Remove() first if the CSS is only altered on
one or two pages, as it simplifies your code model and allows you to supply
a default.

2. If you envision the possibility of bigger changes (particular skins,
etc.), consider themes instead. You create different themes and you can then
dynamically change them in code based on a user's choices. There are plenty
of examples of this on the web.

--
Gregory A. Beamer
MVP, MCP: +I, SE, SD, DBA

Subscribe to my blog
http://feeds.feedburner.com/GregoryBeamer#

or just read it:
http://feeds.feedburner.com/GregoryBeamer

********************************************
| Think outside the box! |
********************************************
 
Thanks, now I see the general approach.




Cowboy (Gregory A. Beamer) said:
In addition to Nathan's suggestion, you can dynamically alter the entire
CSS (point to a different file). There are two methods to do this:

1. If all you are changing is CSS, try this:

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

You leave the actual pointer empty here. You can then do the following:

MyStyleSheet.Attributes.Add("href", "{location of file}");

You can also do an Attributes.Remove() first if the CSS is only altered on
one or two pages, as it simplifies your code model and allows you to
supply a default.

2. If you envision the possibility of bigger changes (particular skins,
etc.), consider themes instead. You create different themes and you can
then dynamically change them in code based on a user's choices. There are
plenty of examples of this on the web.

--
Gregory A. Beamer
MVP, MCP: +I, SE, SD, DBA

Subscribe to my blog
http://feeds.feedburner.com/GregoryBeamer#

or just read it:
http://feeds.feedburner.com/GregoryBeamer

********************************************
| Think outside the box! |
********************************************
Click to expand...
 
Back
Top