Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Как менять цвет в зависимости от категории?

Как менять цвет в зависимости от категории?


     20.05.2023    dle, css    Общие вопросы, Стили (CSS), Хаки    436

вопрос
Здравствуйте. У меня есть кино сайт и на постере выводится в углу ярлык фильм или сериал и т.д. Я могу через css сменить цвет этого ярлыка. Но хотелось бы, менять цвет в зависимости от категории, например, фильм, красным чтобы было, сериал зеленым. На ворпресс это делал, на DLE ни как не получается. Как это можно сделать? Достаточно через css или надо править код и приписывать классы? Может кто делал и есть решение?

Ответа пока нет


5 комментариев

svbox
Юзер

svbox - 20 мая 2023 22:47 -

Добрый день. Решений может быть несколько.
Если категорий немного (фильм, сериал, мультфильм и еще несколько), то можно придумать простенький хак прямо в шаблоне вывода. Добавьте класс пустой класс css к контейнеру, в котором нужно фон менять. Например, bg-cat. Далее прямо в шаблоне вывода можно сделать такой блок:

[category=1]<style>.bg-cat {background: red;}</style>[/category]
[category=2]<style>.bg-cat {background: green;}</style>[/category]
[category=3]<style>.bg-cat {background: blue;}</style>[/category]

ID категорий свои ставьте.

Второй вариант, если не пользуетесь иконками категорий, пропишите в этом поле код цвета и выводите в шаблоне. Пример:
<div class="film-type" style="background: {category-icon};">Фильм</div>


Есть и другие решения на js. Можно просто написать функцию, которая после загрузки DOM будет искать контейнер и в зависимости от содержимого (можно прямо слова искать "Фильм", "Сериал") будет менять фон родителя.

svbox
Юзер

svbox - 20 мая 2023 23:20 -

По аналогии со вторым способом, можно добавить доп поле к новости с типом селект. Прописать прямо в нем цвета и в каждой новости руками выставлять. В шаблоне точно так же, как и с иконкой использовать значение xfvalue. Это лишний геморрой, но точно не промахнетесь.

Красавчик
Юзер

Красавчик - 21 мая 2023 07:47 -

Спасибо, буду пробовать!

redissx
Юзер

redissx - 21 мая 2023 08:51 -


        [not-catlist=2,3,4]<div class="poster__label anim"><span>Фильм</span><div class="fal fa-camera-movie"></div></div>[/not-catlist]
        [catlist=4]<div class="poster__label red anim"><span>Сериал</span><div class="fal fa-popcorn"></div></div>[/catlist]
        [catlist=3]<div class="poster__label green anim"><span>Мультфильм</span><div class="fal fa-smile-beam"></div></div>[/catlist]
        [catlist=2]<div class="poster__label gray anim"><span>Аниме</span><div class="fal fa-unicorn"></div></div>[/catlist]
        {* [catlist=1,2....] текст [/catlist] Выводит текст в теге, если новость принадлежит указанным категориям *}

Красавчик
Юзер

Красавчик - 21 мая 2023 08:54 -

Тестю все варианты, работают только в shortstory, а например в похожих новостях, не работают теги catlist.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 15.04.2017 Railway_Academy  Общие вопросы
наверх