Xiuno论坛主题美化攻略：自定义CSS样式修改全指南

52JinY 助手

折腾了将近两周，终于把手头这个xiuno论坛的样式改得差不多满意了，在这里分享一下经验，也算给后来人少走点弯路。

先说说我的起点。用xiuno建站已经一年多了，默认的BX主题虽然干净，但看久了总觉得差点意思，字体太小、行间距偏紧、侧边栏布局也不够灵活。我不太懂PHP，但对CSS还算熟悉，所以就决定从自定义CSS入手，能改多少是多少。

xiuno自定义CSS最直接的方式是在后台找到"外观"或者主题设置里的"自定义CSS"输入框，把你的样式代码直接粘进去保存就行。这个方法的好处是不需要动主题文件，升级主题也不会覆盖掉你的修改。但要注意，有些老版本的xiuno后台可能没有这个入口，那就只能去找主题目录下的style.css或者自己新建一个custom.css然后在模板里引用。

我第一步改的是字体和行距，这是视觉体验最直接的部分。

body { font-size: 15px; line-height: 1.8; font-family: "ingFang SC", "Microsoft YaHei", sans-serif; }

这一行下去，整个页面的阅读感立刻舒服很多。行高1.8对于论坛内容来说基本是个比较通用的舒适值，太小显得拥挤，太大又会让页面显得空洞。

然后是帖子列表的改造。原版列表的标题和摘要之间间距偏小，我加了一些padding让呼吸感更强。同时把鼠标悬停时的高亮背景色换成了一个更柔和的浅灰蓝，而不是默认那个略显突兀的颜色。这种细节改起来不费力，但对用户体验的提升是实实在在的。

还有一个我觉得很值得改的地方是移动端适配。xiuno默认的移动端样式还算可以，但在小屏幕下侧边栏和主内容区的间距会挤在一起，看起来很别扭。我用media query做了几处针对性调整，把侧边栏在手机端完全隐藏，让主内容区占满屏幕宽度，整体体验好了不少。

@media (max-width: 768px) { .sidebar { display: none; } .main-content { width: 100%; } }

当然这里的类名要根据你用的具体主题去审查元素确认，不同主题命名习惯不一样，照抄别人的代码不一定能用。

说到审查元素，这个技能真的是改CSS的核心工具。我基本上是开着浏览器开发者工具，边看边改，实时预览效果，确认满意了再把代码整理进后台的自定义CSS框里。这样效率比较高，不用反复刷页面等保存。

有几个坑我踩过，分享给大家避免。第一个是选择器优先级问题，你写的样式不生效，很可能是被主题原有的样式覆盖了，这时候加个!important通常能解决，但不建议滥用。第二个是字体图标有时候会因为CSS修改影响到渲染，如果发现某些图标变成方块或者乱码，先检查一下是不是你的font-family设置把它的字体栈搞乱了。

总体来说，xiuno在CSS自定义这块给的空间还是比较够的，只要你有基本的CSS基础，折腾起来不会太费劲。我自己改完之后整个论坛的辨识度高了很多，用户也反馈比以前好看了。后续我可能还会尝试改改配色方案，如果有进展会继续分享。有问题的朋友欢迎在评论里交流，一起研究。