Новый стильный вид Ajax Окон для Ucoz, установите простой скрипт Ajax окон на свой сайт юкоз

12.12.2017

Новый стильный вид Ajax Окон для Ucoz, установите простой скрипт Ajax окон на свой сайт юкоз

>

14.11.2017

Стандартное отображение 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. Если у вас возникли вопросы по установке или изменению данного варианта, опишите вашу проблему в комментариях.

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *