Цветные заголовки узлов (категории, разделы, темы)

Тема в разделе "Инструкции и основная информация", создана пользователем Next, 24.11.15.

  1. Next

    Next Администратор

    Сообщения:
    5.695
    Репутация:
    73
    Рейтинг:
    +572 / -0
    Решил сделать мануал по стилизации заголовков узлов форума. Начнем с того, что заголовки имеют свой номер, ID, не зависимо категория это или раздел, они идут по порядку, в зависимости от времени создания, темы тоже, но уже со своим отсчетом. Вот используя ID, мы будем стилизовать их, каждый по отдельности.
    Прежде, чем приступить к работе, необходимо включить режим отладки, не буду на этом останавливаться, уме миллион раз говорилось, как это сделать.
    Сначала создадим дополнение, не спешите говорить, зачем это надо, давайте дойдем до конца и поймете, что все просто и будет по полочкам :)

    Включаем режим разработчика:

    В config.php добавить
    Код:
    $config['debug'] = true;
    или установить плагин Brivium - Debug

    И так, заходим в список дополнений (/admin.php?add-ons/) и жмем "+Создать дополнение". Заполняем поля, там все как вам хочется, как придумаете, приблизительно так:

    1.png
    Дополнение создано, займемся созданием шаблона. Заходим в шаблоны, должен быть мастер стиль, жмем "+Создать новый шаблон", здесь придумываем название и обязательно, в низу в выпадающем списке выбираем наше, созданное дополнение.

    2.png
    Поле для самого шаблона, пока оставим пустым. Сохраняем, идем дальше.
    Сам по себе шаблон ни чего не изменит, его надо куда то подключить, так как у нас будет шаблон стилей, color_nodes_template.css, будем инклюдить его в EXTRA.css.
    Заходим в модификации шаблонов и создаем новую, опять же для нашего дополнения, для этого жмем "+Создать модификацию шаблона" и примерно как на скриншоте:

    3.png

    Шаблон: EXTRA.css
    Ключ модификации: color_nodes_mod (можно придумать свой)
    Тип поиска: Регулярное выражение
    Найти: #^.*$#su (регулярное выражение, находит все, что содержится в шаблоне)
    Заменить:
    Код:
    $0
    <xen:include template="color_nodes_template.css" />
    После всего, что есть в шаблоне EXTRA.css мы вставили наш созданный шаблон.
    Вот и получилось, как бы не вмешиваясь в содержимое самих шаблонов, мы внесли изменения в шаблон EXTRA.css. А созданный новый шаблон, дает возможность без режима отладки изменять стили заголовков узлов, в любом установленном у вас стиле.При обновлениях он ни куда не исчезнет и не измениться.
    Вот мы и подошли к самому главному, к раскрашиванию и прочему усовершенствованию заголовков.

    Заголовки категорий.

    Как я писал выше каждая категория имеет свой номер, посмотреть его можно просто если навести курсор на нее и внизу браузера отобразиться адрес категории с цифрой на конце, это и есть ее номер.
    Для обозначения заголовка категории цветом, в нашем новом шаблоне, который был до этого времени пустой, укажем для нужной категории:

    Код:
    .nodeList .node_3 .categoryStrip .nodeTitle a {
        color: #00aec1;      
    }
    Например так, где node_3 и есть класс для категории с id 3, соответственно вам надо указать свою, необходимую.
    Я решил немного приукрасить заголовок и добавить к нему эффект при наведении, получиться так:

    Код:
    .nodeList .node_3 .categoryStrip .nodeTitle a {
        color: #00aec1;
        transition: all 0.5s ease-out;        
    }
    .nodeList .node_3 .categoryStrip .nodeTitle a:hover {
        color: #00727c;
        padding-left: 5px;
        text-decoration: none;        
    }
    Если навести на заголовок категории с id 3, заголовок сместиться в право на 5 пикселей и немного изменит цвет с плавной анимацией. Смещение - padding-left, анимация - transition, так же убрал подчеркивание при наведении - text-decoration. Подробнее о этих селекторах css можно найти в интернете.
    Добавим к заголовку категории иконку шрифта Font Awesome:
    Код:
    .nodeList .node_4 .categoryStrip .nodeTitle a:before {
        font-family: 'FontAwesome';
        content: "\f03e";
        padding-right: 3px;        
    }
    Так можно добавить все что угодно.

    Заголовки разделов.

    Двигаемся дальше и так же используя id узлов, стилизуем заголовки разделов.
    Просто цвет раздела с id 10:
    Код:
    .node_10 h3.nodeTitle a {
        color: #ff2600;
    }
    Иконка Font Awesome перед заголовком:
    Код:
    .node_10 h3.nodeTitle a:before {
        font-family: 'FontAwesome';
        content: "\f06d";
        padding-right: 3px;
    }
    Текст с тенью:
    Код:
    .node_12 h3.nodeTitle a {
        color: #0aa000;
        text-shadow: 1px 1px 3px #FF5517;
    }
    Цвет заголовка подраздела:
    Код:
    .node_19 .nodeTitle a {
        color: #00997f;
    }
    Код:
    .discussionListItem[data-author="Skaiman"] .title a {
        color: #029333;
    }
    Заголовок подраздела с иконкой:
    Код:
    .node_21 .nodeTitle a:before {
        font-family: 'FontAwesome';
        content: "\f05a";
        padding-right: 3px;
    }
    И многими так любимые светящиеся тексты, я добавил к заголовку при наведении, хотя можно и так:

    Код:
    .node_9 h3.nodeTitle a:hover {
        background: url(img/fon-58.gif) repeat-x rgba(0,0,0,0);
        text-decoration: none;
    }
    4.png
    Заголовки тем.

    У тем, как говорил свой отсчет, но принцип тот, что и у категорий с разделами.
    Для отдельной темы:
    Код:
    #thread-3 .title a {
    color: #ff0000;
    }
    Для всех тем определенного пользователя:
    Код:
    .discussionListItem[data-author="Skaiman"] .title a {
    color: #029333;
    }
    Если цвет указан для определенной темы, то она отобразиться таким же цветом в новых темах боковой панели, а если для пользователя, то в боковой панели цвет будет по умолчанию.
    Здесь тоже можно добавить и тень, и фон и иконки, по аналогии описанного выше.
     
    • Мне понравилось Мне понравилось x 1
      Последнее редактирование: 29.09.16
    • Persei

      Persei Новичок

      Сообщения:
      1
      Репутация:
      5
      Рейтинг:
      +0 / -0
      При включении режима отладки куча ошибок.
       
    • Next

      Next Администратор

      Сообщения:
      5.695
      Репутация:
      73
      Рейтинг:
      +572 / -0