Help > Forum > 主题和外观 > 常见的 CSS 主题自定义

常见的 CSS 主题自定义

这些说明仅适用于 新主题.

本指南旨在展示论坛中使用的主要 CSS 类,以及它们如何自定义的示例。 这些说明 指定您可以将 CSS 添加到您的论坛或主题的位置。

要了解有关 CSS 的详细信息,请尝试 W3 学校 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>

标题

使用选择器样式您的论坛标题 header.

<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>

类别和主题页面

使用选择器自定义类别列表页面在您的论坛上的显示方式 .forum-list.

<style>
.wt-categories {
    width: 700px !important;
    margin-top: 50px;
}
</style>

使用选择器自定义主题列表页面在您的论坛上的显示方式 .all-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, and .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>

下拉列表

使用选择器自定义下拉菜单在您的论坛上的显示方式 .dropdown-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.