What's New?

[CLOSED] Panel Frame Style - Set Background and Font

  1. #1
    Jan 11, 2011, 2:26 PM

    [CLOSED] Panel Frame Style - Set Background and Font

    I need to display a panel with a frame="true" but I want the frame background to be white (instead of the default color from the site style sheet). I can set the body background color to white but there is still the background around the buttons and the frame border that is still showing the original background color.

    Where can I set the style for the frame background color?

    
<body>
    <form id="form1" runat="server">
    <div>
    <ext:ScriptManager ID="ScriptManager1" runat="server" />     
     <ext:Panel ID="Panel1" runat="server" 
                                                Frame="true" 
                                                BodyStyle="background-color:white;"
                                                AutoScroll="true"
                                                StyleSpec="" 
                                                Border="true">
                                        <Body>
                                            <table>
                                                <tr>
                                                    <td align="right">Range:</td>
                                                    <td> 
                                                        <ext:Anchor>
                                                            <ext:DateField ID="txt_WebAds_StartDate" runat="server" FieldLabel="Date Range:" EmptyText="Start Date" width="100">
                                                            </ext:DateField>
                                                        </ext:Anchor>
                                                    </td>
                                                    <td align="center">to</td>
                                                    <td> 
                                                        <ext:Anchor>
                                                            <ext:DateField ID="txt_WebAds_EndDate" runat="server" FieldLabel="to" EmptyText="End Date" width="100">
                                                            </ext:DateField>
                                                        </ext:Anchor>   
                                                    </td>
                                                    <td width="50%" colspan="1"></td>
                                                    <td align="center" valign="bottom">Impressions</td>                                                    
                                                    <td align="center" valign="bottom">CPM</td>                                                    
                                                    <td align="center" valign="bottom">Net</td>
                                                </tr>
                                                <tr>
                                                    <td align-"right">Position:</td>
                                                    <td colspan="3"> 
                                                        <ext:Anchor Horizontal="100%">
                                                             <ext:ComboBox ID="cbo_WebAds_Position" runat="server" 
                                                                    DisplayField="DropDownDisplay" 
                                                                    ValueField="ID"
                                                                    EmptyText="Select Position..." FieldLabel="Position" width="230">                              
                                                            </ext:ComboBox>
                                                        </ext:Anchor>
                                                    </td>                                                          
                                                    <td></td>   
                                                    <td>
                                                        <ext:Anchor>
                                                            <ext:TextField runat="server" ID="txt_WebAds_Impressions" FieldLabel="Impressions" width="80">
                                                            </ext:TextField>
                                                        </ext:Anchor>
                                                    </td>                                                        
                                                    <td>
                                                        <ext:TextField ID="txt_WebAds_CPM" runat="server" FieldLabel="CPM" Width="60">
                                                        </ext:TextField>
                                                    </td>                                                                                           
                                                    <td>
                                                        <ext:TextField ID="txt_WebAds_Net" runat="server" FieldLabel="Net" Width="80">
                                                        </ext:TextField>
                                                    </td>
                                                </tr>
                                            </table>
                                        </Body>                                        
                                        <Buttons>
                                            <ext:Button runat="server" Text="Save"></ext:Button>
                                        </Buttons>
                                    </ext:Panel>                                           
    </div>
    </form>
</body>
    Last edited by Daniil; Jan 14, 2011 at 8:48 PM. Reason: [CLOSED]
  2. #2
    Jan 11, 2011, 4:26 PM
    Hi,

    There is a lot of div elements with specific css rules.

    I can demonstrate what css rules you have to override to get white background.

    I see you set Border="true". It doesn't make sense when it deals with Frame="true". It also needs to set respective css rules.

    See <style> and Panel's Cls property.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Coolite 0.8.X Example</title>
    <style type="text/css">
        .white-frame .x-panel-body {
            background-color: white;
        }
        .white-frame .x-panel-ml, .white-frame .x-panel-mr {
            background-image: none;
        }
        .white-frame .x-panel-bl, .white-frame .x-panel-br {
            background-image: none;
        }
        
        .white-frame .x-panel-mc, .white-frame .x-panel-bc {
            background: none;
        }
        .show-border .x-panel-body {
            border: 1px solid #99bbe8;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" />
    <ext:Panel 
        runat="server" 
        Frame="true" 
        Height="200" 
        Width="200"
        Html="Some content"
        Cls="white-frame show-border">
        <Buttons>
            <ext:Button runat="server" Text="Some button" />
        </Buttons>
    </ext:Panel>
    </form>
</body>
</html>
    P.S. Generally speaking, it would be best to set respective "background-image" for each four div elements with the following css classes: x-panel-ml, x-panel-mr, x-panel-bl, x-panel-br.

Similar Threads

  1. [CLOSED] Displaying different background and font colors for each grouping
    By Fahd in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 29, 2012, 12:16 PM
  2. [CLOSED] Change the Font style to Bold for a Row in Grid View
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 10, 2011, 11:50 AM
  3. [CLOSED] Background image style for panel is not working in chrome
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 20, 2011, 7:04 AM
  4. Editable Grid Panel default style properties (font size and weight, header and cells background color, etc...)
    By garag in forum 1.x Help
    Replies: 0
    Last Post: Sep 27, 2011, 10:24 AM
  5. Change bodyStyle or background style of a window dynamically through CSS.
    By abhi_distance in forum 1.x Help
    Replies: 0
    Last Post: Apr 04, 2009, 10:45 AM

Tags for this Thread

Posting Permissions