[Помогите] Подскажите как сделать вывод категорий

Подскажите как сделать вывод категорий как на скрине:

Версия XF 1.1.3
P.S. читал вопросы новичков не получается сделать :(

 

А что тут думать?

Находите шаблон node_category_level_2 и node_forum_level_2 и в них кусок кода который начинается с <xen:if is="{$renderedChildren} AND {$level} == 2">

Всё его содержимое заканчивая </xen:if> заменяете на:

Код:

[/FONT][/SIZE][FONT=Consolas]<xen:if is="{$renderedChildren} AND {$level} == 2">[/FONT]
[FONT=Consolas]		<div class="subForumsPopup">
				<div class="subForumsMenu">
						<ol class="secondaryContent blockLinksList">
						<xen:foreach loop="$renderedChildren" value="$child">
								{xen:raw $child}
						</xen:foreach>
						</ol>
				</div>
		</div> [/FONT]
[SIZE=15px][FONT=Georgia][FONT=Consolas]</xen:if>[/FONT]

А в шаблон EXTRA.css вставляем в самый низ (Или куда вам угодно) это:

Код:

[/FONT][/SIZE][FONT=Consolas]body .subForumsPopup[/FONT]
[FONT=Consolas]{
	margin: 0;
	float: none;
}
 
body .subForumsPopup .blockLinksList
{
	display: inline-table;
	width: 100%;
	box-sizing: border-box;
	word-spacing: -10px;
}
 
body .subForumsPopup .blockLinksList > li
{
	display: inline-block;
	width: 25%;
	word-spacing: 0;
	vertical-align: top;
}
 
body .subForumsPopup .blockLinksList .nodeTitle
{
	font-weight: normal;
}
 
body .subForumsPopup .blockLinksList .unread .nodeTitle
{
	font-weight: bold;
}
 
body .subForumsPopup .blockLinksList .nodeTitle a:before
{
	content: "";
	background: @primaryLighter;
	border-radius: 4px;
	margin-right: 5px;
	display: inline-block;
	height: 4px;
	width: 4px;
	vertical-align: middle;
}
 
body .subForumsPopup .blockLinksList li.node > .unread .nodeTitle a:before
{
	background: @primaryMedium;
}
.subForumsMenu .node .node
{
	display: none; [/FONT]
[SIZE=15px][FONT=Georgia][FONT=Consolas]}[/FONT]