Connecting Tech Pros Worldwide Forums | Help | Site Map

Add a StyleSheet to the body dynamically

_Who
Guest
 
Posts: n/a
#1: Sep 18 '08
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













Nathan Sokalski
Guest
 
Posts: n/a
#2: Sep 18 '08

re: Add a StyleSheet to the body dynamically


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.CssStyleCollecti on
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
njsokalski@hotmail.com
http://www.nathansokalski.com/

"_Who" <CalWhoNOSPAN@roadrunner.comwrote in message
news:ez7%23kMSGJHA.3664@TK2MSFTNGP04.phx.gbl...
Quote:
>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
>
>
>
>
>
>
>
>
>
>
>
>

_Who
Guest
 
Posts: n/a
#3: Sep 18 '08

re: Add a StyleSheet to the body dynamically


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" <njsokalski@hotmail.comwrote in message
news:%23KK9IxSGJHA.5944@TK2MSFTNGP03.phx.gbl...
Quote:
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.CssStyleCollecti on
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
njsokalski@hotmail.com
http://www.nathansokalski.com/
>
"_Who" <CalWhoNOSPAN@roadrunner.comwrote in message
news:ez7%23kMSGJHA.3664@TK2MSFTNGP04.phx.gbl...
Quote:
>>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
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>
>

Nathan Sokalski
Guest
 
Posts: n/a
#4: Sep 18 '08

re: Add a StyleSheet to the body dynamically


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
njsokalski@hotmail.com
http://www.nathansokalski.com/

"_Who" <CalWhoNOSPAN@roadrunner.comwrote in message
news:u4Vsk6SGJHA.4936@TK2MSFTNGP03.phx.gbl...
Quote:
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" <njsokalski@hotmail.comwrote in message
news:%23KK9IxSGJHA.5944@TK2MSFTNGP03.phx.gbl...
Quote:
>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.U I.HtmlTextWriterTag.Unknown).Style;
> tempstyle.Clear();
> tempstyle.Value = cssvalue;
> this.currstyles = tempstyle;
> }
>>
> protected override void
>FillStyleAttributes(System.Web.UI.CssStyleCollect ion
>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
>njsokalski@hotmail.com
>http://www.nathansokalski.com/
>>
>"_Who" <CalWhoNOSPAN@roadrunner.comwrote in message
>news:ez7%23kMSGJHA.3664@TK2MSFTNGP04.phx.gbl...
Quote:
>>>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
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>
>>
>
>

_Who
Guest
 
Posts: n/a
#5: Sep 18 '08

re: Add a StyleSheet to the body dynamically


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" <njsokalski@hotmail.comwrote in message
news:uYJ$UKUGJHA.1036@TK2MSFTNGP04.phx.gbl...
Quote:
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
njsokalski@hotmail.com
http://www.nathansokalski.com/
>
"_Who" <CalWhoNOSPAN@roadrunner.comwrote in message
news:u4Vsk6SGJHA.4936@TK2MSFTNGP03.phx.gbl...
Quote:
>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" <njsokalski@hotmail.comwrote in message
>news:%23KK9IxSGJHA.5944@TK2MSFTNGP03.phx.gbl...
Quote:
>>Use the following code:
>>>
>>this.Page.Header.StyleSheet.CreateStyleRule(ne w
>>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.CssStyleCollec tion
>>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
>>njsokalski@hotmail.com
>>http://www.nathansokalski.com/
>>>
>>"_Who" <CalWhoNOSPAN@roadrunner.comwrote in message
>>news:ez7%23kMSGJHA.3664@TK2MSFTNGP04.phx.gbl.. .
>>>>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
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

Cowboy \(Gregory A. Beamer\)
Guest
 
Posts: n/a
#6: Sep 18 '08

re: Add a StyleSheet to the body dynamically


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! |
********************************************
"_Who" <CalWhoNOSPAN@roadrunner.comwrote in message
news:ez7%23kMSGJHA.3664@TK2MSFTNGP04.phx.gbl...
Quote:
>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
>
>
>
>
>
>
>
>
>
>
>
>
_Who
Guest
 
Posts: n/a
#7: Sep 18 '08

re: Add a StyleSheet to the body dynamically


Thanks, now I see the general approach.




"Cowboy (Gregory A. Beamer)" <NoSpamMgbworld@comcast.netNoSpamMwrote in
message news:e2M3tCbGJHA.872@TK2MSFTNGP03.phx.gbl...
Quote:
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! |
********************************************
"_Who" <CalWhoNOSPAN@roadrunner.comwrote in message
news:ez7%23kMSGJHA.3664@TK2MSFTNGP04.phx.gbl...
Quote:
>>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
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>

Closed Thread