Надеюсь админ создаст отдельный раздел для этого и создаст в ней (переименует мою тему)
В данном разделе пользователи смогут подчеркнуть для себя интересные идеи которые смогут применить на своем сайте
Первый урок (переворот картинки без использования 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

Недавно пользователи спрашивали как поменять цвет на определенной категории объекта.
для начала создадим стили в котором мы определим сам цвет заливки и шрифта
Открываем файл стилей (я предпочитаю этот 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; }  

Озадачился оптимизацией скриптов при загрузке сайта, поскольку Гугля пишет рейтинг 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)

Добрый день!
Подскажите, можно как-то с включенным autocomplete=1 сделать, чтобы тут:


при наборе выделялось то, что набрано? Может, стилями...
Или это как-раз живой поиск надо покупать?