Ajax-окна как на uNet для uCoz

2927 просмотров Alan_Writer 30.05.2013

Ajax-окна как на uNet для uCoz. Стилизация обычных Ajax-окон под uNet, примерно так же выглядят окна и в Windows Vista. Прекрасная замена старого, уже изрядно надоевшего дизайна. Новый вариант - гораздо современнее: прозрачные темные края и блики делают вид очень красивым и стильным. Ваш сайт станет намного более привлекательным, независимо от тематики.

Установка:

Все что необходимо, это прописать стили новых окон в вашем основном CSS-файле, при этом если до этого вы использовали какие-то другие - их уберите, должны быть только одни:
Код
.x-sh, .x-sh *{overflow:hidden;margin:0;border:0}
.xsl *,.xsr *,.xsb * {height:100%}
.x-sh .xstl{padding-top:6px;background:transparent url(http://s1.uid.me/img/d/1/shadowh.png) no-repeat 0 0;}
.x-sh .xsml{background:transparent url(http://s1.uid.me/img/d/1/shadowh.png) repeat-y -6px 0;}
.x-sh .xstr{padding-top:6px;background:transparent url(http://s1.uid.me/img/d/1/shadowh.png) no-repeat -18px 0;}
.x-sh .xsmr{background:transparent url(http://s1.uid.me/img/d/1/shadowh.png) repeat-y -12px 0;}
.x-sh .xsbl{padding-left:6px;background:transparent url(http://s1.uid.me/img/d/1/shadowv.png) no-repeat 0 -6px}
.x-sh .xsbc{background:transparent url(http://s1.uid.me/img/d/1/shadowv.png) repeat-x 0 -12px;}
.x-sh .xsbr{padding-right:6px;background:transparent url(http://s1.uid.me/img/d/1/shadowv.png) no-repeat right 0}
.xw-tl{background:url(http://s1.uid.me/img/d/1/wframe-leftc.png) no-repeat 0 0;padding-left:6px;position:relative;zoom:1}
.xw-tr{background:url(http://s1.uid.me/img/d/1/wframe-rightc.png) no-repeat 100% 0;padding-right:6px;position:relative;zoom:1}
.xw-tc{background:url(http://s1.uid.me/img/d/1/wframe-horiz.png) repeat-x 0 0;font-size:1px;line-height:1px;overflow:hidden;position:relative;zoom:1}
.xw-tsps{height:6px}
.xw-ml{background:url(http://s1.uid.me/img/d/1/wframe-vert.png) repeat-y 0 0;padding-left:6px;zoom:1}
.xw-mr{background:url(http://s1.uid.me/img/d/1/wframe-vert.png) repeat-y 100% 0;padding-right:6px;zoom:1}
.xw-plain .xw-mc{border:1px solid #A0A0A8;padding:0;margin:0;font:normal 11px tahoma,arial,helvetica,sans-serif;background:white;color:black;zoom:1;}
.xw-bl{background:url(http://s1.uid.me/img/d/1/wframe-leftc.png) no-repeat 0 100%;padding-left:6px;zoom:1}
.xw-br{background:url(http://s1.uid.me/img/d/1/wframe-rightc.png) no-repeat 100% 100%;padding-right:6px;zoom:1}
.xw-bc{background:url(http://s1.uid.me/img/d/1/wframe-horiz.png) repeat-x 0 100%;overflow:hidden;font-size:1px;line-height:1px;height:6px}
DIV.xw-bcm{height:2px}
.xw-resize .xw-tl {cursor:nw-resize}
.xw-resize .xw-tr {cursor:ne-resize}
.xw-resize .xw-sps,.xw-resize .xw-tsps {cursor:n-resize}
.xw-resize .xw-ml {cursor:w-resize}
.xw-resize .xw-mr {cursor:e-resize}
.xw-resize .xw-mc {cursor:default}
.xw-resize .xw-bl {cursor:sw-resize}
.xw-resize .xw-br {cursor:se-resize}
.xw-resize .xw-bc {cursor:s-resize}
.xw-plain .xw-body{border:1px solid #202028;background:transparent !important;}
.xw-sps {height:4px;overflow:hidden;position:absolute;width:100%;z-index:1}
.xw-hdr{padding:1px 0 0 0;white-space:nowrap;zoom:1;height:25px}
.xw-plain .xw-icon {height:16px;width:16px;margin:6px 4px 0 0;vertical-align:-3px;}
.xw-hdr-text{color:#B0B0B0;font:bold 11px tahoma,arial,verdana,sans-serif;line-height:24px;vertical-align:2px}
.xw-active .xw-hdr-text {color:white}
.xw-disabled, .xw-actlayer {background:url(http://s1.uid.me/img/1px.gif)}
.xw-active .xw-actlayer {display:none}
.xw-draggable,.xw-draggable .xw-hdr-text{cursor:move !important}
.xt{position:relative; width:25px; height:18px; overflow:hidden; float:right; display:inline; cursor:pointer; background:url(http://s1.uid.me/img/d/1/wbuttons.png) no-repeat; margin: 0px !important;}
.xt-close {width:44px !important; background-position:-44px 0}
.xt-close2 {width:44px !important;background:url(http://s1.uid.me/img/d/1/wbuttonsc.png) no-repeat -44px 0}
.xt-mini{width:26px !important;background-position:-26px -18px}
.xt-maxi{background-position:-25px -36px}
.xt-rest{background-position:-25px -54px}
.xt-maxi2{width:26px !important;background:url(http://s1.uid.me/img/d/1/wbuttonsc.png) no-repeat -26px -36px}
.xt-rest2{width:26px !important;background:url(http://s1.uid.me/img/d/1/wbuttonsc.png) no-repeat -26px -54px}
.xt-reload{background-position:-25px -72px;margin-right:5px}
.xt-help{background-position:-25px -90px;margin-right:5px}
.xt-save{background-position:-25px -108px;margin-right:5px}
.xt-close-over{background-position:0 0}
.xt-mini-over{background-position:0 -18px}
.xt-maxi-over{background-position:0 -36px}
.xt-rest-over{background-position:0 -54px}
.xt-reload-over{background-position:0 -72px}
.xt-help-over{background-position:0 -90px}
.xt-save-over{background-position:0 -108px}
.xw-blank {background:#a3bae9;opacity:0.4;filter:Alpha(Opacity='40');overflow:hidden}

Вот и все готово!

Теги: Ajax-окна для uCoz, Ajax-окна как на uNet для uCoz, Ajax-окна, Ajax-окна как на uNet, вид Ajax-окон, для uCoz
0 Комментариев