Jsoftware
High-Performance Development Platform

Nabble Help

How can I customize the appearance of my forum?

You can click on the "Edit this Forum" link of your forum and then click on the "Customize Appearance" tab as shown below. This tab has a text area where you should enter the custom CSS (Cascading Style Sheets) text for your forum:

As you can see in the image above, Nabble has some predefined styles ready for you. You can simply load and edit them as you want. This is a valuable source of examples that you can also use to learn more about Nabble's style.

How to write your custom CSS

If you want to change the appearance of your forum, you have to override Nabble's style. The cheat table below can easily guide you through this process. Learn how each style is defined and change them as you want. Since colors may require hexadecimal codes, you can use a tool like Color Picker to help you in this sense.

If you want to import an external CSS file, you should use the following command:
@import url("http://www.example.com/file.css");

Item to Change Default Value How to Change (Example)
Font
Font family and its size.
 Verdana 0.84em body, input, button, textarea, select {
    font-family: Tahoma;
    font-size: 0.8em;
}
Background Color
Background of the forum pages.
     FFFFFF (white) .nabble, .nabble .no-bg-color {
    background-color: #<color>;
}
Text Color
Color of texts (paragraphs, etc.).
     000000 (black) .nabble,
.nabble table,
.nabble .info-message th,
.nabble .message-text, .small,
.nabble .editor-table td, p, form,
small, ul, table td, .breadcrumbs {
    color: #<color>;
}

#nabble.path {color:#<color>;}
Link Color
Color of unvisited links.
     0000EE .nabble a:link {
    color: #<color>;
}
Link Color (Visited)
Color of visited links.
     551A8B .nabble a:visited {
    color: #<color>;
}
Header Text Color (H1)
Color of header texts (big titles, etc.).
     333333 .nabble h1, .nabble .light-black {
    color: #<color>;
}
Header Text Color (H2)
Color of small header texts.
     000000 .nabble h2 {
    color: #<color>;
}
Important Text
Color of important texts.
     CC0000 .nabble .important {
    color: #<color>;
}
Form Label Text
Color of labels on forms and other special places.
     666666 .nabble th,
.nabble .form-label,
.nabble .weak-color {
    color: #<color>;
}
Shaded Background
Color of shaded backgrounds, which are used in some areas of the screen.
     EEEEEE .nabble .shaded-bg-color {
    background-color: #<color>;
}
Dark Background
Color of dark backgrounds, which are used in some areas of the screen.
     DDDDDD .nabble .dark-bg-color {
    background-color: #<color>;
}
Error Message
Color of error messages.
     FFFFCC .nabble .error-message {
    border-color:#<color>;
    background-color: #<color>;
}
Info Message
Color of info messages.
     FFFFCC .nabble .info-message {
    border-color:#<color>;
    background-color: #<color>;
}
Light Highlight
Color of light highlights, which are used to catch user's attention.
     FFFFCC .nabble .light-highlight {
    background-color: #<color>;
}
Highlight
Color of highlights, which are used to catch user's attention.
     FFFF66 .nabble .highlight {
    background-color: #<color>;
}
Dark Hightlight
Color of dark highlights, which are used to catch user's attention.
     FFCC66 .nabble .dark-highlight {
    background-color: #<color>;
}
Light Border Color
Color of the light border, which is used to separate areas on the screen.
     EEEEEE .nabble .light-border-color {
    border-color: #<color>;
}
Medium Border Color
Color of the medium border, which is used to separate areas on the screen.
     CCCCCC .nabble .medium-border-color {
    border-color: #<color>;
}
Dark Border Color
Color of the dark border, which is used to separate areas on the screen.
     666666 .nabble .dark-border-color {
    border-color: #<color>;
}
Dropdown Colors
Colors of the dropdown box.
     CCCCCC span.dropdown table {
    background-color:#<color>;
    border-color:#<color>;
}
Dropdown Item Colors
Colors of each dropdown item.
     0000EE (foreground / normal and hover)

    Transparent (background normal)

    DDDDDD (background hover) 		/* Normal */
span.dropdown-item {
    color:#<color>;
}

/* Hover */
tr.dropdown-hover {
    color:#<color>;
    background-color:#<color>;
}
Date Color
Color used to display dates of messages.
     6A6A6A span.post-date {
    color:#<color>;
}
Author Color
Color used to display the author name on messages.
     116611 span.post-author {
    color:#<color>;
}
Subject Color
Color used to display subjects of messages.
     111166 span.post-subject {
    color:#<color>;
}
Message Preview Color
Color used to display the message preview line (snippets).
     909090 span.post-snippet {
    color:#<color>;
}
Post Hover Color
Color used to highlight a post when the user moves the mouse over it.
     EEEEEE .post-hover {
    background-color:#<color>;
}
Post Box
Box where the post is displayed. This item requires images for the corners of the box.
 N/A .post-border, td.post-border {
    border-color: #<color>;
}

td.post-row {
    background-image: url("<image-URL>");
}

td.post-top-left {
    background-image: url("<image-URL>");
}

td.post-bottom-mid {
    background-image: url("<image-URL>");
}

td.post-bottom-left {
    background-image: url("<image-URL>");
}

td.post-bottom-right {
    background-image: url("<image-URL>");
}
Relationship Lines
Lines that connect parents and children posts. This item requires images for the lines.
 N/A span.connect-line {
    background-image:url("<image-URL>");
}

span.connect-end {
    background-image:url("<image-URL>");
}

td.connect-end {
    background-image:url("<image-URL>");
}

td.connect-node {
    background-image:url("<image-URL>");
}

td.connect-node-closed {
    background-image:url("<image-URL>");
}

If you still have questions, visit Nabble Help or the Old Nabble Support forum.


« Go Back

Free embeddable forum powered by Nabble Forum Help
© 2006 Jsoftware Inc.