PDA

View Full Version : [CLOSED] CSS Styling of MessageBox



betamax
Jan 09, 2014, 7:00 PM
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>

betamax
Jan 09, 2014, 8:41 PM
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

Daniil
Jan 10, 2014, 3:46 AM
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.

geoffrey.mcgill
Jan 10, 2014, 4:36 AM
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.

Daniil
Jan 10, 2014, 7:05 AM
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>

betamax
Jan 10, 2014, 2:27 PM
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.

betamax
Jan 10, 2014, 2:30 PM
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?

betamax
Jan 10, 2014, 3:05 PM
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).

betamax
Jan 10, 2014, 3:12 PM
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"
});
};

betamax
Jan 10, 2014, 3:30 PM
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?

Daniil
Jan 13, 2014, 4:07 AM
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

Daniil
Jan 13, 2014, 4:13 AM
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.

Daniil
Jan 13, 2014, 4:23 AM
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?
http://examples2.ext.net/#/Buttons/Basic/ImageButton/

betamax
Jan 13, 2014, 9:12 PM
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.

Daniil
Jan 14, 2014, 2:49 AM
Nice! Do you mind we close the thread?

betamax
Jan 14, 2014, 1:26 PM
Mark as Closed. thnx