Help > Forum > 主题和外观 > 常见的 CSS 主题自定义
常见的 CSS 主题自定义
本指南旨在展示论坛中使用的主要CSS类以及如何对其进行自定义的示例。这些说明指定了您可以在何处向论坛或主题添加 CSS。
要了解有关 CSS 的更多信息,请试试 W3Schools CSS 教程。
使用选择器 .wt-body 自定义整个论坛页面。
<style> .wt-body { background-color: skyblue; } </style>
将 Google 字体的代码粘贴到论坛头标记 HTML 代码文本框中,为您的论坛使用其他字体。
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
然后使用选择器 * 指定您的字体。
<style> * { font-family: 'Lato', sans-serif; } </style>
使用选择器标题设置论坛标题的样式。
<style> header { box-shadow: 0 0 30px rgba(0,0,0,0.5); } </style>
使用选择器 .wt- body a 来设置论坛链接的样式。
<style> .wt-body a { font-weight: bold; } .wt-body a:hover { text-decoration: underline; } .wt-body a { color: #222 !important; } .wt-body a:visited { color: #555 !important; } </style>
使用选择器 .image-wrapper 自定义头像在论坛上的显示方式。
<style> .image-wrapper { border-radius: 100%; } </style>
使用选择器 .modal-content 自定义模态/对话框在论坛上的显示方式。
<style> .modal .modal-content { border-radius: 20px; overflow: hidden; } </style>
使用选择器 .modal-header 自定义模态/弹出对话框的标题在论坛上的显示方式。
<style> .modal-header { background: black; color: white } </style>
使用选择器 #slide- panel 自定义左侧滑动面板和主菜单在论坛上的显示方式。
<style> #slide-panel { background-color:#00ff00 } </style>
使用选择器 .calendar 自定义日历在论坛上的显示方式。
<style> .calendar { width: 100% !important; } </style>
使用选择器. header-image 自定义标题图片在论坛上的显示方式。
<style> .header-image { height: 185px; margin: 10px auto 20px; } </style>
使用选择器 .wt-categorie 自定义类别列表页面在论坛上的显示方式。
<style> .wt-categories { width: 700px !important; margin-top: 50px; } </style>
使用选择器 .al l-topics-list 自定义主题列表页面在论坛上的显示方式。
<style> .all-topics-list { width: 800px !important; } </style>
使用选择器 #posts- list 自定义帖子列表页面在论坛上的显示方式。
<style> #posts-list { margin: 0 auto; width: 72%; } </style>
使用选择器 .post-body 自定义帖子在论坛上的显示方式。
<style> .post-body { background-color: #00ff00; } </style>
使用选择器 .content-panel 自定义面板在论坛上的显示方式。
<style> .content-panel { width: 70% !important; } </style>
使用选择器. alert 自定义提醒消息在论坛上的显示方式。
<style> .alert { background: #f38282; } </style>
使用选择器 .album-wrapper 自定义相册在论坛上的显示方式。
<style> .album-wrapper { padding: 2px; border: 2px #eee solid; } </style>
使用选择器. form-control 自定义表单文本框在论坛上的显示方式。
<style> .form-control { background: #c6dede !important; color: #019c9c; } </style>
使用选择器 .btn、.btn-primary 和 .btn-subtle 自定义按钮在论坛上的显示方式。
<style> .btn { border-color: #d07c73 !important; background-color: #397373 !important; color: #242727 !important; } .btn-primary { border-color: #39d84f !important; background-color: #386f6f !important; color: #0d2b2b !important; } .btn-subtle { border-color: #969291 !important; background-color: #1bf9f9 !important; color: #4b5252 !important; } </style>
使用选择器 .dropd own-menu 自定义下拉菜单在论坛上的显示方式。
<style> .dropdown-menu { background-color: #b4dada } .dropdown-menu a:hover { background-color: #97caca !important; } </style>
使用选择器 #forum_logo 自定义您的徽标在论坛上的显示方式。
<style> #forum_logo { width: 50%; margin-left: 20%; } </style>
相关文章:
If you still need help, please contact us.