技巧教程 修改RM资源管理器分类样式

  • 欢迎 游客 您的光临,下载之前请先阅读 积分规则(暂行) 。任何技术问题请在论坛提问,本站定制插件、模板主题售前、售后问题请联系QQ:5916171

Dioxide

大垃圾
UID
704
注册
2020/03/27
消息
25
反馈评分
15
黄金
1,513.4G
    Windows 10 Chrome 86.0.4240.111
  • #1
1604193872709.png
<一>、在extra.less中写入CSS
Less:
/*** MoOxide活按钮样式 ***/
.button-mooxide-ulink{
display: inline-block;
line-height: 33px;
text-indent: 25px;
height: 32px;
padding-right: 30px;
position: relative;
background-color:@xf-pageBg;
color:rgb(255,255,255);
text-decoration: none;
text-align:center;
color: #000;
margin-bottom: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
box-shadow:0px 2px 2px rgba(0,0,0,0.2);
opacity: 0.8;
}
.button-mooxide-ulink:hover{
text-decoration: none;
color: #000;
}
.button-mooxide{
width: 30px;
height: 30px;
background-color:@xf-uix_primaryColor;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
box-shadow:0px 2px 2px rgba(0,0,0,0.2);

border-right: 1px solid rgba(0,0,0,0.15);
opacity: 0.8;
}
/*** MoOxide活按钮样式结束 ***/
◢◤button-mooxide-ulink类 解释◢◤
• background-color:元素可使用xf颜色选择器语法;
• line-height:行高元素用来居中<a>标签内文本;
• text-indent:首行缩进元素同样用来居中<a>标签内的文本;
• -moz-???和???:不同的CSS解析器对应不同的浏览器;
• color:控制<a>标签内文本颜色;
• height:样式高度元素,用来和button-mooxide类对齐;
◢◤button-mooxide类 解释◢◤
• background-color:元素可使用xf颜色选择器语法;
• -webkit-???和-moz-???和???:不同的CSS解析器对应不同的浏览器;
• height:样式高度元素,用来和button-mooxide-ulink类对齐;
<二>、修改XFRM对应模板
老规矩,先找到“xfrm_category_list_macros”模板。
在大约 35-50 行之间找到如下代码:

HTML:
<div class="categoryList-itemRow">
<xf:if is="$children is not empty">
<a class="categoryList-toggler{{ $isActive ? ' is-active' : '' }}"
data-xf-click="toggle" data-target="< :up :next"
role="button" tabindex="0" aria-label="{{ phrase('toggle_expanded') }}"
></a>
<xf:else />
<span class="categoryList-togglerSpacer"></span>
</xf:if>
<a href="{{ link('resources/categories', $category) }}" class="categoryList-link{{ $isSelected ? ' is-selected' : '' }}">
{$category.title}
</a>
<span class="categoryList-label">
<span class="label label--subtle label--smallest">{$extras.resource_count|number_short}</span>
</span>
</div>
将其修改为如下代码
原理就是引用extra.less中的3个css类别

HTML:
<div class="categoryList-itemRow">
<xf:if is="$children is not empty">
<span style="position:relative;left:3%;" class="categoryList-toggler{{ $isActive ? ' is-active' : '' }} button-mooxide"
data-xf-click="toggle" data-target="< :up :next"
role="button" tabindex="0" aria-label="{{ phrase('toggle_expanded') }}"
></span>
<xf:else />
<span style="position:relative;left:3%;" class="categoryList-togglerSpacer"></span>
</xf:if>

<a style="position:relative;left:3%;" href="{{ link('resources/categories', $category) }}" class="button-mooxide-ulink{{ $isSelected ? ' is-selected' : '' }}">
{$category.title}
</a>

<span class="categoryList-label">
<span class="label label--subtle label--smallest">{$extras.resource_count|number_short}</span>
</span>
</div>
保存编辑后到前台刷新页面即可
xenforo 2.2 版本没试过,如果您尝试之后可使用的话可在下方回复中告诉我。​
 
打赏用户:
@玖黎
  • 支持
反馈: 死了算了