» »

Светло синие ajax окна DYG для uCoz


Светло синие ajax окна DYG для uCoz

Безусловно это стильное по своему ajax-окон в светло синей гамме цвета, для тех веб мастеров, кто не перешел на новую систему. А таких посмотрю очень много, и вот для них окно, самым распространенный оттенком цвета, которое может подойти на любую тематику. Все очень просто сделано, вверх у него синий, а вот само ajax окно остальное в белом цвете. Немного сделано в 3D и также в таком же оттенке, только темнее кнопка отключить, которая форме куба.

Можно по стилям сказать простое, так как содержит 2 основных ссылки, которые как раз отвечают за верх. Но если оно вам понравилось, но вот по гамме не идет на ресурс, то вы можете все изменить на фотошоп. Все функций идут с ним, но больше оно на сайте для красоты, и здесь больше похоже на модальное окно, которое на портал общий или совершенно другую тему подойдет и будет дополнять дизайн сайта.

Рассмотрим 2 установки:

1) В CSS

Код
/* AJAX
  ============================================================================*/  
.x-sh .xstl{padding-top:6px; background:none!important;}  
.x-sh .xsml{background:none!important;}  
.x-sh .xstr{padding-top:6px; background:none!important;}  
.x-sh .xsmr{background:none!important;}  
.x-sh .xsbl{padding-left:6px;background:none!important;}  
.x-sh .xsbc{background:none!important;}  
.x-sh .xsbr{padding-right:6px;background:none!important;}  
.xt {background:transparent url(http://zornet.ru/Ajaxoskrip/Aster/s_2.gif) no-repeat!important; margin-left:5px!important; margin-top:4px!important;}  
.xt-close{background-position:0 0!important;}  
.xt-close-over{background-position:-15px 0!important;}  
.xt-mini{background-position:0 -15px!important;}  
.xt-mini-over{background-position:-15px -15px!important;}  
.xt-maxi{background-position:0 -30px!important;}  
.xt-maxi-over{background-position:-15px -30px!important;}  
.xt-rest{background-position:0 -45px!important;}  
.xt-rest-over{background-position:-15px -45px!important;}  
.xw-tl {background:url(http://zornet.ru/Ajaxoskrip/Aster/ca86.png) repeat-y 0 0!important; padding-left:5px!important; -webkit-border-radius: 5px 0px 0px 0px; -moz-border-radius: 5px 0px 0px 0px; border-radius: 5px 0px 0px 0px;}  
.xw-tc {background:url(http://zornet.ru/Ajaxoskrip/Aster/s_1.gif) repeat-x 0 0!important; padding: 8px 10px 4px 10px!important;}  
.xw-tr {background:url(http://zornet.ru/Ajaxoskrip/Aster/ca86.png) repeat-y 100% 0!important; padding-right:5px!important; -webkit-border-radius: 0px 5px 0px 0px; -moz-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;}  
.xw-ml {background:url(http://zornet.ru/Ajaxoskrip/Aster/ca86.png) repeat-y 0 0!important; padding-left:5px!important;}  
.xw-mr {background:url(http://zornet.ru/Ajaxoskrip/Aster/ca86.png) repeat-y 100% 0!important; padding-right:5px!important;}  
.xw-bl {background:url(http://zornet.ru/Ajaxoskrip/Aster/ca86.png) no-repeat 0 100%!important; padding-left:5px!important; -webkit-border-radius: 0px 0px 0px 5px; -moz-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px;}  
.xw-br {background:url(http://zornet.ru/Ajaxoskrip/Aster/ca86.png) no-repeat 100% 100%!important;padding-right:5px!important; -webkit-border-radius: 0px 0px 5px 0px; -moz-border-radius: 0px 0px 5px 0px; border-radius: 0px 0px 5px 0px;}  
.xw-bc {background:url(http://zornet.ru/Ajaxoskrip/Aster/ca86.png) repeat-x 0 100%!important; height:5px!important;}  
.xw-hdr-text {padding:0px!important;}  
.xw-hdr-text {font: 12px Verdana,Arial,Helvetica, sans-serif!important; color: #fff!important; text-shadow: 1px 1px 1px #000!important; line-height: 22px!important; vertical-align:2px!important;}  
.xw-plain .xw-mc {border: none!important; padding:0!important; margin:0!important; font: 11px Verdana,Arial,Helvetica, sans-serif!important; color:#444!important; background:#f9f9f9!important;}  
.xw-body {padding:0!important; margin:0!important; box-shadow:inset 0px 1px 3px #666; -webkit-box-shadow:inset 0px 1px 3px #666; -moz-box-shadow:inset 0px 1px 3px #666;}  
.xw-plain .xw-body{padding: 10px!important; border: none!important;}  
.xw-blank {background:#fff!important;}  
.myWinTD1 {background:none!important;}
#nav-mid {}
/*--------------------- Header end ---------------------*/


2) Копируем и ставим вверх сайта в самый низ:

Светлое ajax окно сайта

Код
<style type="text/css">  
@import url('http://zornet.ru/Ajaxoskrip/Aster/Ajax-R3.css') all;  
</style>


Вот вся установка, но если у вас до этого стояло дизайнерское окно, то вам нужно его убрать, а потом уже ставить новое.
10.08.2016 Просмотров: 449 Комментарий: (8)

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

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

Комментарий: 7
Scheme
Scheme 10.08.2016 23:351
0
Не сказал бы, что так много, но больше попадаются сайты, как раз с админ баром, где это окно можно разместить. А вот интересно новые сразу идут и перевести можно или так остается.
Сопрано
Сопрано 10.08.2016 23:402
0
Что то ты меня Scheme запутал, просто у меня сайт на новой системе, на обновление. Но поставил давно туда окно и оно у меня показывает, а не черно белое, как то так. Значит и на новые можно поставить, так проверьте, у кого есть тестовый сайт.
Kosten
Kosten 10.08.2016 23:453
0
Что спорить. сам на тестовом проверял, где все обновлено и нет админ бара, и изображение с него снимал. Так выходит работает, но почему то оставляют темное, которое не понять по размерам и под каждую функцию. Но заметил, что его стали также переделывать. а точнее просто цвет менять, с черного на светлый, приходилось видеть. не очень, эти намного лучше и по дизайн можно выбрать.
tsakonter
tsakonter 10.08.2016 23:594
0
Не понимаю, а что ссылки дают остальные, они так для красоты. Хотя видно, что основные 2 ссылки, это синий цвет и кнопка.
Сопрано
Сопрано 11.08.2016 02:045
0
Есть окна с одной ссылкой, только на кнопку, здесь как видно только 2, значит только перекрасить, если кому надо, только фотошоп в этом поможет, а на стилях лучше было, но поставил так посмотреть и не плохо на темном сайте даже.
Сопрано
Сопрано 11.08.2016 02:176
0
Все понятно, хоть на новый админ бар перейдете и поставите стили на окно, то и будет такое, которое поставили.

А вот так делают с системного Ajax окна.

feliksteg
feliksteg 11.08.2016 22:587
0
Вот как раз на этот сайт подойдёт отлично, как будто под него и делали и учёт соответствует саму сайту.
avatar