locked
How to include External css file in Mobile Application. RRS feed

  • Question

  • User32893493 posted

    Hello,

    I am developing one mobile application using Asp.net. i know how to use mobile Stylesheet. But i want to add external CSS file in my project like normal application.How can i use CSS file in mobile application?

    i dn`t want to use StyleSheet like that.

    <mobile:StyleSheet ID="lblStyleSheet" runat="server">

    <mobile:Style Name="lblBusiness" ForeColor= "LightSkyBlue" Font-Bold="True" ></mobile:Style>

    </mobile:StyleSheet>

    Monday, December 8, 2008 4:36 AM

Answers

  • User530230881 posted

     hi, this is what i've done to use external style sheet dont know whether its right or wrong but it worked... i tried using vs2008...

     create a user control... You can select a mobile user control template... I had named that as stylesheet.ascx...

    <%@ Control Language="C#" AutoEventWireup="true" Inherits="TestApp.stylesheet" Codebehind="stylesheet.ascx.cs" %>
    <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>

    The page by default contains the above two lines of code...

    Then type...

    <mobile:StyleSheet ID="StyleSheet1" Runat="server">

    //You can use various styles here
    <mobile:Style Name="exstyle1" Alignment="NotSet" BackColor="#fdfeba" Font-Size="Large" Font-Name="Arial" ForeColor="Red" Font-Italic="True"></mobile:Style>

    <mobile:Style Name="exstyle2" Font-Name="Times New Roman"

    //End of style defentions
    </mobile:StyleSheet>

     

    Then in your aspx page, include this tag inside <body> before the <mobile:form> tag,

    <mobile:StyleSheet ID="StyleSheet1" ReferencePath="stylesheet.ascx" Runat="server">
        </mobile:StyleSheet>

    then you can use the syles to your controls like

    <mobile:Form id="Signup_Form" StyleReference="exstyle1"  runat="server">

     <mobile:TextBox id="txt1" StyleReference="exstyle2" runat="server"/>

     Your styles will reflect when you run your app... Hope that helps you out...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 10, 2008 4:51 AM

All replies

  • User1634317999 posted

    Hello,

    please use a script template:

     

    1    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test_Mobile_CSS.aspx.vb"
    2        Inherits="Test_Mobile_CSS" %>
    3    
    4    <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
    5    <html xmlns="http://www.w3.org/1999/xhtml">
    6    <body>
    7        <mobile:Form ID="Form1" Runat="server">
    8            <mobile:DeviceSpecific ID="DeviceSpecific1" Runat="server">
    9                <Choice Filter="isHTML32" Xmlns="http://schemas.microsoft.com/mobile/html32template">
    10                   <ScriptTemplate>
    11                       <link rel="stylesheet" href="Common.css" type="text/css" />
    12                   </ScriptTemplate>
    13               </Choice>
    14           </mobile:DeviceSpecific>
    15           <mobile:TextBox ID="TextBox1" Runat="server">
    16           </mobile:TextBox>
    17           <mobile:TextBox ID="TextBox2" Runat="server">
    18           </mobile:TextBox>
    19           <mobile:TextBox ID="TextBox3" Runat="server">
    20           </mobile:TextBox>
    21       </mobile:Form>
    22   </body>
    23   </html>
    
     
    Monday, December 8, 2008 2:45 PM
  • User32893493 posted

    Thanks a lot... :)

    Plz see that code...

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

    <%@ 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 Runat="server">

    <Choice Filter="isWML11">

    <ScriptTemplate>

    <link rel="stylesheet" href="/Templates/CSS/general_styles.css" type="text/css" />

    </ScriptTemplate>

    </Choice>

    </mobile:DeviceSpecific>

    <mobile:Panel ID="Panel1" Runat="server" BreakAfter="True">

    <mobile:Image ID="Image1" Runat="server" ImageUrl="../images/Small_flag.JPG" />

    <mobile:Image ID="Image2" Runat="server" ImageUrl="../images/SmallBanner_Visitor.JPG" />

    <mobile:Label Runat="server" CssClass="citizens_bg" CssLocation="/Templates/CSS/general_styles.css" id="lblcontents" StyleReference="lblVisitors">Content Page</mobile:Label>

    I have used like that but still it not working.. I am checking the "isWML11" in Choice Filter. I am using OpenWave Simulator.
    i have also added the lines in Web.Config.

    <filter name="isHTML32" compare="preferredRenderingType" argument="html32"/>

    <filter name="isJPhone" compare="Type" argument="J-Phone"/>

    <filter name="isWML11" compare="PreferredRenderingType" argument="wml11"/>

    <filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10"/>

    <filter name="isGoAmerica" compare="Browser" argument="Go.Web"/>

    <filter name="isMME" compare="Browser" argument="Microsoft Mobile Explorer"/>

    <filter name="isMyPalm" compare="Browser" argument="MyPalm"/>

    <filter name="isPocketIE" compare="Browser" argument="Pocket IE"/>

    <filter name="isUP3x" compare="Type" argument="Phone.com 3.x Browser"/>

    <filter name="isUP4x" compare="Type" argument="Phone.com 4.x Browser"/>

     

     

     

    Tuesday, December 9, 2008 6:29 AM
  • User32893493 posted

    Thanks a lot... :)

    Plz see that code...

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

    <%@ 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 Runat="server">

    <Choice Filter="isWML11">

    <ScriptTemplate>

    <link rel="stylesheet" href="/Templates/CSS/general_styles.css" type="text/css" />

    </ScriptTemplate>

    </Choice>

    </mobile:DeviceSpecific>

    <mobile:Panel ID="Panel1" Runat="server" BreakAfter="True">

    <mobile:Image ID="Image1" Runat="server" ImageUrl="../images/Small_flag.JPG" />

    <mobile:Image ID="Image2" Runat="server" ImageUrl="../images/SmallBanner_Visitor.JPG" />

    <mobile:Label Runat="server" CssClass="citizens_bg" CssLocation="/Templates/CSS/general_styles.css" id="lblcontents" StyleReference="lblVisitors">Content Page</mobile:Label>

    I have used like that but still it not working.. I am checking the "isWML11" in Choice Filter. I am using OpenWave Simulator.
    i have also added the lines in Web.Config.

    <filter name="isHTML32" compare="preferredRenderingType" argument="html32"/>

    <filter name="isJPhone" compare="Type" argument="J-Phone"/>

    <filter name="isWML11" compare="PreferredRenderingType" argument="wml11"/>

    <filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10"/>

    <filter name="isGoAmerica" compare="Browser" argument="Go.Web"/>

    <filter name="isMME" compare="Browser" argument="Microsoft Mobile Explorer"/>

    <filter name="isMyPalm" compare="Browser" argument="MyPalm"/>

    <filter name="isPocketIE" compare="Browser" argument="Pocket IE"/>

    <filter name="isUP3x" compare="Type" argument="Phone.com 3.x Browser"/>

    <filter name="isUP4x" compare="Type" argument="Phone.com 4.x Browser"/>

    Thanks again...

    Tuesday, December 9, 2008 7:21 AM
  • User1634317999 posted

    Hello,

    the above solution works only on devices with PreferredRenderingType HTML32 and ECMAScriptVersion greater or equal 1.0.

    On WML devices the code within the script template is added after the opening <card> tag. You have to ensure that the server renders WML 1.1 to the Openwave emulator if you use <Choice Filter="isWML11">.

    I think it is better to ask questions about the Openwave Emulator in the Openwave Developer Forum.

    Tuesday, December 9, 2008 10:49 AM
  • User530230881 posted

     hi, this is what i've done to use external style sheet dont know whether its right or wrong but it worked... i tried using vs2008...

     create a user control... You can select a mobile user control template... I had named that as stylesheet.ascx...

    <%@ Control Language="C#" AutoEventWireup="true" Inherits="TestApp.stylesheet" Codebehind="stylesheet.ascx.cs" %>
    <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>

    The page by default contains the above two lines of code...

    Then type...

    <mobile:StyleSheet ID="StyleSheet1" Runat="server">

    //You can use various styles here
    <mobile:Style Name="exstyle1" Alignment="NotSet" BackColor="#fdfeba" Font-Size="Large" Font-Name="Arial" ForeColor="Red" Font-Italic="True"></mobile:Style>

    <mobile:Style Name="exstyle2" Font-Name="Times New Roman"

    //End of style defentions
    </mobile:StyleSheet>

     

    Then in your aspx page, include this tag inside <body> before the <mobile:form> tag,

    <mobile:StyleSheet ID="StyleSheet1" ReferencePath="stylesheet.ascx" Runat="server">
        </mobile:StyleSheet>

    then you can use the syles to your controls like

    <mobile:Form id="Signup_Form" StyleReference="exstyle1"  runat="server">

     <mobile:TextBox id="txt1" StyleReference="exstyle2" runat="server"/>

     Your styles will reflect when you run your app... Hope that helps you out...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 10, 2008 4:51 AM
  • User32893493 posted

    Thanks Siikanth :),

    I have done this before as you described, but i want to use .CSS file in the project I am not getting the way how to do that.

    Friday, December 12, 2008 7:46 AM
  • User-1322353561 posted

     Hello Srikant,

     

    Thanks for your guidance.Sameway  i have implemnted  it on my mobile application and its work for label but not work for <mobile:button> control for back color.

    Can you please tell me how i will implement style sheet for mobile button control?

     

    Thanks in advance

    Rakhi

     

     

    Wednesday, January 27, 2010 8:12 AM
  • User1487694418 posted

    The best way to do this, I've found is to use Adapters. Here is a quick an dirty.

    Create your own Form class that inherits from Mobile.Form. I added an extra property so I could set the stylesheet to the appropriate path.

    using System;
    using System.Configuration;
    using System.Web.UI.MobileControls;
    using System.Web.UI.MobileControls.Adapters;

    public class MyForm : Form
    {
         public string CssPath
        {
            get
            {
                if( ViewState["CssPath"] != null)
                    return (string)ViewState["CssPath"];
                else
                    return string.Empty;
            }
            set
            {
                 ViewState["CssPath"] = value;
            }
        }
    }

    //Now Create the Form Adapter

    public class HtmlMyFormAdapter : HtmlFormAdapter
    {
        protected new MyForm Control
        {
            get
            {
                 return (MyForm)base.Control;
             }
        }

        protected override bool RenderExtraHeadElements( HtmlMobileTextWriter writer )
        {
            if( writer != null )
            {
                 if( this.Control.CssPath.Length > 0 )
                 {
                      writer.WriteBeginTag( "link" );
                      writer.WriteAttribute( "rel", "stylesheet" );
                      writer.WriteAttribute( "href", this.Control.CssPath );
                      writer.WriteAttribute( "media", "screen" );
                      writer.WriteAttribute( "type", "text/css" );
                      writer.WriteLine( "/>" ); 
                 }
            }
        }
    }

    //Now for the most IMPORTANT part. You must make an entry into your Web.Config to map the adpater.

    <mobileControls>
         <device name="HtmlDeviceAdapters2" inheritsFrom="HtmlDeviceAdapters">
            <control name="MyNameSpace.MyForm, AssemblyName" adapter="MyNameSpace.HtmlMyFormAdapter, AssemblyName"/>
         </device>
    </mobileControls>

    Obviously, you will need to replace AssemblyName with the actual name of your assembly, as well as the MyNameSpace with the actual Namespace for you control.

    Then in your markup you will need to add a Register tag.

    <%@ Register TagPrefix="Custom" Namespace="MyNameSpace" Assembly="AssemblyName" %>

    Then on any page you want to use CSS, you simply use your Form control.
    <Custom:MyForm Title="MyTitle" ID="frmMyForm" runat="server" CssPath="PathToCss.css">
      <!--Other Controls here-->
    </Custom:MyForm>

    You can duplicate this technique on any control you want more control over. I've created adapters for the Form, Link, Label, and List controls, because I wanted it to display differently, plus I wanted to add Class attributes.

    Very cool stuff! Hope this helps!

    Wednesday, January 27, 2010 4:17 PM