» »

Ajax окно сайта ucoz в белой гамме цвета


Это простое по своему стилю Ajax окно сайта ucoz в белом оттенке которое явно только подойдет под свой оттенок цвета. Так как основном светлый вид идет только на аналогичный. У него красная кнопка закрыть и она будет только одна. И если вы немного соображаете в CSS то вам будет несложно поменять ее, так как только нудно сменить и к примеру поставить крестик. Но я в этом разделе вам представлю пару кнопок, которые возможно вы решите изменить.

CSS:

Код
/* Обводка вокруг окон */  
.xw-plain, .xw-resize, .xw-active {  
  background: rgba(0,0,0,0.15);  
  padding: 10px !important;  
  border-radius: 5px; }  
   
/* TITLE окон */  
.x-sh, .xsl { display: none !important; }  
   
.xw-hdr {  
  text-align: left !important;  
  white-space: nowrap !important;  
  padding: 1px 0 0 0 !important;  
  white-space: nowrap !important;  
  zoom: 1 !important;  
  height: 35px !important; }  
   
/* Название ajax окна*/  
.xw-hdr-text {  
  vertical-align: 3px!important;  
  cursor: default!important;  
  color: #999 !important;  
  font: normal 12px/13px Tahoma,Arial !important;  
  line-height: 35px!important;  
  margin-left: 10px; }  
   
.xw-sps, .xw-tc, .xw-tr {  
  border-bottom: 0px solid #eee;  
  color: #000 !important;  
  font-size: 1.2em !important }  
   
/* Кнопка закрыть окно */  
.xt {  
  width: 22px !important;  
  height: 22px !important;  
  background: url('http://zornet.ru/CSS-ZORNET/derkamer/ret/13974800.png') no-repeat !important;  
  float: right !important;  
  border: 0 !important;  
  text-decoration: none !important;  
  margin-top: 7px !important; }  
   
.xt-close { background-position: 0 0 !important; }  
   
.xt-close-over { background-position: 0 -22 !important; }  
   
/* Кнопки сворачивания и разворачивания окон (Кнопки убраны) */  
.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;  
  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;  
  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; }  
   
/* Вид фона сайлов */  
.myWinTD2 { background: rgb(250, 250, 250) !important; }  
   
/* Вид фона при наведении на поле со смайлом */  
.myWinCont fieldset {  
  border: 1px solid #eee !important;  
  padding: 2px 5px !important;  
  margin-bottom: 3px !important; }  
   
/* Вид обводки в архиве опроса */  
.myWinPollTd {  
  background: #fff !important;  
  text-align: center !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 {  
  font-weight: initial !important;  
  font-size: 11px !important;  
  color: rgb(63, 63, 63) !important; }


Кнопки:

11.02.2015 Просмотров: 649 Комментарий: (2)

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

Материал разместил

Комментарий: 2
FeStemBer
FeStemBer 29.12.2015 14:241
0
Все отлично но видя кнопку, что она не дает эффекта, как то уже не то.
Kosten
Kosten 29.12.2015 14:412
0
Ну и что что там только одна кнопка нужно смотреть так то весь дизайн а не заострять на чем то одном.
avatar