Перейти к содержанию
  • Разноцветные теги


     Официально

    Хорошая идея придать разный цвет для определённых общих тегов. Например в форуме, предназначенном для вопросов, было бы уместно использовать теги в качестве статусов тем, например тег решено перекрасить в зелёный и т.д. В настоящее время 'из коробки' IPS4 такую возможность не имеет, но это не значит что этого сделать нельзя, с помощью CSS селекторов мы можем сделать это!

    CSS селекторы

    Мы можем написать CSS селекторы, применяемые по совпадению в URL адресе. Допустим, у нас есть тег 'resolved', мы хотим сделать его зелёным, для этого добавим CSS селектор в custom.css:

    .ipsTags a[href*="/tags/resolved/"] {
        background: SeaGreen;
    }
    html[dir="ltr"] .ipsTags a[href*="/tags/resolved/"]:before {
    	border-color: transparent SeaGreen transparent transparent;
    }

    Первый стиль является основной частью тега, второй предназначен для псевдоэлемента :before, предназначенный для точки перед тегом. 

    Другой тег, который попробуем раскрасить - тег 'needs help'. В данном случае имеет место быть пробел между словами, который меняется при кодировании URL на символ '+'. Применим к тегу фиолетовый цвет:

    .ipsTags a[href*="/tags/needs+help/"] {
        background: Purple;
    }
    html[dir="ltr"] .ipsTags a[href*="/tags/needs+help/"]:before {
    	border-color: transparent Purple transparent transparent;
    }

    tags1.PNG

     

    Поддержка префиксов

    Этот CSS селектор не меняет цвет префиксом, давайте исправим это - замените указанный выше код на этот:

    .ipsTags a[href*="/tags/needs+help/"],
    a.ipsTag_prefix[href*="?tags=needs+help"] {
        background: Purple;
    }
    html[dir="ltr"] .ipsTags a[href*="/tags/needs+help/"]:before,
    html[dir="ltr"] a.ipsTag_prefix[href*="?tags=needs+help"]:before {
    	border-color: transparent Purple transparent transparent;
    }

     

    Обратите внимание!

    Чтобы раскрашивать кириллические теги и префиксы, в атрибуте ahref селектора должен быть закодированный кириллический тег или префикс, т.к. кодирование URL подразумевает использование только латинский букв, цифр и нескольких знаков пунктуации. Например, слово 'форум' кодируется в '%D1%84%D0%BE%D1%80%D1%83%D0%BC'.

    tags2.PNG





      Пожаловаться на запись


    Обратная связь


    Комментариев нет



    Присоединяйтесь к обсуждению

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

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

    ×   Вставлено с форматированием.   Вставить как обычный текст

      Разрешено использовать не более 75 эмодзи.

    ×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

    ×   Ваш предыдущий контент был восстановлен.   Очистить редактор

    ×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

    Загрузка...

×
×
  • Создать...

Важная информация

Используя наш сайт вы соглашаетесь с нашей Политикой конфиденциальности