How can I customize the appearance of my embeddable application?
Go to "Options> Editor> Change appearance" link in your application.
This screen has easy options to customize the basic look of your application:
Here you can customize details about your application
If you want a more detailed customization, you can go to the "Look and Feel" section in order to provide a custom CSS (Cascading Style Sheets) text for your application.
As you can see in the image above, Nabble has some predefined styles ready for you. You can simply click on them to get their CSS into the text area.
After that, you can modify the text the way 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 application, 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)
FontFont family and its size.
Verdana 0.84em
body, input, button, textarea, select {
font-family:
Tahoma;
font-size:
0.8em;
}
Background ColorBackground of the pages.
FFFFFF (white)
body, .nabble, .nabble .no-bg-color {
background-color:
#<color>;
}
Text ColorColor 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>;
}
Link ColorColor of unvisited links.
0000EE
.nabble a:link,
.nabble a.not-visited-link {
color:
#<color>;
}
Link Color (Visited)Color of visited links.
551A8B
.nabble a:visited,
.nabble a.visited-link {
color:
#<color>;
}
Header Text Color (H1)Color of header texts (big titles, etc.).
333333
.nabble h1 {
color:
#<color>;
}
Header Text Color (H2)Color of small header texts.
000000
.nabble h2 {
color:
#<color>;
}
Important TextColor of important texts.
CC0000
.nabble .important {
color:
#<color>;
}
Form Label TextColor of labels on forms and other special places.
666666
.nabble th,
.nabble .form-label,
.nabble .weak-color {
color:
#<color>;
}
Light BackgroundColor of light backgrounds, which are used in some areas of the screen.
F5F5F5
.nabble .light-bg-color {
background-color:
#<color>;
}
Shaded BackgroundColor of shaded backgrounds, which are used in some areas of the screen.
EEEEEE
.nabble .shaded-bg-color {
background-color:
#<color>;
}
Dark BackgroundColor of dark backgrounds, which are used in some areas of the screen.
DDDDDD
.nabble .dark-bg-color {
background-color:
#<color>;
}
Error MessageColor of error messages.
FFFFCC
.nabble .error-message {
border-color:
#<color>;
background-color:
#<color>;
}
Info MessageColor of info messages.
FFFFCC
.nabble .info-message {
border-color:
#<color>;
background-color:
#<color>;
}
HighlightColor of highlights, which are used to catch user's attention.
FFFF66
.nabble .highlight {
background-color:
#<color>;
}
Light Border ColorColor of the light border, which is used to separate areas on the screen.
EEEEEE
.nabble .light-border-color {
border-color:
#<color>;
}
Medium Border ColorColor of the medium border, which is used to separate areas on the screen.
CCCCCC
.nabble .medium-border-color {
border-color:
#<color>;
}
Dark Border ColorColor of the dark border, which is used to separate areas on the screen.
666666
.nabble .dark-border-color {
border-color:
#<color>;
}
Dropdown ColorsColors of the dropdown box.
CCCCCC
span.dropdown table {
background-color:
#<color>;
border-color:
#<color>;
}
Dropdown Item ColorsColors of each dropdown item.
0000EE (foreground / normal and hover)
Transparent (background normal)
DDDDDD (background hover)
/* Normal */
span.dropdown-item {
color:
#<color>;
}
Date ColorColor used to display dates of messages.
6A6A6A
span.post-date {
color:
#<color>;
}
Author ColorColor used to display the author name on messages.
116611
span.post-author {
color:
#<color>;
}
Subject ColorColor used to display subjects of messages.
111166
.post-subject {
color:
#<color>;
}
Message Preview ColorColor used to display the message preview line (snippets).
909090
span.post-snippet {
color:
#<color>;
}
Post Hover ColorColor used to highlight a post when the user moves the mouse over it.
EEEEEE
.post-hover {
background-color:
#<color>;
}
Post BoxBox where the post is displayed.
D9D9D9
div.post-border {
border-color:
#<color>;
}
Relationship LinesLines 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 Nabble Support forum.
«