Help > Forum > Themes & Appearance > Common CSS theme customizations

Common CSS theme customizations

These instructions are only for the new themes.

This guide is meant to show the major CSS classes used in the forum along with examples of how they can be customized. You can add your own CSS to the Appearance -> HTML section.

To learn more about CSS, try the W3Schools CSS Tutorial.

Body

Customize your whole forum page by using the selector .wt-body.

<style>
.wt-body {
    background-color: skyblue;
}
</style>

Font

Use a different font for your forum by pasting Google font's code inside the Forum Head Tag HTML Code text box.

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Then specify your font using the selector body, html.

<style>
body, html {
    font-family: 'Lato', sans-serif;
}
</style>

Header

Style your forum's header by using the selector header.

<style>
header {
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
</style>

Links

Style your forum's links by using the selector .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>

Avatars

Customize how avatars appear on your forum by using the selector .image-wrapper.

<style>
.image-wrapper {
    border-radius: 100%;
}
</style>

Modal

Customize how modals / dialogs appear on your forum by using the selector .modal-content.

<style>
.modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
}
</style>

Customize how the title of your modals / popup dialogs appear on your forum by using the selector .modal-header.

<style>
.modal-header {
    background: black;
    color: white
}
</style>

Slide Panel and Main Menu

Customize how the left slide panel and main menu appears on your forum by using the selector #slide-panel.

<style>
#slide-panel {
    background-color:#00ff00
}
</style>

Calendar

Customize how the calendar appears on your forum by using the selector .calendar.

<style>
.calendar {
    width: 100% !important;
}
</style>

Header Image

Customize how header image appears on your forum by using the selector .header-image.

<style>
.header-image {
    height: 185px;
    margin: 10px auto 20px;
}
</style>

Categories and topic pages

Customize how the categories list page appears on your forum by using the selector .forum-list.

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

Customize how the topics list page appears on your forum by using the selector .all-topics-list.

<style>
.all-topics-list {
    width: 800px !important;
}
</style>

Post listing page

Customize how the posts list pages appear on your forum by using the selector #posts-list.

<style>
#posts-list {
    margin: 0 auto;
    width: 72%;
}
</style>

Customize how posts appear on your forum by using the selector .post-body.

<style>
.post-body {
    background-color: #00ff00;
}
</style>

Panel body

Customize how panels appear on your forum by using the selector .content-panel.

<style>
.content-panel {
    width: 70% !important;
}
</style>

Alert

Customize how the alert messages appear on your forum by using the selector .alert.

<style>
.alert {
    background: #f38282;
}
</style>

Album

Customize how albums appear on your forum by using the selector .album-wrapper.

<style>
.album-wrapper {
    padding: 2px;
    border: 2px #eee solid;
}
</style>

Textbox

Customize how form textboxes appear on your forum by using the selector .form-control.

<style>
.form-control {
    background: #c6dede !important;
    color: #019c9c;
}
</style>

Button

Customize how buttons appear on your forum by using the selector .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

Customize how dropdown menus appear on your forum by using the selector .dropdown-menu.

<style>
.dropdown-menu {
    background-color: #b4dada
}
.dropdown-menu a:hover {
    background-color: #97caca !important;
}
</style>

Logo image

Customize how your logo appears on your forum by using the selector #forum_logo.

<style>
#forum_logo {
    width: 50%;
    margin-left: 20%;
}
</style>

Related Articles:


If you still need help, please contact us.