The appearance (skin) of a Nabble forum is fully customizable. Here are live examples of customized forums. They are hosted on Nabble but look like a part of their home sites.
You can do this with only basic HTML skills.
There are 3 options for the appearance (skin) of a Nabble forum: 1. Default, 2. Inherit from parent, 3. Customized. You can select the options by clicking the "Edit this Forum" link on your forum to scroll down and find the options. If you choose to customize, you will see a textbox for HTML template. A starting template is:
<html> <head> </head> <body> <div class='nabble' id='nabble' /> </body> </html>
In this template, <div class='nabble' id='nabble' /> represents the Nabble block. You can customize this by adding HTML code before or after the Nabble block. For example, the code below adds a <H1> titled "My Customized Forum" above the Nabble block.
<html> <head> </head> <body> <H1>My Customized Forum</H1> <div class='nabble' id='nabble' /> </body> </html>
You can also use a <table> structure, for example, to wrap HTML code around the Nabble block, and thus adding content not only to the top and the bottom, but also to the left and the right.
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan='3'>
Add your content to the TOP
</td>
</tr>
<tr>
<td>
Add your content to the LEFT
</td>
<td>
<div class='nabble' id='nabble' />
</td>
<td>
Add your content to the RIGHT
</td>
</tr>
<tr>
<td colspan='3'>
Add your content to the BOTTOM
</td>
</tr>
</table>
</body>
</html>
The customization of a Nabble skin is simply HTML programming around the Nabble block. You can create a forum and play with it using simple examples like the above.
You can customize a Nabble forum to have your site's header, footer, navigation, and even ads. The forum is hosted on Nabble but feels like a native part of your website.
To achieve this, you simply reuse the existing HTML code from your website, carve a hole in the middle, then replace it by the Nabble block. Please note that this is NOT using a crude iframe to frame a single Nabble forum front page into your site. With an iframe, you only frame the front page of a forum, leaving out all the other pages such as search result page, compose page, user registration and account page ... Nabble allows "true" customization that customizes all the pages in your forum to exactly match your website.
There are 3 steps:
1. Get the absolutized HTML code of your target page, for example, your homepage.
Use Nabble's UrlAbsolutizer tool to download the HTML code of your target page, for example, it can be your homepage. This tool will absolutize URLs in the HTML so that the downloaded code can loaded from anywhere. There is also a "Test" button that you can use see the rendered HTML in Nabble.
2. Carve out a block from the code, test, then insert the Nabble block
You can use the same UrlAbsolutizer tool to carve out the unwanted HTML code. For example, if the HTML code contains a header, a footer, and a content block, you want to carve out the content block to replace it by the Nabble block. You need to search and find where the content block starts and ends, then carve out the corresponding HTML code. Every time you carve, you can use the "Test" button to check. If the skin looks fine after all your carving, you can then insert <div class='nabble' id='nabble' /> into the hole you carved. Copy the code from the UrlAbsolutizer textbox.
3. Save this as the skin for your Nabble forum
Go to your forum, click "Edit this forum" link, choose to "Customize Appearance", replace the code in the textbox by your new code. Click "Preview" button to preview, if OK, "Save".
You can always change the HTML code further to fine-tune the layout. In most cases, if your website uses a white or light-colored background, the above is all you need to fit a Nabble forum into your site.
If your site uses a lot of Div(s) to control layout, it may cause problems. If you find blocks floating into each other, the easiest fix is to use Table instead of Div. Changing Div to Table in the skin template code is just html programming.
After wrapping Nabble by elements from your website, you may also need to customize the font and color used in the Nabble block to match the font and colors used on your site. For example, if your website uses yellow for the link color, it will look inconsistent for the Nabble content to have blue links.
To achieve this, you will need to work with Nabble's stylesheet to customize color and fonts. This requires a very basic understanding of CSS stylesheet. But even if you know nothing about CSS, you can probably still do a decent job by just tweaking what's already there. You can always ask us if you get stuck.
Nabble's CSS stylesheet is located here: http://www.nabble.com/site.css. Don't be afraid. The content of the stylesheet is logical, and you can tweak what's already there. Any CSS that you add to your HTML template is loaded after Nabble's CSS, so it will override Nabble rules. So you only have to add the CSS that you want to change.
The 1st section is font parameters. You can tweak the values to change font family and size. All Nabble font sizes are proportional.
/* font and global ---------------------------------------------------*/
body, input, textarea, select {
font-family: tahoma,geneva,helvetica,arial,sans-serif;
}
body, table .nabble {
font-size: .75em;
margin: .8em;
}
code {
font-size: 1.1em;
}
.small {
font-size: 0.9em;
}
The 2nd section specifies all the colors used in the Nabble skin. These colors are grouped into 3 sub-blocks: foreground (text & link) colors, background colors, and border colors.
/* color scheme ------------------------------------------------------*/
foreground (text and link) colors
/* text and link (foreground) colors -----------------*/
.nabble,
.nabble table,
.nabble .info-message th {
color: #000000; /* black */
}
.nabble h1,
.nabble .light-black {
color: #333333; /* black (light) */
}
.nabble .important {
color: #cc0000; /* red (dark) */
}
.nabble th,
.nabble .form-label,
.nabble .weak-color {
color: #666666; /* gray */
}
background colors
/* background colors --------------------*/
.nabble,
.nabble .no-bg-color {
background: #ffffff; /* white */
}
.nabble .shaded-bg-color {
background: #eeeeee; /* gray (light) */
}
.nabble th,
.nabble .dark-bg-color {
background: #dddddd; /* gray (medium) */
}
.nabble .highlight {
background: #ffff66; /* yellow */
}
.nabble .error-message,
.nabble .info-message,
.nabble .light-highlight {
background: #ffffcc; /* yellow (weak) */
}
.nabble .info-message th,
.nabble .dark-highlight {
background: #ffcc66; /* yellow (light) */
}
border colors
/* border colors ------------------------*/
.nabble table,
.nabble li,
.nabble div,
.nabble .medium-border-color {
border-color: #cccccc; /* gray (medium) */
}
.nabble td,
.nabble .light-border-color {
border-color: #eeeeee; /* gray (light) */
}
.nabble .dark-border-color {
border-color: #666666; /* gray */
}
.nabble .error-message {
border-color: #cc3300; /* red (dark) */
}
.nabble .info-message {
border-color: #ffcc33; /* yellow (dark) */
}
To customize the color, you first decide which part(s) of the above CSS code needs a change. Then you can copy those parts into a text editor to edit. After your editing:
1. Wrap the edited text into a pair of <Style>...</Style> tag
For example, if you want to change the link color to yellow, you will generate the following CSS code:
<style>
.nabble a:link {
color: yellow;
}
</style>
2. Insert your <Style>...</Style> code into the <head>...</head> tag of your skin template
Go to your "Customize Appearance" textbox, locate the <head>...</head> tag. For exmaple, in this template:
<html> <head> ... </head> <body> ... ... </body> </html>
Insert your <style>...</style> code between the pair of <head> and </head> tags, you get:
<html>
<head>
<style>
.nabble a:link {
color: yellow;
}
</style>
</head>
<body>
...
...
</body>
</html>
3. "Preview" the change, then "Save".
By inserting your own stylesheet elements into the <head>...</head> section, your code will override the Nabble code, thus customize the Nabble appearance.
For websites using a white or light-color background, the default Nabble color will mostly fit, therefore there is usually no need to make color changes. But if your website uses a black or dark-color background, then you will need to make significant color changes.
Below is a sample CSS color code for a black-background website. You can copy the code and use it as a starting point to tweak further. This is easier than tweaking the default site.css color code which assumes a white background.
<style>
/* text and link (foreground) colors -----------------*/
.nabble,
.nabble table,
.nabble .info-message th {
color: #ffffff; /* white */
}
.nabble a:link {
color: #ffcc66; /* rosy brown */
}
.nabble a:visited {
color: #ffffcc; /* beige */
}
.nabble h1,
.nabble .light-black {
color: #eeeeee; /* silver */
}
.nabble .important {
color: #ffcc33; /* brown */
}
.nabble th,
.nabble .form-label,
.nabble .weak-color {
color: #cccccc; /* silver */
}
/* background colors --------------------*/
body, .nabble,
.nabble .no-bg-color {
background: #000000; /* black */
}
.nabble .shaded-bg-color {
background: #333333; /* black (light) */
}
.nabble th,
.nabble .dark-bg-color {
background: #666666; /* gray */
}
.nabble .highlight {
background: #669900; /* green */
}
.nabble .error-message,
.nabble .info-message,
.nabble .light-highlight {
background: #cc3300; /* red */
}
.nabble .info-message th,
.nabble .dark-highlight {
background: #cc0000; /* red (dark) */
}
/* border colors ------------------------*/
.nabble table,
.nabble li,
.nabble div,
.nabble .medium-border-color {
border-color: #666666; /* gray */
}
.nabble td,
.nabble .light-border-color {
border-color: #333333; /* black (light) */
}
.nabble .dark-border-color {
border-color: #cccccc; /* silver */
}
.nabble .error-message {
border-color: #ffcc33; /* rosy brown */
}
.nabble .info-message {
border-color: #3366ff; /* blue */
}
</style>
You can further customize other parts of Nabble by digging deeper into the Nabble stylesheet. You can tweak or add values to override Nabble's default behavior the same way. But for that you will need CSS expertise.
When you copy the html code of your website to contruct a Nabble skin, you will need to remove all parameters from the <html> <head> <body> tags.
Nabble requires that the <html> <head> <body> tags be without any parameters. For example, if you copy the following tags from your website, Nabble's skin feature will complain.
<html xmlns="http://www.w3.org/1999/xhtml"> ... <body bgcolor="#DEE2ED" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
You should remove those parameters to make these tags simply <html> <head> <body>. If you absolutely need those parameters, you should specify them using CSS and place the CSS code into the <head></head> section.
If you still have questions, visit Nabble Help or the Old Nabble Support forum.
« Go Back
| Free embeddable forum powered by Nabble | Forum Help |
