Jump to content
  • Разноцветные теги


     Официально

    Хорошая идея придать разный цвет для определённых общих тегов. Например в форуме, предназначенном для вопросов, было бы уместно использовать теги в качестве статусов тем, например тег решено перекрасить в зелёный и т.д. В настоящее время 'из коробки' 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





      Report запись


    User Feedback


    There are no comments to display.



    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      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.

    Loading...

Messenger

    ×
    ×
    • Create New...

    Important Information

    By using our site you agree to our Privacy Policy