晴之书论坛（即本网站附属论坛）使用的就是MyBB系统…默认主题不好看，于是决定进行改造，直至用户界面相对默认主题非常完美为止…但是这之前还没有MyBB主题研究的经验，所以决定一边探索，一边进行修改。
现在使用的MyBB主题是这个，gergang2于MyBB官网间发表的“Default theme with more contrast, mobile friendly”：
https://community.mybb.com/mods.php?action=view&pid=1467
并且现在的晴之书论坛间只保留了这款主题…总之开工罢。不过在此之前，还要唠叨一下如何更改配置主题…进入论坛系统后台，找到“模板和风格”–>主题…咱们要复制一下现有主题，”主页”>>”主题”页面
之间选择“MyBB Master Style”（应该是MyBB默认主题）的“选项”按钮，“复制主题”，然后按照提示操作，直接进行保存（暂时先不考虑LOGO的制作）。复制完毕主题之后记得设置为默认主题，以及对所有用户
应用该主题。
…好了，以前下载的主题就不起作用了…点击“编辑主题”，开始进行探索。
默认的样式表一共有六种：
global.css（附加到所有页）
usercp.css（附加到usercp.php（用户控制面板）和private.php（短信页面））
modcp.css（附加到版主控制面板）
star_ratings.css（附加到forumdisplay.php（显示板块的页面）和showthread.php（显示帖子的页面））
showthreads.css（附加到showthread.php（显示帖子的页面））
thread_status.css（应该是帖子状态相关的css，总之附加到usercp.php（用户控制面板），forumdisplay.php（显示板块的页面）和search.php（搜索页面））
css3.css（附加到所有页）
另外“模板与风格”主页之间还有“模板”选项…但是展开模板之后发现极难辨认，只得暂且作罢——此次研究报告只涉及css项，因为默认的MyBB页面模板已经足够优秀了。
点击例如“global.css”…右侧的“现象”–>“样式”–>“编辑样式表：高级模式”就可以进行css的编辑了，编辑页面会有一个警告：“该样式表目前继承自 MyBB Master Style 主题。所做的任何更改都会破坏此
继承，并且样式表将被复制到该主题。”，暂且忽视…
global.css：
默认模板里面似乎用到了jQuery。不管他。
body：整个页面主体，包括背景，文字排版，选择什么字体，字体大小，及元素上下边界，但是对真正的页面主体（板块，帖子界面等）不起作用——后者应该有专门的CSS属性。
a:link,visited,hover,active：整体页面链接的设置。
#containter：按照模板来看应该是整个顶部区的设置。
.wrapper：根据页面显示效果及模板源码分析来看同下。
#logo：网站LOGO相关联…准确的说是容纳LOGO及顶部菜单（门户，搜索等链接）的框架相关联。
#content：页面主体。
#header ul等等：页面Header区（LOGO，顶部菜单等）所有无序列表…也就是菜单本体罢…的相关联设置。【⭐其中需要注意的是，#header ul.menu li a中images/headerlinks_sprite.png是一幅记载着header区所使用图标的图片，需要自定义。】
#logo ul等：经由header ul中所定义的图片，而进行图标配置。MyBB默认主题使用了一种精妙的方法配置各列表的图标，但是说不清楚具体过程，咱嘴笨…若是自定义图标不需要这样的话，直接可以去掉background-position，改成background:url(自己的图标)即可。
#panel .upper所有旗下属性：同上，只不过是注销/登录/密码/注册的图标配置。
#panel .lower所有旗下属性：用户控制面板，版主控制面板，系统后台的图标配置。
#panel .upper：默认模板中显示“欢迎您回来，xxxxx.上次访问时间…”这样的栏的配置。
#panel .upper a等等：上面那一栏的所有链接，默认主题当中只配置了颜色。
#panel .lower：显示“用户控制面板”“版主控制面板”等链接的那一行的配置。
#panel .lower a等：上面那一栏的所有链接…默认主题当中只配置了颜色，同样。
#search：搜索框的配置。
#search input等：.button与.textbox…搜索按钮与文本框的…只配置了外框颜色；另外.button还配置了背景色（一张图片，替换成纯颜色即可）以及文字颜色。
#search input：只配置了搜索文本框的外边距；
#quick_login：推测是快速登陆（直接于任何页面间输入用户名与密码）所用的属性；
#footer：页面底部的配置；
#footer ul等：页面底部的无序列表配置；
#footer .upper：页面底部（联系我们…）一栏的配置；
#footer a等：上面一栏所有链接的…默认主题当中只配置了颜色。
#footer .upper .language：底部栏右侧语言选择框的配置；
#footer .upper .theme：推测为底部栏中的主题选择框的配置，主题框咱隐藏了。
#footer .upper ul.bottom_links：底部栏链接总配置；
#footer .lower：底部栏以下，页面最底部栏的配置；
#footer .lower a：页面最底部栏链接的配置。
#footer .lower #current_time：页面最底部的右侧的时钟配置。
#debug：只有系统管理员才能看到的页面右下角（footer之上）的MyBB调试信息。
.scaleimages img：暂时不明，推测是“缩放图片”…
.forum_status：标明有无新帖的图标。【⭐是自定义图片：images/forum_icon_sprite.png】
.forum_on,off,offclose,offlink：同上，.forum_status给定了图片。
.subforumicon：标示这个板块中有子版块的图标。【⭐是自定义图片：images/mini_status_sprite.png】
.subforum_minion,minioff,minioffclose,miniofflink：同上，.subforumicon给定了图片。
发现无论怎么样设置，LOGO必然会显示于左上角，并且即便是去掉设置中的LOGO图片位置，也会显示链接…没办法，前往模板中看一下， 找到header模板，将第6行（用于显示LOGO）img标签中添加class=”hanenoshoulogo”，再于global.css中新增.hanenoshoulogo并进行设置即可。
今天分析了global.css中的前361行…包括咱新添进去的几行，所以有所误差。总之，明日继续。
最后，这是咱于global.css中配置的所有CSS变量：
:root{--threadbgcolor:rgba(2, 36, 13, 0.5);
--barbgcolor:rgba(2, 36, 13, 0.25);
--barbgcolorb:rgba(6, 8, 55, 0.25);
--buttoncolor:rgb(2, 36, 13);
--agreencolor:#00ef2b;
--avisitedgreencolor:#35ff59;
--textcolor:#e5ffe3;}
Be First to Comment