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. These instructions specify where you can add CSS to your forum or your theme.

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

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

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

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

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

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

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

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>

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

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

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>

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>

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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>

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>

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.