Поиск по сайту

Каждый из пользователей хоть раз изменял шаблон на своем сайте или корректировал какую-то его часть. Сегодня я решил выложить список небольших утилит облегчающий работу вебмастера. 1. CSS transform генератор ( http://demos.aimweb.name/css-transform-generator/ ) Описание : Позволяет эмулировать в IE свойства css3 transform такие как: поворот, искажение, масштабирование (без использования JavaScript'a). Свойство CSS transform позволяет манипулировать блоками, поворачивая, искажая или масштабируя их без использования Flash или JavaScript. К сожалению, браузер IE 8 и его более ранние версии не поддерживают CSS-трансформации. Но подобного эффекта можно достичь с помощью фильтра Matrix. Данный инструмент проводит преобразование значений CSS3 transform в параметры filter:Matrix, который позволит отобразить результат в IE6-8. 2. CSS3 Generator ( http://css3generator.com ) Описание : Один из новый генераторов CSS3 кода , достаточно удобный, но к сожалению ( на мой взгляд) не поддерживающий XAK-и. Удобен тем, что вы сразу видите какие браузеры будут нормально отображать код. Поддерживает все нововведения. 3. css3maker (http://www.css3maker.com) - не могу его не отметить. как самый знаменитый генератор css кода 4.Генератор градиентов http://www.colorzill...radient-editor/ 5.Генератор теней http://css3gen.com/box-shadow/ 6.Генератор меню CSS Menu Generator 7.полезная штука для продакшн CSS Formatter and Optimiser 8.Революция в генераторах. имеет огромное количество настроек. Поддерживает вывод кода в LESS-SASS http://enjoycss.com/ 9. Простой генератор теней и скруглений, особое отличие в нем это то что выдает в css3 + фильтры под IE http://prohtml.net/services/unicss3gen

Озадачился оптимизацией скриптов при загрузке сайта, поскольку Гугля пишет рейтинг 56/100 в этой части и предлагает: Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Количество блокирующих скриптов на странице: 24. Количество блокирующих ресурсов CSS на странице: 9. Они замедляют отображение контента. В header.tpl отключил некоторые скрипты, например Гугл-карты, и карусели, поскольку всё равно они не используются: <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="shortcut icon" href="{$estate_folder}/template/frontend/{$current_theme_name}/img/favicon.png" type="image/png"> <link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/css/bootstrap.css" type="text/css"> <link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/css/bootstrap-responsive.css" type="text/css"> <link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/libraries/chosen/chosen.css" type="text/css"> <link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/libraries/bootstrap-fileupload/bootstrap-fileupload.css" type="text/css"> <link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/libraries/jquery-ui/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" type="text/css"> <link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/css/realia-blue.css" type="text/css"> <link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/css/bootstrap.corrections.css" type="text/css"> <script type="text/javascript" src="https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU"></script> <!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=true"></script> --> <!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script> --> {literal} <!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]--> {/literal} <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/jquery.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/jquery.ezmark.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/jquery.currency.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/jquery.cookie.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/retina.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/bootstrap.min.js"></script> <!-- <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/carousel.js"></script> --> <!-- <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/gmap3.min.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/gmap3.infobox.min.js"></script> --> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/libraries/jquery-ui/js/jquery-ui.min.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/libraries/chosen/chosen.jquery.min.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/libraries/iosslider/_src/jquery.iosslider.min.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/libraries/bootstrap-fileupload/bootstrap-fileupload.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/realia.js"></script> <script type="text/javascript" src="{$estate_folder}/apps/client/js/clientorderajax.js"></script> <script type="text/javascript" src="{$estate_folder}/js/estate.js"></script> <script type="text/javascript" src="{$estate_folder}/apps/system/js/sitebillcore.js"></script> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/interface.js"></script> <link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/css/jqueryslidemenu.css" type="text/css"> <script type="text/javascript" src="{$estate_folder}/template/frontend/{$current_theme_name}/js/jqueryslidemenu.js"></script> Что можно еще выключить? (Шаблон Realia)

Недавно пользователи спрашивали как поменять цвет на определенной категории объекта. для начала создадим стили в котором мы определим сам цвет заливки и шрифта Открываем файл стилей (я предпочитаю этот bootstrap.corrections.css ) и в конец файла вставляем следующее содержимое: .reder { background-color:#848080; color:white; } После открывает файл header.tpl и добавляем следующий код : <script type="text/javascript" > $(document).ready(function() { $("#topic_id [value='2'],#topic_id [value='11'],#topic_id [value='3']").toggleClass("reder"); }); </script> где value 2,11,3 это ID категорий типа недвижимости. Узнать ID можно в админке в разделе "структура" В итоге мы получаем

Как убрать точки которые находятся слева ? добавляем следующее содержимое в самый конец файла bootstrap.corrections.css .complaint_this_adv_form ul li{ list-style-type: none; margin-left: -20px; }

Надеюсь админ создаст отдельный раздел для этого и создаст в ней (переименует мою тему) В данном разделе пользователи смогут подчеркнуть для себя интересные идеи которые смогут применить на своем сайте Первый урок (переворот картинки без использования Jquery) начнем 1. Для начала создадим область (container) в который поместим 2 блока с содержимым box-front и box-back <div class="container"> <div class="box-front"> Передняя сторона </div> <div class="box-back"> Задняя сторона </div></div> 2. Когда мы прописали блоки приступим к написанию стилей и соответственно анимации. <style>.container{ perspective: 800px; -webkit-perspective: 800px; background: radial-gradient(#e0e0e0, #aaa); width:100%; height:300px; border-radius:6px; position:relative; }.box-front, .box-back{ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; width:50%; height:80%; position:absolute; top:10%; left:25%; background:#476AF1; transition:0.8s; text-align:center; color:#FFF; }.box-back{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); background-color:#7E0002; }.container:hover .box-front{ /*пишем эффект при наведении мышкой*/ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); }.container:hover .box-back{ /* эффект при убранной мышки*/ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); }</style> Получаем переворачивающую картинку при наведении на нее мышкой index2.html

Добрый день! Подскажите, можно как-то с включенным autocomplete=1 сделать, чтобы тут: при наборе выделялось то, что набрано? Может, стилями... Или это как-раз живой поиск надо покупать?

Where.io — вручную подобраные ресурсы на разные темы cssreflex — наглядным образом посмотрим про CSS вкусности Clusterize.js — плагин для отображения больших обьемов данных

изменил файл Bootstrap Responsive <div class="bottom-wrapper"> <div class="bottom container"> <div class="bottom-inner row"> <div class="item span4"> <div class="address decoration"></div> <h2><a>Работаем без комиссии для клиента</a></h2> </div><!-- /.item --> <div class="item span4"> <div class="gps decoration"></div> <h2><a>Бесплатный просмотр любого объекта</a></h2> </div><!-- /.item --> <div class="item span4"> <div class="key decoration"></div> <h2><a>Бесплатные услуги грузчиков на новоселье</a></h2> </div><!-- /.item --> </div><!-- /.bottom-inner --> </div><!-- /.bottom --> </div> Реакции НОЛЬ ЧТО СДЕЛАТЬ? подскажите, пожалуйста. сайт http://недвижимость-азова.рф

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

Заметил глюк с шириной выпадающего меню: пункты меню не умещаются в выпадающих колонках. Скрин: https://cloud.mail.ru/public/882e4fff869a/Menu.jpg Подозреваю, что править надо jqueryslidemenu.css, но даже методом тыка не нашел строку, отвечающую за подстройку ширины выпадающего меню (подменю).

Задача. Наложить стили на обычный Checkbox без js и jquery. использовав только чистый сss3 Решение 1. В html (tpl) сам checkbox выглядит следующим образом: <input type="checkbox" value="" id="" name=""> 2. Теперь нам нужно создать групповую разметку <div class="squaredThree"> <input type="checkbox" value="None" id="squaredThree" name="check"> <label for="squaredThree"></label> </div> 3. После того как разметка готова приступаем к написанию стилей. input[type=checkbox] { visibility: hidden; } таким образом мы скрываем к показу стандартный checkbox 4. Создаем стиль для разметки .squaredThree { width: 20px; margin: 20px auto; position: relative; } 5. Добавляем метку и фильтры, так же не забываем про обработку в IE .squaredThree label { cursor: pointer; position: absolute; width: 20px; height: 20px; top: 0; border-radius: 4px; -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); background: -moz-linear-gradient(top, #222 0%, #45484d 100%); background: -o-linear-gradient(top, #222 0%, #45484d 100%); background: -ms-linear-gradient(top, #222 0%, #45484d 100%); background: linear-gradient(top, #222 0%, #45484d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 ); } 6. Применим к нашем стилям и метки - After. Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента .squaredThree label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 4px; left: 4px; border: 3px solid #fcfff4; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } 7. Теперь мы добавляем фильтры псевдоэлементу в режими активности (наведения) .squaredThree label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; } 8. Компонуем условие отображения. .squaredThree input[type=checkbox]:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }

Представляю Вам новый шаблон MetroCity который Вы сможете приобрести купить - http://www.sitebill.ru/client/cart.php?gid=6 посмотреть демо - http://metrocity.sitebill.ru/