Блог Сергея Князева

Скрипты
Стильный вид Ajax Окон для Ucoz

Стильный вид Ajax Окон для Ucoz

14.11.20172631
Стандартное отображение ajax окон на Ucoz не подходит для сайтов. Предлагаю рассмотреть пять вариантов ajax окон. Все они выполнены в одной стилистической форме, но в разных цветовых окрасках.

Основы Ajax окон

Основной особенностью окон для ucoz является, то что для замены внешнего вида и функционала окон, необходимо вставить новые стили CSS. Установка стилей займёт у вас несколько минут. Самой трудной задачей при этом является сам выбор. Подобрать интересный вид окон – это действительно трудная задача.


Установка

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


Далее необходимо вставить следующий CSS код в стили сайта. Если вы до этого уже устанавливали похожие стили, необходимо будет их удалить. Для поиска в стилях рекомендую использовать быстрый поиск с помощью клавиш CTRL+F.

Код
/* 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(/ajax/tool-sprites.png) no-repeat!important; margin-left:5px!important; margin-top:2px!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(/ajax/border.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(/ajax/top.gif) repeat-x 0 0!important; padding: 11px 10px 0px 10px!important;}  
.xw-tr {background:url(/ajax/border.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(/ajax/border.png) repeat-y 0 0!important; padding-left:5px!important;}  
.xw-mr {background:url(/ajax/border.png) repeat-y 100% 0!important; padding-right:5px!important;}  
.xw-bl {background:url(/ajax/border.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(/ajax/border.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(/ajax/border.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: #bcbcbc!important; text-shadow: 1px 1px 1px #000!important; line-height: 15px!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;}  
/*=================================================*/


После обновления страницы сайта, изменения вступят в силу. Если стили CSS находятся в отдельном файле, необходимо будет обновить его для применения сохранения.


Заключение

Сегодня мы рассмотрели ещё один вариант вида ajax окон для сайтов системы Ucoz. Если вы интересуетесь другими вариантами – Просмотрите тут 3 новых вида ajax окон для ucoz. Если у вас возникли вопросы по установке или изменению данного варианта, опишите вашу проблему в комментариях.

Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (1)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
После того, как оцениваешь материал - сердечко пропадает. Исправь
2