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>
Настройте отображение аватаров на форуме с помощью selector .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>
Настройте отображение страницы списка тем на форуме с помощью селектора.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 и .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>
Статьи по теме:
- Добавление собственного кода CSS
- Изменение стиля шрифта
- Изменение размера текста
- Изменение внешнего вида ссылок на заголовки тем
- Изменение внешнего вида ссылок на заголовки категорий
If you still need help, please contact us.