Новые Ajax окна by 7UARTS для uCoz

1048 просмотров andruha061 28.05.2017

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 */
}

Если вам не подошли заготовленные стили, вы все можете настроить под себя. В коде указано где и для чего используется определенный цвет.
На этом у меня все. Спасибо за внимание.

Теги: Ajax, стили, cкрипты