Новые Ajax окна by7UARTS для uCoz - Модальные окна - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Модальные окна


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


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

Важно!

При копировании материала указывать ссылку на источник.

- 570
- 02-Июля-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта