美化 xenforo 子版面横排的方法

进入后台–语言及模板–编辑模板，打开Extra.css，在内容最下方添加：

PHP:

.subForumsGrid { padding-right: 4px; }
.subForumsGrid .blockLinksGrid { width: 100%; display: inline-block; padding: 5px; }
.subForumsGrid .fullWidth { width: 100% !important; padding-bottom: 4px; }
.subForumsGrid .node { width: 20%; float: left; }
.subForumsGrid .node ol { padding-left: 10px; }
.subForumsGrid .node a { padding: 5px 10px 5px 18px; }
.subForumsGrid .node .node a { padding: 0px 10px 1px 18px; }
.subForumsGrid .node .nodeTitle { font-size: 11px; white-space: nowrap; overflow: hidden; }
.subForumsGrid .node div,
.subForumsGrid .node div a:hover
{
background-image: url('@imagePath/xenforo/widgets/read.png');
background-repeat: no-repeat;
background-position: 0px 50%;
}
.subForumsGrid .node div.unread,
.subForumsGrid .node div.unread a:hover
{
background-image: url('@imagePath/xenforo/widgets/unread.png');
background-repeat: no-repeat;
background-position: 0px 50%;
}


打开以下的模板：

node_category_level_2
node_forum_level_2
node_link_level_2
node_page_level_2
添加：

PHP:

<xen:if is="{$level} == 2 AND {$renderedChildren}">
 
<li class="subForumsGrid">
 
<ol class="secondaryContent blockLinksList blockLinksGrid">
 
<xen:foreach loop="$renderedChildren" value="$child">
 
{xen:raw $child}
 
</xen:foreach>
 
</ol>
 
</li>
 
</xen:if>


打开以下模板:

node_category_level_n
node_forum_level_n
node_link_level_n
node_page_level_n
在第一行的CLASS中，添加：

PHP:

{xen:if $renderedChildren, 'fullWidth'}


例如：

PHP:

<li class="node category level-n node_{$category.node_id}">

更改为：

PHP:

<li class="node category level-n node_{$category.node_id} {xen:if $renderedChildren, 'fullWidth'}">

XenForo默认图片库中没有read.png这个文件，需要下载后上传至@imagePath/xenforo/widgets目录中