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

Допустим стоит задача вывести персональные иконки для каждого раздела.
На форуме 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;}

Есть ли такая переменная и можно ли реализовать такую затею?

 

Если добавить в шаблон 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>

А вообще логичным решением этой задачи я вижу создание большого спрайта со всеми иконками. И тогда достаточно будет лишь задать фоновый отступ для каждого раздела.

 

Для категорий (страна), использую этот код:

Код:

/* Россия */
.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).

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

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

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

 

Ключевые слова:

 

Они сократят количество запросов к серверу, а это просто драгоценное время.

Вы не поверите, но так и должны делать все, кто использует много однотипных иконок.

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