Skip to content

MyBB主题CSS深度研究报告 vol.3

时隔多日,继续接续上次探索的结果来探索MyBB的CSS模板…中的global.css。那么开始…接续默认主题global.css中的881行(如果你在看的话,应该与咱的行数有所误差,那是因为咱更动了global.css)。

.pm_alert:从字面意义上就能看得出来,是来自管理员的提醒框相关配置(黄色)。不更改。
.red_alert:红色的提醒框,应该是对应着更严重的错误一类的内容。不更改。
.red_alert a等:红色提醒框中的链接配置,只配置了颜色。
.high_warning:应该是红色的警示字体(级别高)。
.moderate_warning:黄色的警示字体(级别中等)。
.low_warning:级别低的警示字体,同样为黄色,只不过更偏重于黄色而不是红色。
.imminent_banned:级别非常高的屏蔽?警示字体。
.high_banned:同上,级别不是太高但也很高。
.moderate_banned:同上,级别中等。
.low_banned:同上,级别低。
.online:标示用户在线的字体,只配置了颜色。
.offline:标示用户离线的字体,只配置了颜色。
div.error:错误框的配置。
div.error p:错误框内文本的配置。
div.error p em:错误框内着重标识的文本配置。【⭐images/error.jpg被选为了错误提示的图标,文本第一个字的前面】
div.error ul:错误框内无序列表的配置。
.pagination:标记帖子页数按钮的配置。
.tfoot .pagination,.tcat .pagination:同上,特指页面顶部与底部的页数按钮配置。
.pagination .pages:同上,标示页面数量字体的配置。
.pagination .pagination_current,.pagination a:同上,当前页面标识与链接的配置。
.pagination a:同上,页面标识按钮的配置。
.pagination .pagination_current:已经提过了,这次的配置了背景,文本颜色,外框及粗体。
.pagination a:hover:页面标识按钮被选中时的样式配置。
.pagination .go_page img:…这个是…同上,前往…特定页面?为什么还有img?暂且不明。
.drop_go_page:暂且不明,推测为…按下,前往特定页面按钮…之类的。
.pagination_breadcrumb:页面标识按钮中的…不明。看样式设定与前面的按钮配置差不多。保险起见还是修改background-color,border与outline好些。
.pagination_breadcrumb_link:同上,显示链接时。
.thread_legend,.thread_legend dd:帖子列表页面底部标识“新帖,热门主题(新)”等字样的文本。
.thread_legend dd:同上。
.thread_legend img:应该是同上,文本之前的图标的一般配置。
.forum_legend,.forum_legend dt,.forum_legend dd:推测为论坛首页中页面底部的“有新帖 无新帖 跳转论坛”这样的字样文本的配置。
.forum_legend dd:同上。
.forum_legend dt:同上。
.success_message:成功执行操作的信息提示框。保持默认配置。
.error_message:执行操作错误的信息提示框。保持默认配置就好。
#posts_container:推测为包含整个页面中所有帖子正文的容器,分析的时候,这个元素占满了整个查看帖子具体内容的页面范围。
.ignored_post:推测为被忽略掉的帖子框的按钮?
.ignored_post .show_ignored_post:推测为显示被忽略掉的帖子框的按钮?
.ignored_post .show_ignored_post a.button span:推测为上面两个属性的按钮样式配置,只配置了background-position,而且还是不显示背景图的属性。
.deleted_post_hidden:推测为删除帖子的按钮,但被隐藏了。
.deleted_post_collasped:推测为已被删除的帖子的按钮?还是无法删除帖子的按钮?不明。
.deleted_post_collapsed .show_deleted_post:前者同上,后者推测为显示被删除的帖子按钮。
.deleted_post_collapsed .show_deleted_post a.button span:同上,的按钮具体配置…同样只配置了background-position。
.post:包含一张帖子的容器。
.post.classic:…经典帖子?不明。
.post .post_author:一张帖子中的作者部分。
.post.classic .post_author:…经典帖子?版的作者部分。
.post .post_author .buddy_status:帖子作者部分标示在线/离线的图标(作者名称右侧的小圆图标)。
.post .post_author div.author_avatar:标识作者头像。
.post.classic .post_author div.author_avatar:经典帖子…中的标识作者头像。
.post .post_author div.author_avatar img:标识作者头像图片本身。
.post .post_author div.author_information:标识作者部分中的详细信息。
.post.classic .post_author div.author_information:同上的经典帖子部分。
.post .post_author div.author_statistics:标识作者部分中作者状态(帖子数,主题数,加入时间,声望,警告等级)的部分。
.post.classic .post_author div.author_statistics:上面属性的经典版本。
.post .post_head:帖子正文上方标识帖子发帖时间(含被修改时间等)的部分。
.post .post_head span.post_date:标识正文上方标识帖子发帖的时间。
.post .post_head span.edited_post:标识帖子被修改时间。
.post .post_head span.edited_post a:标识帖子被修改时间等的链接(应该是被谁修改的指向链接等)。
.post_body:帖子内容主体,定义了默认字体大小及内边距。
.post.classic .post_content:应该是经典帖子显示界面的帖子具体内容显示配置。
.post_content:帖子内容显示的配置,配置了内边距。
.post_content .signature:帖子底部签名的配置。
.post .post_meta:帖子显示内容底部的IP地址记录的文本。
.post .post_meta a:同上,链接。
.post_controls:帖子内容底部的控制按钮(”网站“,”查找“等按钮)的配置。
.postbit_buttons > a等:同上,按钮中文字的样式及按钮背景。
.postbit_buttons > a:hover:给定了同上…当指向按钮时外框颜色的改变。
.postbit_buttons a span:按钮图标的配置。【⭐images/buttons_sprite.png】
.postbit_buttons a.(xxxx) span:特定按钮图标的配置。
.post:not(.deleted_post) .postbit_qrestore,.post:not(.deleted_post) .status_type,.post.deleted_post .postbit_mirage:推定为一般不应该显示的按钮时的隐藏配置。
a.button等:一般按钮,例如:”发表新主题“。
a.button.small_button:一般按钮中的小按钮。
a.button span:一般按钮中的图标配置。【⭐images/buttons_sprite.png】
a.button.(xxxx) span:特定按钮图标的配置。
.quick_jump:快速跳转的链接,大概…这样的配置。【⭐images/jump.png】
.pollbar:不明…实在是找不到。【⭐images/pollbar.png】暂且保留着。
.pollbar .percent:同上…
.poll_votedfor:应该是”已投票“相关的元素罢。
.posticons_label:应该是与图标表格相关的配置。

然后有对应IE6显示专门的脚本,为了精简脚本,删去。

1449行(因为删去了IE6对应处理脚本,所以有误差,下同)开始是jGrowl,1583行开始是Modal,1669行开始是jQuery。这些暂且不进行研究及配置。

咱准备将媒体查询放置于1807行,以完成PC端与手机端的相应配置,不过这应该是下次撰写MyBB主题CSS深度研究报告时的事情了…
第一天曾经提及过咱有下载安装了一款第三方主题,主题间就有着媒体查询,应该是…根据那个主题的global.css进行参照,然后继续研究如何令默认主题支持媒体查询…手机端的显示。
…那样今日暂且这些。

Published in各种教程

Be First to Comment

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

5 × 2 =