ASP.NET

How to change CSS Dynamically RSS

12 replies

Last post Jun 14, 2010 05:36 PM by nagender_reddy

‹ Previous Thread|Next Thread ›

- Reply
nagender_red...

Member

96 Points

89 Posts

How to change CSS Dynamically

Jun 14, 2010 01:54 AM|LINK

Hi All

How to change the CSS dynamically based on the mobile request.

Presently i am using following code for applying css to my page. Based on the device request how can i change the style sheet in code behind.

<mobile:DeviceSpecific ID="DeviceSpecific3" Runat="server">
            <Choice Filter="supportsJavaScript" Xmlns="http://schemas.microsoft.com/mobile/html32template">
                <ScriptTemplate>

<link href="home.css" rel="stylesheet" type="text/css" />
                </ScriptTemplate>
            </Choice>
        </mobile:DeviceSpecific>

It is very urgent to me...

Thanks,
- Edited by nagender_reddy on Jun 14, 2010 02:30 AM
- Reply
rahul.kansar...

Member

524 Points

87 Posts

Re: How to change CSS Dynamically

Jun 14, 2010 06:20 AM|LINK

Hi

Check this : http://www.aspnettutorials.com/tutorials/themes/usingcss-csharp.aspx

Hope this helps

Rahul

Please mark this reply as answer if it helps
- Reply
nagender_red...

Member

96 Points

89 Posts

Re: How to change CSS Dynamically

Jun 14, 2010 06:35 AM|LINK

Hi rahul,

I checked that page previously but my requirement is not like that. Based on the user(device browser) request i have to change the css(eg: if it comes from BB device i have to use BBCss.css & if it is iphone --> iphone.css etc..). i written following code in the page load event, prerender events but it is not working.

        HtmlGenericControl link1 = new HtmlGenericControl("LINK");
        link1.Attributes.Add("rel", "stylesheet");
        link1.Attributes.Add("type", "text/css");
        link1.Attributes.Add("href", "Test.css");
        Controls.Add(link1);

Thanks,
- Reply
roopeshreddy

All-Star

20155 Points

3328 Posts
Re: How to change CSS Dynamically

Jun 14, 2010 01:07 PM|LINK
Hi,

Try the following code...
```
HtmlLink htmlLink = new HtmlLink();
htmlLink.Href="BBCSS.css";
htmlLink.Atttributes.Add("rel","stylesheet");
htmlLink.Atttributes.Add("type","text/css");


Page.Header.Controls.Add(htmlLink);
```
Hope it heps u....
Thanks & Regards
Roopesh Reddy C
Roopesh's Space
- Reply
frez

Contributor

5418 Points

913 Posts

Re: How to change CSS Dynamically

Jun 14, 2010 01:16 PM|LINK

Change the markup to give the stylesheet link and id and a runat=server, e.g.

<link href="home.css" rel="stylesheet" type="text/css" id="stylesheet" runat="server" />

Then you can change it in the codebehind, e.g.

stylesheet.Attributes["href"] = "test/styles.css";

MCSD, MCPD, MCTS
- Reply
nagender_red...

Member

96 Points

89 Posts

Re: How to change CSS Dynamically

Jun 14, 2010 01:17 PM|LINK

Hi roopesh,

It is not working roopesh, is there any solution apart from this. Tell me am i doing any thing wrong the following is my code

<mobile:Form ID="form1" Runat="server">
        <mobile:DeviceSpecific ID="DeviceSpecific3" Runat="server">
            <Choice Filter="supportsJavaScript" Xmlns="http://schemas.microsoft.com/mobile/html32template">
                <ScriptTemplate>
                </ScriptTemplate>
            </Choice>
        </mobile:DeviceSpecific>
        <mobile:Panel ID="test" Runat="server">
            <mobile:DeviceSpecific ID="Filter" Runat="server">
                <Choice Filter="isHTML32" Xmlns="http://schemas.microsoft.com/mobile/html32template">
                    <ContentTemplate>
                        Test TEst
                    </ContentTemplate>
                </Choice>
            </mobile:DeviceSpecific>
        </mobile:Panel>
    </mobile:Form>

In page load i written your code

protected void Page_Load(object sender, EventArgs e)
    {
        HtmlLink htmlLink = new HtmlLink();
        htmlLink.Href = "Test1.css";
        htmlLink.Attributes.Add("rel", "stylesheet");
        htmlLink.Attributes.Add("type", "text/css");
        Page.Header.Controls.Add(htmlLink);

}
- Reply
nagender_red...

Member

96 Points

89 Posts

Re: How to change CSS Dynamically

Jun 14, 2010 01:23 PM|LINK

Hi frez,

I tried with the runat="server" to that link as you said above.

<link href="home.css" rel="stylesheet" type="text/css" id="stylesheet" runat="server" />

In this situation i am not getting the reference of link(i.e stylesheet) reference. i written like this

<ScriptTemplate>

<link href="home.css" rel="stylesheet" type="text/css" id="stylesheet" runat="server" />
</ScriptTemplate>

in the page load event i am not getting the reference of "stylesheet" id. I am getting object reference not set to instance of a object error...
- Edited by nagender_reddy on Jun 14, 2010 01:29 PM
- Reply
frez

Contributor

5418 Points

913 Posts

Re: How to change CSS Dynamically

Jun 14, 2010 02:25 PM|LINK

Does the <head> area that contains the stylesheet link also have runat="server"? e.g.

<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My title</title>
    <link href="test\styles.css" rel="stylesheet" type="text/css" media="screen" id="stylesheet" runat="server" />
</head>

MCSD, MCPD, MCTS
- Reply
nagender_red...

Member

96 Points

89 Posts

Re: How to change CSS Dynamically

Jun 14, 2010 03:03 PM|LINK

Hi frez,

There is no head tag in my page, if i write also the link control reference is not getting in code behind.

my entire page as follows

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>

<mobile:Form ID="form1" Runat="server">
        <mobile:DeviceSpecific ID="DeviceSpecific3" Runat="server">
            <Choice Filter="supportsJavaScript" Xmlns="http://schemas.microsoft.com/mobile/html32template">
                <ScriptTemplate>
                </ScriptTemplate>
            </Choice>
        </mobile:DeviceSpecific>
        <mobile:Panel ID="test" Runat="server">
            <mobile:DeviceSpecific ID="Filter" Runat="server">
                <Choice Filter="isHTML32" Xmlns="http://schemas.microsoft.com/mobile/html32template">
                    <ContentTemplate>
                        Test TEst
                    </ContentTemplate>
                </Choice>
            </mobile:DeviceSpecific>
        </mobile:Panel>
    </mobile:Form>

</body>
</html>

In page load i written your code

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.MobileControls;
using System.Web.UI.HtmlControls;
using System.Web.Security;
using System.Configuration;

public partial class Login : System.Web.UI.MobileControls.MobilePage
{

protected void Page_Load(object sender, EventArgs e)
    {
        HtmlLink htmlLink = new HtmlLink();
        htmlLink.Href = "Test1.css";
        htmlLink.Attributes.Add("rel", "stylesheet");
        htmlLink.Attributes.Add("type", "text/css");
        Page.Header.Controls.Add(htmlLink);

}

}
- Edited by nagender_reddy on Jun 14, 2010 03:27 PM
- Reply
frez

Contributor

5418 Points

913 Posts

Re: How to change CSS Dynamically

Jun 14, 2010 03:59 PM|LINK

It must be a unique mobile problem. I had a search of the forums and found this post I dont know if it helps.

http://forums.asp.net/t/1357842.aspx

MCSD, MCPD, MCTS