Chatbox
nav_first.pngFirst: package:1
Wikidot per-site help
Edited: 08 Nov 2009 12:06 by: pieterh
Comments: 0
Tags:
nav_prev.pngPrevious: package:45
Password
Edited: 29 May 2011 00:32 by: James Kanjo
Comments: 0
Tags:
Last: package:49
Advanced Search
Edited: 01 May 2012 12:30 by: tsangk
Comments: 68
Tags:
nav_last.png
Next: package:47
Site fixed logo
Edited: 02 Dec 2011 17:47 by: Arotaritei Vlad
Comments: 0
Tags:
nav_next.png

Chatbox
Package submitted by leiger
29 May 2011 07:41

rating: +4+x

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!

leiger: 30 May 2011 05:56
leiger: 30 May 2011 05:40
Timothy Foster: 29 May 2011 12:42
Timothy Foster: 29 May 2011 12:41
bcammo: 29 May 2011 08:50
leiger: 29 May 2011 08:47
leiger: 29 May 2011 08:40
James Kanjo: 29 May 2011 08:17

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.

Comments: 0

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License