4 Attachment(s)
[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:
Code:
.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.
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>