[CLOSED] CSS Styling of MessageBox

Page 1 of 2 12 LastLast
  1. #1

    [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]
  2. #2
    Note: I would like to avoid having to maintain two style sheets for this, but when I try to use this against my Ext.Net v1, I have the borders and some of the hover action but lose the background color for the interior of the window (see screen shot) and then I run into the same problem of not being able to override your css in these areas, in both IE8 and IE9, as well as FF:

        .x-window-tl,
        .x-window-tr,
        .x-window-tc,
        .x-window-ml,
        .x-window-mr,
        .x-window-mc, 
        .x-window-bl,
        .x-window-br,
        .x-window-bc {
            background-color: #fbeff0 !important;     }
    It appears that only the top most level, x-window x-window-plain x-window-dlg window-error, gets the Cls window-error applied. But removing the appended class name from my css does not help.

    If it is better for the community, we can move this part of the thread to the V1 forum along with a copy of the sample above, but my purposes would best be served if they were kept together.

    thnx
    Attached Thumbnails Click image for larger version. 

Name:	msg box - ExtV1.jpg 
Views:	6 
Size:	34.5 KB 
ID:	7467  
  3. #3
    Hi @betamax,

    This appears to override the borders in IE8.
    .x-nbr div.window-error.x-window-default {
        border: 2px solid #c21020 !important; 
    }
    I will investigate the hover issue later.
  4. #4
    Hi Roger,

    You might be interested in the next release of Ext.NET (2.5.0), which will include new Theme options. Demo available at the following location:

    http://test.ext.net/theme/

    You can change the UI to "Danger" to reproduce something similar to what you're styling.

    Hope this helps.
    Geoffrey McGill
    Founder
  5. #5
    Quote Originally Posted by Daniil View Post
    I will investigate the hover issue later.
    Here is an example demonstrating how to change the Button's background. I used "background-color" for sake of ease. You can override the background-image and other related background properties if needed.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style>
            /* For FireFox, Chrome, IE >= 9 */
            .my-button.x-btn-default-small, .x-nlg .my-button.x-btn-default-small {
                background-image: none; /* set up your background */
                background-color: green;
            }
    
                .my-button.x-btn-default-small-over, .x-nlg .my-button.x-btn-default-small-over {
                    background-color: yellow;
                }
    
            /* For IE < 9 */
            .my-button.x-btn-default-small .x-btn-tl,
            .my-button.x-btn-default-small .x-btn-tr,
            .my-button.x-btn-default-small .x-btn-tc,
            .my-button.x-btn-default-small .x-btn-bl,
            .my-button.x-btn-default-small .x-btn-br,
            .my-button.x-btn-default-small .x-btn-bc,
            .my-button.x-btn-default-small .x-btn-ml,
            .my-button.x-btn-default-small .x-btn-mr,
            .my-button.x-btn-default-small .x-btn-mc {
                background-image: none;
                background-color: green;
            }
    
            .my-button.x-btn-default-small-over .x-btn-tl,
            .my-button.x-btn-default-small-over .x-btn-tr,
            .my-button.x-btn-default-small-over .x-btn-tc,
            .my-button.x-btn-default-small-over .x-btn-bl,
            .my-button.x-btn-default-small-over .x-btn-br,
            .my-button.x-btn-default-small-over .x-btn-bc,
            .my-button.x-btn-default-small-over .x-btn-ml,
            .my-button.x-btn-default-small-over .x-btn-mr,
            .my-button.x-btn-default-small-over .x-btn-mc {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button runat="server" Text="Button" Cls="my-button" />
        </form>
    </body>
    </html>
  6. #6
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi Roger,

    You might be interested in the next release of Ext.NET (2.5.0), which will include new Theme options. Demo available at the following location:

    http://test.ext.net/theme/

    You can change the UI to "Danger" to reproduce something similar to what you're styling.

    Hope this helps.
    Thanks Geoffrey. I'll check it out, but, unfortunately we have a company wide, across our product suite, a defined look we have to maintain, and also unfortunately, the products don't use the same control frameworks, so, I'm stuck with what I've got.
  7. #7
    Thanks Daniil, I will start working with that example now. In the mean time, the Border is a big issue (see first post). It doesn't seem to be an issue of specificity, and I would think that my style would take precedence over yours. Can you help with that?
  8. #8
    I thought this might help show the simplicity\complexity of my border issue. Please see attached screenshot of the css as seen in IE Dev Tool.

    If I uncheck your border styles (green, 0 px), then my border styles are applied (red, 2 px).
    Attached Thumbnails Click image for larger version. 

Name:	msgbox css in dev tool.jpg 
Views:	9 
Size:	99.5 KB 
ID:	7472  
  9. #9

    Danger

    Geoffrey said
    You can change the UI to "Danger" to reproduce something similar to what you're styling.
    I tried to take a look at UI = "Danger", but saw no effect. I am guessing it is also part of v2.5?

    function callAlert(){
        Ext.MessageBox.show({
            title: 'Css Tester',
            msg: 'Please correct invalid fields.',
            buttons: Ext.MessageBox.OK,
            ui: "danger"
        });     
    };
  10. #10
    Quote Originally Posted by Daniil View Post
    Here is an example demonstrating how to change the Button's background. I used "background-color" for sake of ease. You can override the background-image and other related background properties if needed.
    Honestly, this is the least of my concerns. I really need the main (first) question about overrides answered... but...

    I don't see how I can apply a class to the button (Ext.MessageBox.OK) in the message box, and the class I apply to the message box (window-error) does not seem to be applied to the button
    Ext.MessageBox.show({           
            title: 'Css Tester',
            msg: 'Please correct invalid fields.',
            buttons: Ext.MessageBox.OK,
            icon: Ext.MessageBox.ERROR,
            cls: "window-error"         
    });
    When I use your example, with my styles , in IE8, shows the default blue button, not the new image on the sprite, or the border.

            .my-button.x-btn-default-small .x-btn-tl,
            .my-button.x-btn-default-small .x-btn-tr,
            .my-button.x-btn-default-small .x-btn-tc,
            .my-button.x-btn-default-small .x-btn-bl,
            .my-button.x-btn-default-small .x-btn-br,
            .my-button.x-btn-default-small .x-btn-bc,
            .my-button.x-btn-default-small .x-btn-ml,
            .my-button.x-btn-default-small .x-btn-mr,
            .my-button.x-btn-default-small .x-btn-mc {
                background: url("/UI/ButtonIcons/buttons-sprite.png") no-repeat scroll 100% -4px transparent;
            }
     
            .my-button.x-btn-default-small-over .x-btn-tl,
            .my-button.x-btn-default-small-over .x-btn-tr,
            .my-button.x-btn-default-small-over .x-btn-tc,
            .my-button.x-btn-default-small-over .x-btn-bl,
            .my-button.x-btn-default-small-over .x-btn-br,
            .my-button.x-btn-default-small-over .x-btn-bc,
            .my-button.x-btn-default-small-over .x-btn-ml,
            .my-button.x-btn-default-small-over .x-btn-mr,
            .my-button.x-btn-default-small-over .x-btn-mc {
                 background-position: 0 -64px;
                 border: 1px solid #FD9500;
            }
    If I add the border to your example it adds border to every cell you have a class for. I'm not asking you to do my work for me, but can you make your example css work in my example?
    Last edited by betamax; Jan 10, 2014 at 6:52 PM.
Page 1 of 2 12 LastLast

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