Меняем вид тегов в [Tinhte] XenTag

Красивый вид меток.

  1. Raerek
    Совместимость с XenForo:
    • XenForo 1.3
    • XenForo 1.4
    • XenForo 1.5
    Стандартный вид
    2.PNG
    Открываем шаблон tinhte_xentag.css и там находим:​
    Код:
    .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag {
            background: @primaryMedium;
            color: @primaryLightest;
            display: inline;
            float: left;
            margin: 0.2em;
            padding: 0;
        }
    
        .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag:hover {
            background: @secondaryLighter;
            color: @primaryDark;
        }
     
        .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a {
            color: inherit;
            display: block;
            font-size: 1em;
            font-weight: bold;
            margin: 0.5em;
            text-decoration: none;
            white-space: nowrap;
        }
    
        .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level1 { background-color: @primaryLighterStill; color: @primaryMedium; }
        .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level2 { background-color: @primaryLighter; }
        .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level3 { background-color: @primaryLight; }
    Все это заменяем на:
    Код:
    .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag {
      margin: 20px 0; display: inline;
    }
    .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a {
      position: relative;
      display: inline-block;
      font-size: 15px;
      line-height: 24px;
      text-decoration: none;
      text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
      background: #176093; /* Фон тега */
      color: #f1f1f1;
      margin: 0 16px 10px 0;
      padding: 0 6px 0 8px;
      -webkit-border-radius: 3px 0 0 3px;
      -moz-border-radius: 3px 0 0 3px;
      border-radius: 3px 0 0 3px;
      -webkit-box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.15);
      box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.15);
    }
    .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a:after,
    .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a:before {
      position: absolute;
      top: 0;
      right: -12px;
      content: "";
      border: 12px solid #176093; /* Фон хвостика тега */
      border-right-color: transparent;
      border-left-width: 0;
    }
    .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a:before {
      right: -14px;
      top: 2px;
      border-color: rgba(0, 0, 0, 0.15);
      border-right-color: transparent;
    }
    .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a:hover {
      color: #fff;
      background: #9CC5E1; /* Фон тега hover */
    }
    .Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a:hover:after {
      border-color: #9CC5E1; /* Фон хвостика hover */
      border-right-color: transparent;
    }
    Цвет ставим на свой вкус, в стилях я сделал пометки какой цвет для чего :)
    На выходе получаем

    1.PNG
Поделиться этой страницей в