Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

Понравился материал? Поделись с ним в социальных сетях !

Материал пренадлежит данному сайту и ссылка на источник обязательна.
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

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

Дата и время публикации : 17.Май.17 в 12:32 | Раздел : Скрипты для uCoz


Параметр Значение
Дата публик. 17.Май.17, Среда, 12:32
Авторский
Адапт. дизайн
Обновления Не производились
Просмотрен 241

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


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

Оставленные комментарии :

Кондрашева АнастасияДобавлено 17.Май.17 в 21:07 Спам
спасибо огрооомное за данные стили, я долго не могла найти плоские ajax окна. +++ автору

Андрей КононДобавлено 17.Май.17 в 22:24
рад что вам понравилось !


Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Анимированные социальные кнопки на CSS3 для uCoz

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