How to change the font style and size on the entire Aspx page programatically

24 Dec 2006 5:35 AM

technoGirl

hey guys, I know it's crazy how I'm working over xmas...but oh well
here I go:

In my ASP.Net app (1.1), I want the user to be able to select font
(such as Bold, Italic, underline) and stuff like that from a dropdown
list) and then I wanna apply these properties to all my page (all
text). Now I'm doing something like this:

string font = string.Empty;
switch(ddl2.SelectedItem.Text)
{
case "Bold":

font = Convert.ToString(System.Drawing.FontStyle.Bold);

break;

case "Italic":
font = Convert.ToString(System.Drawing.FontStyle.Italic);
break;

}
myBody.Attributes.Add("Font", font);
Session["theColor"] = font;

This worked for changing the color of the entire page as I hard coded
the colors hexa decimal values in the cases, but here these are enums,
and can only be compared.

Anyways does anyone has any input on this???? I want this to happen
when the user select from the DDL and on the button click event it
should change the font.

Thanks
Tina

25 Dec 2006 9:41 AM

marss

technoGirl wrote:

> myBody.Attributes.Add("Font", font);

Most correct syntax:
int fontSize = 14;
bool bold = true;
bool italic = true;

myBody.Style["font-size"] = fontSize.ToString();
myBody.Style["font-weight"] = (bold ? "bold" : "normal");
myBody.Style["font-style"] = (italic ? "italic" : "normal");

But if you do it in this way you can face with some problem.
Your font settings do not applied to any text contained within tables.
So try solve your tast in a different way. Place next code in
Page_Load:

if (!IsClientScriptBlockRegistered("Font Styles"))
{
    int fontSize = 14;
    bool bold = true;
    bool italic = true;

    string style =
string.Format(@"font-size:{0};font-weight:{1};font-style:{2};",
        fontSize,
        bold ? "bold" : "normal",
        italic ? "italic" : "normal");

    style = @"<style> body, td {" + style + " }</style>";

    RegisterClientScriptBlock("Font Styles", style);
}

Maybe it helps.

25 Dec 2006 10:37 PM

technoGirl

Hello Marss, thanks for the response. I was wondering if there's
another way without using the client side Javescript. I mean ideally
I'd like to do this on the server side using external CSS or just the
<style> element within html head.

THanks
Tina

Show quoteHide quote

On Dec 25, 1:41 am, "marss" <m***@ukr.net> wrote:
> technoGirl wrote:
> > myBody.Attributes.Add("Font", font);Most correct syntax:
> int fontSize = 14;
> bool bold = true;
> bool italic = true;
>
> myBody.Style["font-size"] = fontSize.ToString();
> myBody.Style["font-weight"] = (bold ? "bold" : "normal");
> myBody.Style["font-style"] = (italic ? "italic" : "normal");
>
> But if you do it in this way you can face with some problem.
> Your font settings do not applied to any text contained within tables.
> So try solve your tast in a different way. Place next code in
> Page_Load:
>
> if (!IsClientScriptBlockRegistered("Font Styles"))
> {
>         int fontSize = 14;
>         bool bold = true;
>         bool italic = true;
>
>         string style =
> string.Format(@"font-size:{0};font-weight:{1};font-style:{2};",
>                 fontSize,
>                 bold ? "bold" : "normal",
>                 italic ? "italic" : "normal");
>
>         style = @"<style> body, td {" + style + " }</style>";
>
>         RegisterClientScriptBlock("Font Styles", style);
>
> }Maybe it helps.

26 Dec 2006 8:22 AM

marss

technoGirl wrote:

> Hello Marss, thanks for the response. I was wondering if there's
> another way without using the client side Javescript.

Hello, Tina
Don't give attention to RegisterClientScriptBlock - this is only means
to place styles in the page (lacking something better).

> I mean ideally
> I'd like to do this on the server side using external CSS or just the
> <style> element within html head.
>

If you want to place styles in head of html document you can use next
trick:
aspx:
<head>
    <title></title>
    <%= GetStyles() %>
</head>

code:
protected string GetStyles()
{
   return @"<style>
.....
     </style>";
}

In ASP.Net 2.0 method Header.StyleSheet.RegisterStyle allows to
register style for classes but I'm not sure whether it can be used to
register style for elements (body, td, etc).
Maybe there is a better method to implement this functionality, I'm
interested to know too.

28 Dec 2006 10:37 PM

technoGirl

hey Marrs, thanks for your response. Sorry about the delay, I was out
of town. It worked just fine. I actually ended up using =GetStyle
method you mentioned. A sample is out on
http://samples.gotdotnet.com/quickstart/util/srcview.aspx?path=/quickstart/aspplus/samples/apps/cookies1/cookies1.src&file=CS\Customize.aspx&font=3
page. It's working and everything just fine. But the page only
updates the info when you click the submit button twice. In the button
click events handler. Do you know who this might be happening???

Following is the code they are using at the link above:

public void btnSubmit_Click(object sender, System.EventArgs e)
        {
            HttpCookie cookie = new HttpCookie("preferences1");
            cookie.Values.Add("ForeColor",ForeColor.SelectedItem.Value);
            cookie.Values.Add("BackColor",BackColor.SelectedItem.Value);
            cookie.Values.Add("LinkColor",LinkColor.SelectedItem.Value);
            cookie.Values.Add("FontSize",FontSize.SelectedItem.Value);
            cookie.Values.Add("FontName",FontName.SelectedItem.Value);

            Response.AppendCookie(cookie);

            if ( ViewState["Referer"] != null )
            {
                Response.Redirect(ViewState["Referer"].ToString());
            }
        }

Show quoteHide quote

On Dec 26, 2:22 am, "marss" <m***@ukr.net> wrote:
> technoGirl wrote:
> > Hello Marss, thanks for the response. I was wondering if there's
> > another way without using the client side Javescript.Hello, Tina
> Don't give attention to RegisterClientScriptBlock - this is only means
> to place styles in the page (lacking something better).
>
> > I mean ideally
> > I'd like to do this on the server side using external CSS or just the
> > <style> element within html head.If you want to place styles in head of html document you can use next
> trick:
> aspx:
> <head>
>     <title></title>
>     <%= GetStyles() %>
> </head>
>
> code:
> protected string GetStyles()
> {
>    return @"<style>
> ....
>      </style>";
>
> }In ASP.Net 2.0 method Header.StyleSheet.RegisterStyle allows to
> register style for classes but I'm not sure whether it can be used to
> register style for elements (body, td, etc).
> Maybe there is a better method to implement this functionality, I'm
> interested to know too.

28 Dec 2006 10:38 PM

technoGirl

hey Marrs, thanks for your response. Sorry about the delay, I was out
of town. It worked just fine. I actually ended up using =GetStyle
method you mentioned. A sample is out on
http://samples.gotdotnet.com/quickstart/util/srcview.aspx?path=/quickstart/aspplus/samples/apps/cookies1/cookies1.src&file=CS\Customize.aspx&font=3
page. It's working and everything just fine. But the page only
updates the info when you click the submit button twice. In the button
click events handler. Do you know who this might be happening???

Following is the code they are using at the link above:

public void btnSubmit_Click(object sender, System.EventArgs e)
        {
            HttpCookie cookie = new HttpCookie("preferences1");
            cookie.Values.Add("ForeColor",ForeColor.SelectedItem.Value);
            cookie.Values.Add("BackColor",BackColor.SelectedItem.Value);
            cookie.Values.Add("LinkColor",LinkColor.SelectedItem.Value);
            cookie.Values.Add("FontSize",FontSize.SelectedItem.Value);
            cookie.Values.Add("FontName",FontName.SelectedItem.Value);

            Response.AppendCookie(cookie);

            if ( ViewState["Referer"] != null )
            {
                Response.Redirect(ViewState["Referer"].ToString());
            }
        }

29 Dec 2006 7:11 AM

marss

Hi, Tina,

Change :

String GetStyle(String key)
{
HttpCookie cookie = Request.Cookies["preferences1"];
......

with
String GetStyle(String key)
{
HttpCookie cookie = Response.Cookies["preferences1"];
......

30 Dec 2006 4:45 AM

technoGirl

Hello Marrs, well I did try replacing the Request.Cookies with
Response.Cookies. But it still requires clicking the submit button
twice?? If you look at the button click event handler's code above (or
in the sample link I posted) it shouldn't be doing that. Or is there
anything that I'm not aware of????????

Thanks for all your help.

Show quoteHide quote

On Dec 28, 11:11 pm, "marss" <m***@ukr.net> wrote:
> Hi, Tina,
>
> Change :
>
> String GetStyle(String key)
> {
> HttpCookie cookie = Request.Cookies["preferences1"];
> .....
>
> with
> String GetStyle(String key)
> {
> HttpCookie cookie = Response.Cookies["preferences1"];
> .....

3 Jan 2007 8:33 AM

marss

technoGirl wrote:

> Hello Marrs, well I did try replacing the Request.Cookies with
> Response.Cookies. But it still requires clicking the submit button
> twice?? If you look at the button click event handler's code above (or
> in the sample link I posted) it shouldn't be doing that. Or is there
> anything that I'm not aware of????????
>

Hi, Tina
I copied code from the link you posted, and I made only change in
GetStyle method (Response insted of Request). Everything works fine for
me. It's hard for me to say what causes your problem. I post code with
my correction below.

<html>

<script language="C#" runat="server">

      void Page_Load(Object sender, EventArgs E) {

        if (!IsPostBack){
          HttpCookie cookie = Request.Cookies["preferences1"];
          ViewState["Referer"] = Request.Headers["Referer"];

          if ( cookie != null ){
            BackColor.Value = (String)cookie.Values["BackColor"];
            ForeColor.Value = (String)cookie.Values["ForeColor"];
            LinkColor.Value = (String)cookie.Values["LinkColor"];
            FontSize.Value = (String)cookie.Values["FontSize"];
            FontName.Value = (String)cookie.Values["FontName"];
          }
        }
      }

      void Submit_Click(Object sender, EventArgs E) {

        HttpCookie cookie = new HttpCookie("preferences1");
        cookie.Values.Add("ForeColor",ForeColor.Value);
        cookie.Values.Add("BackColor",BackColor.Value);
        cookie.Values.Add("LinkColor",LinkColor.Value);
        cookie.Values.Add("FontSize",FontSize.Value);
        cookie.Values.Add("FontName",FontName.Value);
        Response.AppendCookie(cookie);

        if ( ViewState["Referer"] != null ){
          Response.Redirect(ViewState["Referer"].ToString());
        }
      }

      void Cancel_Click(Object sender, EventArgs E) {
        if ( ViewState["Referer"] != null ){
          Response.Redirect(ViewState["Referer"].ToString());
        }
      }

      String GetStyle(String key) {

        HttpCookie cookie = Response.Cookies["preferences1"];

        if (cookie != null) {

          switch (key) {

            case "ForeColor" :
              return cookie.Values["ForeColor"];
              break;

            case "BackColor" :
              return cookie.Values["BackColor"];
              break;

            case "LinkColor" :
              return cookie.Values["LinkColor"];
              break;

            case "FontSize" :
              return cookie.Values["FontSize"];
              break;

            case "FontName" :
              return cookie.Values["FontName"];
              break;
          }
        }
        return "";
      }

</script>

<style>

    body {
      font: <%=GetStyle("FontSize")%> <%=GetStyle("FontName")%>;
      background-color: <%=GetStyle("BackColor")%>;
    }

    table {
      font: <%=GetStyle("FontSize")%> <%=GetStyle("FontName")%>;
      background-color: <%=GetStyle("BackColor")%>;
      foreground-color: <%=GetStyle("ForeColor")%>
    }

    a { color: <%=GetStyle("LinkColor")%> }

</style>

<body style="color:<%=GetStyle("ForeColor")%>">

    <form id="Form1" runat="server">

    <h3><font face="Verdana">Customize This Page</font></h3>

    <b>Select Your Preferences: </b><p>

    <table style="color:<%=GetStyle("ForeColor")%>">
      <tr>
        <td>Background Color:</td>
        <td>
          <select id="BackColor" runat="server">
            <option>beige</option>
            <option>yellow</option>
            <option>red</option>
            <option>blue</option>
            <option>lightblue</option>
            <option>lightgreen</option>
            <option>black</option>
            <option>white</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Foreground Color:</td>
        <td>
          <select id="ForeColor" runat="server">
            <option>black</option>
            <option>beige</option>
            <option>yellow</option>
            <option>red</option>
            <option>blue</option>
            <option>lightblue</option>
            <option>lightgreen</option>
            <option>white</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Hyperlink Color:</td>
        <td>
          <select id="LinkColor" runat="server">
            <option>blue</option>
            <option>beige</option>
            <option>yellow</option>
            <option>red</option>
            <option>lightblue</option>
            <option>lightgreen</option>
            <option>black</option>
            <option>white</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Font Size:</td>
        <td>
          <select id="FontSize" runat="server">
            <option>8pt</option>
            <option>10pt</option>
            <option>12pt</option>
            <option>14pt</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Font Name:</td>
        <td>
          <select id="FontName" runat="server">
            <option>verdana</option>
            <option>tahoma</option>
            <option>arial</option>
            <option>times</option>
          </select>
        </td>
      </tr>
    </table>

    <p>

    <input id="Submit1" type="submit" OnServerClick="Cancel_Click"
Value="Cancel" runat="server"/>
    <input id="Submit2" type="submit" OnServerClick="Submit_Click"
Value="Submit" runat="server"/>

    </form>

</body>
</html>