We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.

Join our community!

If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
  • Pages:
  • 1
  • 7
Cheshire Emoticon System; a new & easy way to customize emoticons to each theme
Topic Started: Apr 4 2012, 10:38 PM (26,341 Views)
Member Avatar
No PMs on this account please
[ *  *  *  *  *  *  * ]
Introducing....Cheshire Emoticons - a unique system that once installed, allows you to customize your emoticons per theme by changing only ONE BASE IMAGE.

Designer: Helena (with expert coding consultation from Reid)
Date created: March 2012
Posted Image

Cheshire Emotes are a brand new way to install theme-specific emoticons on your ZetaBoards forum. In the preview, you will notice that only the faces appear in the emoticon images. To use the Cheshire Emoticon system, you only need to install the basic CE faces in your ACP. Then, add a short code to the CSS of each theme that includes the URL of a customized blank emoticon base. And voila! Matching emoticons for all your themes without tedious javascript replace-arrays to configure each time, and without the loading delay. This system is also compatible with all popular browsers that render PNGs properly.

Preview: The Cheshire Emoticon system is currently installed on ZNR on all active themes, so you can check it out right on this board :shifty: <-- o look! There's one right there.....

DOWNLOAD Cheshire Emoticon Set
DOWNLOAD Sample Blank Emoticon Bases
DOWNLOAD Sample Faces .PSD
DOWNLOAD Sample Faces .XCF

Includes: Basic set includes the 40 emotes shown in the preview, including several PNG animations. Extras download has 8 additional choices. An assortment of blank bases are included in the bases download, including a blank for the ZB default set and a couple of specialty shapes.

Edits allowed? You may use your own shortcuts, recolor the blank emote bases and make new emoticons or bases as desired.

Installation: Download the basic emoticon faces set and install them in your ACP Emoticon upload page. Use the shortcuts in this pre-configured plug-in code if you don't want to do a lot of editing. (The emoticons are in the same order in the supplied code as in the preview to make using the same shortcuts easier, but it doesn't really matter what order the array is in in your CSS as long as each shortcut has its own entry. (No longer needed with new CSS below.)

Update Edit (as of 6-18-2013): Thanks to Cory for this streamlined coding that greatly simplifies this installation for basic emoticon installations. Install the following code to activate the Cheshire emoticons you have uploaded to the emoticon manager:
Abbreviated CSS method--USE IF YOU DO NOT USE CUSTOM EMOTICONS (or only a few)


Be sure to insert your emoticon base image URL. Also if you have changed any shortcuts, make sure the new non-standard shortcuts are included in the code sequence.

To add more emotes, just add an instance of:


for each new emoticon you upload. Whatever your designated shortcut is should be inserted between the quotes.

blank code for editing

Making your own emotes: You are welcome to make your own faces to customize your set. To use the codes above, the image size of the faces must match the image size of the blank base image. Cheshire emotes take on the color shades of the emoticon base they overlay because the face designs are semitransparent. I found that what works the best is an 80% opacity on a black, and a 30% opacity on a white highlight color. This allows for a good effect on both light and bright to deep-colored emoticon bases. Because this transparency/opacity property is crucial to how these perform on various colored backgrounds, your emoticons must be saved in PNG format to display properly.

Using a bigger base image

Adding new arrays: You can install the basic set (or any part of it) as is, and then augment with bigger emoticons and/or different bases by adding a new code section exactly like the one above for each new group.

Requests for additional emoticons: My hope is that I've inspired you to go off and adapt your own favorite emoticons into Cheshire style ones. However, I will try to accommodate some emoticon conversion requests in this topic as I have time, so if you need some help, please ask. :helena:
Attached to this post:
Attachments: CheshireEmotePreview.png (114.57 KB)
Attachments: CheshireEmotes.zip (21.31 KB)
Attachments: BlankEmoteBases.zip (59.01 KB)
Attachments: CheshireEmoteFacesSample.psd (38.08 KB)
Attachments: CheshireEmoteFacesSample.xcf (15.41 KB)
Edited by Helena, Sep 6 2015, 07:11 PM.
Offline Profile Quote Post Goto Top
Member Avatar
M is for Mod

Glad you got it sorted. :)
Online Profile Quote Post Goto Top
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Emoticons · Next Topic »
Add Reply
  • Pages:
  • 1
  • 7