This package provides a chatbox that you can use on your Wikidot site. And it's fully customisable using a CSS module!
Instructions
See it in action!
Installation
To install this package in your site:
Step 1. (required)
Add this code to any of your pages:
[[include :csi:chatbox]]
Step 2. (optional, but recommended)
Make the 'chatbox' category autonumbered in your site manager (or whichever category you end up using - see below).
Step 3. (optional, but recommended)
Configure the module using the attributes listed in the table below, or customise it's appearance using CSS!
Attributes
There are some options that you can use:
Attribute | Default | Allowed | Description |
---|---|---|---|
width | 400px | Any valid width (px, em, pt) | Allows you to change the width of the module. |
width-textarea | 50 | Any positive integer | If you change the width, you may want to change the text area to match. |
max | 10 | Any integer from 0 and upwards | Allows you to set the maximum number of comments to display |
button | Post | Any string / text | Lets you customise the text that appears on the button at the bottom of the module |
category | chatbox | Any valid category name | Allows you to choose where each comment is saved. This category must be autonumbered! |
An example that uses the default attributes:
[[include :csi:chatbox |width=400px |width-textarea=50 |max=10 |button=Post |category=chatbox ]]
Anything that you don't specify will use the default value instead.
Modifying appearance using CSS
You can modify the appearance using CSS (use the CSS module or add it to your main theme). Here's a rough layout guide for this CSI module:
div.chatbox \___div.chatbox-border \___span.chatbox-message \___span.username \___span.comment
- chatbox
- The main, overriding class that surrounds everything!
- chatbox.chatbox-border
- Border around the chatbox
- chatbox.chatbox-border.chatbox-message
- A single listed message, posted by a user
- chatbox.chatbox-border.chatbox-message.username
- The user that posted the message
- chatbox.chatbox-border.chatbox-message.comment
- The comment that was posted
Note: If you want to add additional classes to make customisation easier on your site… go ahead! Edit the back-end code to add in additional CSS classes.
好的模块,但是有bug
Saving page…