Ajax-окна в системе uCoz используются практически везде, для авторизации, для просмотра репутации и наград, для кнопок загрузки материалов и так далее.
Стандартный вид данных окон после обновления uCoz выглядит довольно не плохо, но я думаю практически каждому хотелось бы украсить и сделать все по своему. В этом материале я подготовил для вас несколько расцветок для ajax-окон uCoz.
В интернете полно материалов связанных с Ajax окнами, и довольно много стилей, но после обновления uCoz большая часть из них перестала работать или отображается криво, поэтому я для вас подготовил стили для новых Ajax-окон uCoz.
И так, перейдем к установке :
1. Выбираем стиль который вам больше нравится или который подходит под ваш дизайн сайта.
2. Копируем код нужного стиля и вставляем в CSS-стили сайта через панель управления.
Стили :
1. Белый :
.xw-hdr-text {
vertical-align: 3px!important;
cursor: default!important;
color: #999 !important;
margin-left: 10px; }
.xt-maxi { display: none !important; }
.xt-mini { display: none !important; }
.xw-bc, .xw-mr, .xw-bl, .xw-br, .xw-ml, .xw-mc {
background: #fff !important; /* ЦВЕТ ФОНА АJAX */
border: 0 !important;
border-radius: 0px;
moz-border-radius: 0px;
webkit-border-radius: 3px; }
.xw-body {
border: 0 !important;
padding-left: 7px !important;
padding-right: 1px !important; }
.xw-tl { border-bottom: 1px solid #eee; } /* ЦВЕТ ЛИНИИ МЕЖДУ ШАПКОЙ И СОДЕРЖИМЫМ АJAX */
.xw-tl, .xw-tr, .xw-tc {
background: #FAFAFA !important; /* ЦВЕТ ФОНА ШАПКИ АJAX */
border-radius: 3px 3px 0 0 !important; }
.xw-sps { display: none !important; }
.myWinCont { width: 100% !important; }
.xw-body {
border: 0 !important;
padding-left: 2px !important;
padding-right: 1px !important; }
.xw-ml {
padding-left: 1px !important;
padding-bottom: 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; }
.xw-bl { display: none !important; }
.myWinTD1 {
background: rgb(255, 255, 255) !important;
border-bottom: 1px solid rgb(250, 250, 250) !important; }
.myWinPollT {
background: rgb(243, 243, 243) !important;
float: left !important;
margin-right: 257px !important;
width: 100% !important; }
.myWinPollG { display: none !important; }
.myWinCont strong, b {
color: rgb(63, 63, 63) !important; }
2. Темный фон шапки и темно-голубой фон содержания :
.xw-hdr-text {
vertical-align: 3px!important;
cursor: default!important;
color: #ffffff !important;
margin-left: 10px; }
.xt-maxi { display: none !important; }
.xt-mini { display: none !important; }
.xw-bc, .xw-mr, .xw-bl, .xw-br, .xw-ml, .xw-mc {
background: #2980b9 !important; /* ЦВЕТ ФОНА АJAX */
border: 0 !important;
border-radius: 0px;
moz-border-radius: 0px;
webkit-border-radius: 3px; }
.xw-body {
border: 0 !important;
padding-left: 7px !important;
padding-right: 1px !important; }
.xw-tl { border-bottom: 1px solid #2980b9; } /* ЦВЕТ ЛИНИИ МЕЖДУ ШАПКОЙ И СОДЕРЖИМЫМ АJAX */
.xw-tl, .xw-tr, .xw-tc {
background: #2c3e50 !important; /* ЦВЕТ ФОНА ШАПКИ АJAX */
border-radius: 3px 3px 0 0 !important; }
.xw-sps { display: none !important; }
.myWinCont { width: 100% !important; }
.xw-body {
border: 0 !important;
padding-left: 2px !important;
padding-right: 1px !important; }
.xw-ml {
padding-left: 1px !important;
padding-bottom: 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; }
.xw-bl { display: none !important; }
.myWinTD1 {
background: rgb(255, 255, 255) !important;
border-bottom: 1px solid rgb(250, 250, 250) !important; }
.myWinPollT {
background: rgb(243, 243, 243) !important;
float: left !important;
margin-right: 257px !important;
width: 100% !important; }
.myWinPollG { display: none !important; }
.myWinCont strong, b {
color: rgb(63, 63, 63) !important; }
.myWinCont, .myWinCont td, .myWinCont dl, .myWinCont dt {
color: #fff; /* ЦВЕТ ТЕКСТА СОДЕРЖИМОГО АJAX */
}
3. Серый :
.xw-hdr-text {
vertical-align: 3px!important;
cursor: default!important;
color: #ffffff !important;
margin-left: 10px; }
.xt-maxi { display: none !important; }
.xt-mini { display: none !important; }
.xw-bc, .xw-mr, .xw-bl, .xw-br, .xw-ml, .xw-mc {
background: #ecf0f1 !important; /* ЦВЕТ ФОНА АJAX */
border: 0 !important;
border-radius: 0px;
moz-border-radius: 0px;
webkit-border-radius: 3px; }
.xw-body {
border: 0 !important;
padding-left: 7px !important;
padding-right: 1px !important; }
.xw-tl { border-bottom: 1px solid #bdc3c7; } /* ЦВЕТ ЛИНИИ МЕЖДУ ШАПКОЙ И СОДЕРЖИМЫМ АJAX */
.xw-tl, .xw-tr, .xw-tc {
background: #bdc3c7 !important; /* ЦВЕТ ФОНА ШАПКИ АJAX */
border-radius: 3px 3px 0 0 !important; }
.xw-sps { display: none !important; }
.myWinCont { width: 100% !important; }
.xw-body {
border: 0 !important;
padding-left: 2px !important;
padding-right: 1px !important; }
.xw-ml {
padding-left: 1px !important;
padding-bottom: 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; }
.xw-bl { display: none !important; }
.myWinTD1 {
background: rgb(255, 255, 255) !important;
border-bottom: 1px solid rgb(250, 250, 250) !important; }
.myWinPollT {
background: rgb(243, 243, 243) !important;
float: left !important;
margin-right: 257px !important;
width: 100% !important; }
.myWinPollG { display: none !important; }
.myWinCont strong, b {
color: rgb(63, 63, 63) !important; }
.myWinCont, .myWinCont td, .myWinCont dl, .myWinCont dt {
color: #bdc3c7;/* ЦВЕТ ТЕКСТА СОДЕРЖИМОГО АJAX */
}
Если вам не подошли заготовленные стили, вы все можете настроить под себя. В коде указано где и для чего используется определенный цвет.
На этом у меня все. Спасибо за внимание.
