[CLOSED] CSS Styling of MessageBox

Page 2 of 2 FirstFirst 12
  1. #11
    Quote Originally Posted by betamax View Post
    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).
    Well, it is a CSS issue. The more specific selector, the more chances the rule will be applied.

    This selector
    .x-nbr .x-window-default
    is more specific than
    div.window-error
    Please try:
    .x-nbr div.window-error
  2. #12
    Quote Originally Posted by betamax View Post
    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"
        });     
    };
    Yes, it is going to be a part of v2.5. Hopefully.
  3. #13
    Quote Originally Posted by betamax View Post
    but can you make your example css work in my example?
    Does this help?

    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 */
            .window-error .x-btn-default-small, .x-nlg .window-error .x-btn-default-small {
                background-image: none; /* set up your background */
                background-color: green;
            }
     
                .window-error .x-btn-default-small-over, .x-nlg .window-error .x-btn-default-small-over {
                    background-color: yellow;
                }
     
            /* For IE < 9 */
            .window-error .x-btn-default-small .x-btn-tl,
            .window-error .x-btn-default-small .x-btn-tr,
            .window-error .x-btn-default-small .x-btn-tc,
            .window-error .x-btn-default-small .x-btn-bl,
            .window-error .x-btn-default-small .x-btn-br,
            .window-error .x-btn-default-small .x-btn-bc,
            .window-error .x-btn-default-small .x-btn-ml,
            .window-error .x-btn-default-small .x-btn-mr,
            .window-error .x-btn-default-small .x-btn-mc {
                background-image: none;
                background-color: green;
            }
     
            .window-error .x-btn-default-small-over .x-btn-tl,
            .window-error .x-btn-default-small-over .x-btn-tr,
            .window-error .x-btn-default-small-over .x-btn-tc,
            .window-error .x-btn-default-small-over .x-btn-bl,
            .window-error .x-btn-default-small-over .x-btn-br,
            .window-error .x-btn-default-small-over .x-btn-bc,
            .window-error .x-btn-default-small-over .x-btn-ml,
            .window-error .x-btn-default-small-over .x-btn-mr,
            .window-error .x-btn-default-small-over .x-btn-mc {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
                <Listeners>
                    <DocumentReady Handler="Ext.MessageBox.show({          
                                                title: 'Css Tester',
                                                msg: 'Please correct invalid fields.',
                                                buttons: Ext.MessageBox.OK,
                                                icon: Ext.MessageBox.ERROR,
                                                cls: 'window-error'
                                            });" />
                </Listeners>
            </ext:ResourceManager>
        </form>
    </body>
    </html>
    shows the default blue button, not the new image on the sprite
    I think you might need to override "background-image", not "background". Because "background-image" is more specific.

    If I add the border to your example it adds border to every cell you have a class for.
    I think it is not that simple to apply the borders for the Button in IE <= 8. It doesn't support round borders, therefore round borders are done via a complicated markup with a HTML table and respective images for background.

    Have you ever thought about using an ImageButton?
    https://examples2.ext.net/#/Buttons/Basic/ImageButton/
  4. #14
    I took the suggestion and busted up the shorthand background into its parts, and that took care of almost all of my issues with borders and hover behavior.

    Adding .x-nbr isolated the older IE's which is the behavior I was looking for.

    And I was able to add a border to all the bordering cell elements to get the effect I was looking for. I am fine with not having the rounded corners in the older browsers.

    I appreciate your insights. Juast a few simple tweaks and everything is looking great. Thanks Daniil.
  5. #15
    Nice! Do you mind we close the thread?
  6. #16
    Mark as Closed. thnx
Page 2 of 2 FirstFirst 12

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