What's New?

[CLOSED] CSS Styling of MessageBox

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Jan 09, 2014, 7:00 PM

    [CLOSED] CSS Styling of MessageBox

    We have a styled version of the Ext.Net MessageBox (see screenshot) that we have been using since version .8 and need to continue using that style as we transition over to v2. I have modified our style sheet to work, but I cannot get it to work in IE7 and IE8.

    I cannot override the border width and color because this does not override your css:
        .window-error .x-window,
    .window-error .x-message-box,
    .window-error .x-window-default,
    .window-error .x-window-closable,
    .window-error .x-window-default-closable,
    .window-error .window-error,
    .window-error .x-nbr {
       border-top-width: 2px !important;
       border-right-width: 2px !important;
       border-bottom-width: 2px !important;
       border-left-width: 2px !important;  
    }
    I also cannot get Button Hover style to work in IE8 but am able to apply default style, tho it doesn't show in the image below, it should be gradient silver, and hover gradient pale yellow with with an orange glow; in IE9 I can't get either default or hover to apply. The hover does not work for the corner close button in either, but hover works for both in FF and Chrome.

    I have attached the sprites referenced in css code.

    <%@ Page Language="C#" AutoEventWireup="true" %> 
<!DOCTYPE html>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server" language="c#">
 
</script>
 
<style type="text/css">
    
    table.x-btn-text-icon, 
    table.x-btn-noicon {
        background: url("/buttons-sprite.png") no-repeat scroll 100% -4px transparent;
        border: 1px solid #939393;
        height: 21px !important;
        outline: medium none;
        border-radius: 5px 5px 5px 5px;
    }
 
    table.x-btn-text-icon:hover, 
    table.x-btn-noicon:hover, 
    table.x-btn-focus{
        background-position: 0 -64px;
        border: 1px solid #FD9500;
    }
 
    div.window-error {
        font-weight: bold !important; 
        font-size: 92% !important; 
        color: #333 !important; 
        border: 2px solid #c21020 !important; 
        background-color: #fbeff0 !important;  
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0.18, #faecee),color-stop(0.64, #fff)) !important; 
        background: -moz-linear-gradient(center bottom, #faecee 18%, #fff 64%) !important;
    }
 
    .window-error .x-window,
    .window-error .x-message-box,
    .window-error .x-window-default,
    .window-error .x-window-closable,
    .window-error .x-window-default-closable,
    .window-error .window-error,
    .window-error .x-nbr {
       border-top-width: 2px !important;
       border-right-width: 2px !important;
       border-bottom-width: 2px !important;
       border-left-width: 2px !important; 
    }
 
    .window-error .x-window-tl,
    .window-error .x-window-tr,
    .window-error .x-window-tc,
    .window-error .x-window-ml,
    .window-error .x-window-mr,
    .window-error .x-window-mc, 
    .window-error .x-window-bl,
    .window-error .x-window-br,
    .window-error .x-window-bc,
    .window-error .x-window-body,
    .window-error .x-window-body-defualt,
    .window-error .x-window-header-default-top{
        background-color: #fbeff0 !important;
    }
 
    .window-error .x-window-header-default-tc,
    .window-error .x-window-header-default-top-tl,
    .window-error .x-window-header-default-top-tr,
    .window-error .x-window-header-default-top-ml,
    .window-error .x-window-header-default-top-mr,
    .window-error .x-window-header-default-top-mc,
    .window-error .x-window-default-closable-tl,
    .window-error .x-window-default-closable-tr,
    .window-error .x-window-default-closable-tc,
    .window-error .x-window-default-closable-ml,
    .window-error .x-window-default-closable-mr,
    .window-error .x-window-default-closable-mc, 
    .window-error .x-window-default-closable-bl,
    .window-error .x-window-default-closable-br,
    .window-error .x-window-default-closable-bc
     {
        background: transparent !important; 
    }
 
    .window-error .x-container, 
    .window-error .x-box-item, 
    .window-error .x-window-item, 
    .window-error .x-container-default, 
    .window-error .x-box-layout-ct {
        background-color: #fbeff0 !important;
    }
    
    .window-error .x-window-header-text {
        color:#333
    }
 
    .window-error .x-window-header .x-tool {
        position: absolute; 
        right: 3px; 
        top: 2px; 
        z-index: 21000;
    } 
 
    .window-error .x-window-header .x-tool-close {
        display:block; 
        width:16px; 
        height:16px; 
        background:url('/close.gif') no-repeat top; overflow:hidden;
    }
    
    .window-error .x-window-header .x-tool-close-over {    
        display:block; 
        width:16px; 
        height:16px; 
        background:url('/close.gif') no-repeat top; 
        overflow:hidden;
        background-position:center bottom ;
    }
    
</style>
 
<script type="text/javascript">
    
    function callAlert(){
        Ext.MessageBox.show({
            title: 'Css Tester',
            msg: 'Please correct invalid fields.',
            buttons: Ext.MessageBox.OK,
            icon: Ext.MessageBox.ERROR,
            cls: "window-error"
        });
    };
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager" runat="server" />
        <div>
            <ext:Button ID="Button1" Text="SetData" runat="server">
                <Listeners>
                    <Click Handler="callAlert();" />
                </Listeners>
            </ext:Button>
            
        </div>
    </form>
</body> </html>
    Attached Thumbnails Click image for larger version.  Name: msg box - IE9.jpg  Views: 14  Size: 26.6 KB  ID: 7461   Click image for larger version.  Name: msg box - IE8.jpg  Views: 12  Size: 26.2 KB  ID: 7463   Click image for larger version.  Name: buttons-sprite.png  Views: 11  Size: 10.1 KB  ID: 7465  
    Attached Images  
    Last edited by Daniil; Jan 14, 2014 at 1:36 PM. Reason: [CLOSED]

Similar Threads

  1. Styling and Theming
    By edip in forum 2.x Help
    Replies: 2
    Last Post: Sep 27, 2013, 3:49 PM
  2. [CLOSED] MessageBox CSS Styling
    By VirtualArtists in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 05, 2013, 3:29 PM
  3. Styling the UI
    By LucJ in forum Open Discussions
    Replies: 2
    Last Post: Dec 09, 2009, 3:52 AM
  4. What about styling the UI ?
    By LucJ in forum 1.x Help
    Replies: 0
    Last Post: Dec 04, 2009, 4:14 AM
  5. Styling grouping GridPanel - Bug?
    By Rod in forum 1.x Help
    Replies: 2
    Last Post: Nov 21, 2008, 5:29 AM

Tags for this Thread

Posting Permissions