1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Использование переменных XenForo в CSS

Тема в разделе "Основные вопросы по XenForo", создана пользователем Oleg Voproskin, 10 июн 2011.

Загрузка
  1. Oleg Voproskin

    Oleg Voproskin Форумный тролль

    Регистрация:
    18.05.11
    Сообщения:
    94
    Симпатии:
    24
    Допустим стоит задача вывести персональные иконки для каждого раздела.
    На форуме 200 разделов.:)
    Тогда для каждого раздела нужно прописать в EXTRA.css код:
    Код:
    .node_26 .forumNodeInfo .nodeIcon, .node_26 .categoryForumNodeInfo .nodeIcon
              {background-image: url("styles/default/xenforo/widgets/026.png") !important;}
    .node_26 .forumNodeInfo.unread .nodeIcon, .node_26 .categoryForumNodeInfo.unread .nodeIcon
              {background-image: url("styles/default/xenforo/widgets/026.png") !important;}
    
    У XenForo наверняка есть переменная узлов ... может её задействовать?
    И тогда многотонный EXTRA.css превратится в 3 строчки.
    Код:
    .node_{$nod_id} .forumNodeInfo .nodeIcon, .node_{$nod_id} .categoryForumNodeInfo .nodeIcon
              {background-image: url("styles/default/xenforo/widgets/0{$nod_id}.png") !important;}
    .node_26 .forumNodeInfo.unread .nodeIcon, .node_{$nod_id} .categoryForumNodeInfo.unread .nodeIcon
              {background-image: url("styles/default/xenforo/widgets/0{$nod_id}.png") !important;}
    
    Есть ли такая переменная и можно ли реализовать такую затею?
     
  2. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Если добавить в шаблон css поддержку $renderedNodes то следующим кодом должно получиться (возможны грубые ошибки):

    Код:
    <xen:foreach loop="$renderedNodes" value="$node">
    .node_{xen:number "$node"} .nodeIcon {background-image: url("styles/default/xenforo/widgets/0{xen:number "$node"}.png") !important;}
    .node_{xen:number "$node"} .unread .nodeIcon {background-image: url("styles/default/xenforo/widgets/0{xen:number "$node"}.png") !important;}
    </xen:foreach>
    А вообще логичным решением этой задачи я вижу создание большого спрайта со всеми иконками. И тогда достаточно будет лишь задать фоновый отступ для каждого раздела.
     
  3. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Спрайты сократят количество HTTP-запросов, но не размер CSS (хотя и он должен стать конечно меньше) :)
     
  4. Oleg Voproskin

    Oleg Voproskin Форумный тролль

    Регистрация:
    18.05.11
    Сообщения:
    94
    Симпатии:
    24
    Для категорий (страна), использую этот код:
    Код:
    /* Россия */
    .node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon
              {background-image: url("@imagePath/xenforo/widgets/002.png") !important;}
    .node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon
              {background-image: url("@imagePath/xenforo/widgets/002.png") !important;}
    
    Для разделов (города), использую этот код:
    Код:
    /* Санкт-Петербург */
    .node_7 .forumNodeInfo .nodeIcon, .node_7 .categoryForumNodeInfo .nodeIcon
              {background-image: url("styles/default/xenforo/widgets/007.png") !important;}
    .node_7 .forumNodeInfo.unread .nodeIcon, .node_7 .categoryForumNodeInfo.unread .nodeIcon
              {background-image: url("styles/default/xenforo/widgets/007.png") !important;}
    
    Пытался пару раз использовать Ваш "укороченный код" (еще из первого его упоминания), но он к сожалению ни разу не заработал :). Здесь снова "укороченный код", но только с переменными внутри ...
    На всякий случай еще раз попробовал "короткий код", но чуда не произошло. Вариант сам по себе не рабочий (на v. 1.0.2).

    По спрайтам: блин... так это надо нарисовать файл ... и потом расчертить его, да в код все потом перенести... это же каторга :p

    Попробовал предложенный метод. Скрин выкладывать страшно ...
    Форум перекосило весь и иконки не появились.

    Возвращаюсь в EditPlus :) и делаю по старинке.​
     
  5. Pepelac

    Pepelac Продам луц в бутылках Команда форума

    Регистрация:
    28.09.10
    Сообщения:
    1.794
    Симпатии:
    1.349
    Ключевые слова:
     
  6. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Они сократят количество запросов к серверу, а это просто драгоценное время.
    Вы не поверите, но так и должны делать все, кто использует много однотипных иконок.

    Вообще неплохо было бы комбинировать 1 и 2 способ.
    Т.е. через цикл выводить код для позиционирования фона с автоматическим просчётом величин.
     
    Romchik® нравится это.

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