TopRaN

Урок CSS (4) Красим элементы категории (topic_id)

Recommended Posts

Недавно пользователи спрашивали как поменять цвет на определенной категории объекта.

для начала создадим стили в котором мы определим сам цвет заливки и шрифта

Открываем файл стилей (я предпочитаю этот 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 можно в админке в разделе "структура"

В итоге мы получаем 

Безымянный.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Аналогично:

<script type="text/javascript">
  $(document).ready(function() {
    make_red([1,2]); // все id через запятую
  });

  function make_red(data) {
    for(var i=;i<data.length;i++) {
      $("#topic_id").find("option[value='"+data[i]+"']").addClass("reder");
    }		
  }
</script>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
3 минуты назад, ReatEstate сказал:

Аналогично для чего, можно уточнить?

Это другой скрипт выполняющий аналогичную функцию. Кому что удобнее.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В 28.03.2016 в 22:17, TopRaN сказал:

Недавно пользователи спрашивали как поменять цвет на определенной категории объекта.

для начала создадим стили в котором мы определим сам цвет заливки и шрифта

Открываем файл стилей (я предпочитаю этот bootstrap.corrections.css ) и в конец файла вставляем ...

 

Работает, спасибо! Только для главных категорий сделал шрифт жирным, так лучше. Посмотреть можно здесь

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, demon-82 сказал:

У меня не выходит? /sobstvennik70.ru/ хотя делаю точь в точь.

а зачем вы "." поставили?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 минуту назад, TopRaN сказал:

а зачем вы "." поставили?

Так точки вроде по умолчанию там стоят

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Только что, Chernetskiy сказал:

Так точки вроде по умолчанию там стоят

toggleClass("reder"); 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
3 минуты назад, demon-82 сказал:

Убрал. Это я эксперементировал....

И стили вы добавили?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

У меня в стилях:

.reder {
  background-color:#707070;
    color:white;
    font-weight: bold
}

хотя, может и буковки раскрасить? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
13 часа назад, Chernetskiy сказал:

К стати, а где можно убрать точки перед категориями?

Точки в настройках 

 

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Давайте разберем,  если в рубрикаторе  присутствует больше двух  главных  категорий. Например: Коммерческая (темносерым)/Аренда(светлосерым)/магазин(тут ничего, оставляем)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
7 минут назад, ReatEstate сказал:

Давайте разберем,  если в рубрикаторе  присутствует больше двух  главных  категорий. Например: Коммерческая (темносерым)/Аренда(светлосерым)/магазин(тут ничего, оставляем)

Что именно не понятно по примеру?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

а как сделать так чтобы такая же расцветка была не только на главной странице, а еще и в структуре при подаче объявления через личный кабинет?
так как сейчас не получается, хотя и F5 несколько раз нажимали олее 50 раз и папку кеша чистили -ничего не помогает показывает не тем цветом что нам надо, на основной странице синим а в ЛК светло-серым

Заметили следующую особенность-как поправить?

если вылогиниться и посмотреть структуру то все показывается как надо и цвета -те что нужны,
ну а если зайти в личный кабинет и посмотреть раззделы лио через главную страницу  или при подаче объявления то структура уже другими цветами

и еще вопрос как поменять слово "тип" на слово "Раздел объявлений", в админке как не называй все равно не изменяется и не отображается
вопрос на скане

расшифровка файлов
тип2-это если смотрит пользователь без входа в ЛК
тип1 это если зайти в ЛК
тип-как изменить на РАЗДЕЛ ОБЪЯВЛЕНИЙ
 

тип.jpg

тип1.jpg

тип2.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
16 минут назад, TopRaN сказал:

Что именно не понятно по примеру?

Я так понял просто продублировать чуть ниже еще один стиль с другим цветом в файлик  css  + добавить с этим новым стилем в хедер новые нужные категории?
Или есть проще вариант?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
27 минут назад, ReatEstate сказал:

Я так понял просто продублировать чуть ниже еще один стиль с другим цветом в файлик  css  + добавить с этим новым стилем в хедер новые нужные категории?

да, именно так

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
7 часов назад, doma сказал:

а как сделать так чтобы такая же расцветка была не только на главной странице, а еще и в структуре при подаче объявления через личный кабинет?
так как сейчас не получается, хотя и F5 несколько раз нажимали олее 50 раз и папку кеша чистили -ничего не помогает показывает не тем цветом что нам надо, на основной странице синим а в ЛК светло-серым

Заметили следующую особенность-как поправить?

если вылогиниться и посмотреть структуру то все показывается как надо и цвета -те что нужны,
ну а если зайти в личный кабинет и посмотреть раззделы лио через главную страницу  или при подаче объявления то структура уже другими цветами

и еще вопрос как поменять слово "тип" на слово "Раздел объявлений", в админке как не называй все равно не изменяется и не отображается
вопрос на скане

расшифровка файлов
тип2-это если смотрит пользователь без входа в ЛК
тип1 это если зайти в ЛК
тип-как изменить на РАЗДЕЛ ОБЪЯВЛЕНИЙ

 

тип.jpg

тип1.jpg

тип2.jpg

ребята что не так ? где же ответы? что то функция нормальная но работает видимо с привязкой к пользователю
или еще к чему то -проблемы описаны выше.

Добавим еще такую вещь, если смотреть на структуру обычным пользователем безвхода в ЛК, то все нормально
Если этот же пользователь зайдет в ЛК, то цвета немного видоизменяются, но удивительная вещь если несколько раз нажать F5 то возможно на какой то раз -структура начинает отображаться нормально. Но стоит в ЛК например нажать раздел продажа квартир и снова посмотреть на структуру-то цвета опять не правильные. Возможно нужно что то улучшить в коде :)  

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
8 часов назад, ReatEstate сказал:

И еще, как и где в этой структуре поменять местами главные категории. Например "Коммерческая" с "Дома-участки"

У каждой категории есть поле Порядок сортировки - там вписывайте числа - чем меньше число, тем выше на одном уровне с другими.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
5 часов назад, rumantic сказал:

У каждой категории есть поле Порядок сортировки - там вписывайте числа - чем меньше число, тем выше на одном уровне с другими.

Дмитрий а такой вопрос еще у нас например была структура стандартная их ID были 1,5,40 к примеру то есть не очень большие, но решили создать еще несколько и их ID начали начинаться с 6141 , 6289 , это не страшно? и почему такой большой разрыв?

и еще наверное можно применить скрипт с несколькими условиями который сначала определяет ID категории а потом ID города и при совпадении условий необходимых будет показывать определенный банер (в виде кликабельной картинки), то есть своего рода такой рекламный скрипт.
Реализация есть несколько категорий например продажа квартир1ком=ID100  квартир2ком=ID200  квартир3ком=ID300  и есть несколько городов Например Москва=ID1 Киев=ID2 Саранск=ID3
так вот скрипт сначала выясняет ID категории а потом ID города и подставляет рекламку
Например условие такое 
Если категория100 и город1 тогда показать банер продажа 1 комн квартир в москве
Если категория200 и город1 тогда показать банер продажа 2 комн квартир в москве
Если категория300 и город1 тогда показать банер продажа 3 комн квартир в москве  
 Если категория100 и город2 тогда показать банер продажа 1 комн квартир в киева
и так далее для каждого города и для каждой категории
уверен очень востребовано
скрипт можно вынести в отдельный TPL файл для лучшей настройки чтобы не лазить в код 

Константин напишите пожалуйста правильный код
Спасибо
 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
11 минуту назад, doma сказал:

Дмитрий а такой вопрос еще у нас например была структура стандартная их ID были 1,5,40 к примеру то есть не очень большие, но решили создать еще несколько и их ID начали начинаться с 6141 , 6289 , это не страшно? и почему такой большой разрыв?

Это вы делаете подкатегории, так и должно быть.

12 минуты назад, doma сказал:

и еще наверное можно применить скрипт с несколькими условиями который сначала определяет ID категории а потом ID города и при совпадении условий необходимых будет показывать определенный банер (в виде кликабельной картинки), то есть своего рода такой рекламный скрипт.
Реализация есть несколько категорий например продажа квартир1ком=ID100  квартир2ком=ID200  квартир3ком=ID300  и есть несколько городов Например Москва=ID1 Киев=ID2 Саранск=ID3
так вот скрипт сначала выясняет ID категории а потом ID города и подставляет рекламку

Это целый модуль, и такой модуль есть. Только вы сами  баннер и указываете ему параметры (тип, город, район). Могу Вам его установить, была платная-частная разработка.

P.S. Не надо в данной теме флудить другими вопросами! В данном топике только то что касается в название темы, а именно уроки для пользователей.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Ответить в тему...

×   Вы вставили отформатированное содержимое.   Удалить форматирование

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Похожие публикации

    • Автор: TopRaN
      В sitebill есть кластерная карта которую можно подключить через iframe
      <iframe src="{$estate_folder}/js/ajax.php?action=iframe_map&{$QUERY_STRING}" style="border: 0px;" border="0" width="100%" height="500px"></iframe> Карта просто замечательная.
      но в данной карте цена выводится целиком. Задача разделить саму цену на тысячи и добавить валюту.
      Решение.
      идем по адресу /apps/system/js файл activemap.js .  примерно 256 строка. находим содержимое
      block.find('.ActiveMapListBlock-item-price').text(data.price); и заменяем на 
      block.find('.ActiveMapListBlock-item-price').text(data.price.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')); сразу после нее добавляем следующее
      block.find('.ActiveMapListBlock-item-currency').text(data.currency_name); теперь карта понимает валюту и делит цену на тысячи. Осталось все это вывести в шаблон
      идем по адресу /apps/system/template файл iframe_map.tpl
      содержимое 
      <a class="ActiveMapListBlock-item-link" target="_blank" href=""> <div class="ActiveMapListBlock-item-image"> <img src="{$estate_folder}/img/no_foto.jpg"> <div class="ActiveMapListBlock-item-id"></div> </div> <div class="ActiveMapListBlock-item-description"> <h3 class="ActiveMapListBlock-item-title"></h3> <div class="ActiveMapListBlock-item-price"></div> <div class="ActiveMapListBlock-item-address"></div> <div class="ActiveMapListBlock-item-text"></div> </div> </a> меняем на это
      <a class="ActiveMapListBlock-item-link" target="_blank" href=""> <div class="ActiveMapListBlock-item-image"> <img src="{$estate_folder}/img/no_foto.jpg"> <div class="ActiveMapListBlock-item-id"></div> </div> <div class="ActiveMapListBlock-item-description"> <h3 class="ActiveMapListBlock-item-title"></h3> <div class="ActiveBlockHalf"> <div class="ActiveMapListBlock-item-price"></div> <div class="ActiveMapListBlock-item-currency"></div> </div> <div class="ActiveMapListBlock-item-address"></div> <div class="ActiveMapListBlock-item-text"></div> </div> </a> далее в конце файла добавляем стили
      .ActiveMapListBlock-item-price, .ActiveMapListBlock-item-currency { float:left; } .ActiveBlockHalf { display:inline-block; font-size: 18px; font-weight: 700; } .ActiveMapListBlock-item-price { padding-right: 5px; } и все результатом будет
       

    • Автор: dmpress
      Друзья!
      Кто-нибудь выводил два текстовых поля в категории? Например, вверху и внизу страницы?
      Очень прошу помощи если вы такое реализовали.
      Саму вторую переменную я добавил, благодаря подсказкам техподдержки, но вывести её в шаблон не могу.
      В техподдержке наотрез отказываются даже просто подсказать в каких файлах можно посмотреть как реализуется вывод текущего поля description в структуре, не то что как вывести новую переменную((
      В main.php нет вывода текущего поля description, а я умею программировать только копированием кода по образу и подобию))
    • Автор: TopRaN
      Надеюсь админ создаст отдельный раздел для этого и создаст в ней (переименует мою тему)
      В данном разделе пользователи смогут подчеркнуть для себя интересные идеи которые смогут применить на своем сайте
      Первый урок (переворот картинки без использования 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