Welcome Guest [Log In] [Register]
Support Staff Recommendation
All communities remaining on zIFBoards/InvisionFree should check their conversion opt-in selection in their Admin CP (menu item Tapatalk Conversion)
(Read More)
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:
Multiquote (on) Multiquote (off)
Add Reply
Cheshire Emoticon System; a new & easy way to customize emoticons to each theme
Topic Started: Apr 4 2012, 10:38 PM (25,084 Views)
Helena-ZNR
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)

Original Method - USE IF YOU HAVE MANY CUSTOM EMOTES

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:

img[alt="SHORTCUT"],

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
 
DaPizzaMan
Member Avatar
#TeamSupport

Now that I think about it, this is a great way to work with emoticons if you don't mind messing with those who have a version of IE that is incompatible with CSS3 selectors.

Nonetheless, I love it (especially because I love messing with IE :r ).
Offline Profile Quote Post Goto Top
 
Geoffrey
Member Avatar
Devilishly Handsome
[ *  *  *  *  * ]
This is one fantastic code. Takes a bit of time to set up, but to never have to install emotes again is well worth it. Thanks for this, Helena.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
DaPizzaMan: The attribute selectors used in this topic were introduced in CSS2.
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Cory
Apr 6 2012, 10:17 AM
DaPizzaMan: The attribute selectors used in this topic were introduced in CSS2.
Even better, I suppose. :P
Offline Profile Quote Post Goto Top
 
Helena-ZNR
Member Avatar
No PMs on this account please
[ *  *  *  *  *  *  * ]
This really should be compatible over almost all browsers. If a user has a browser so old that that it doesn't recognize CSS2, they will just view the emoticons as they are in the preview....as Cheshire faces with no backgrounds. They would appear as kind of glorified text emotes. ;)

Like so: Posted Image
Offline Profile Quote Post Goto Top
 
Geoffrey
Member Avatar
Devilishly Handsome
[ *  *  *  *  * ]
Honestly, I kind of like the look of them with no base. haha.
Offline Profile Quote Post Goto Top
 
Helena-ZNR
Member Avatar
No PMs on this account please
[ *  *  *  *  *  *  * ]
You're certainly welcome to use them that way.

But t'will make your forum look slightly unique. :giggle:




Note to those that have already downloaded the system: I've added a couple specialty shape emoticon bases to the download to help give you some ideas.
Offline Profile Quote Post Goto Top
 
N00b.
Member
[ *  *  * ]
Why does all the cool stuff come out when I move my forum?
Offline Profile Quote Post Goto Top
 
Geoffrey
Member Avatar
Devilishly Handsome
[ *  *  *  *  * ]
Problem!

When I add the CSS to my themes, the CSS is removed entirely. It's only text and links, no CSS and no styling at all. Here's my coding:

Code:
 
img[alt="^_^"], img[alt=":annoyed:"], img[alt=":arr:"], img[alt=":$"], img[alt=":huh:"], img[alt="B-)"], img[alt=":cry:"], img[alt=":D"], img[alt=":devious:"], img[alt=":doh:"], img[alt="(n)"], img[alt="(y)"], img[alt=":drat:"], img[alt=":err:"], img[alt=":facepalm:"], img[alt=":geek:"], img[alt=":glare:"], img[alt=":lol:"], img[alt=":@"], img[alt=":\"], img[alt=":ninja:"], img[alt=":nono:"], img[alt=":o"], img[alt=":orly:"], img[alt=":sigh:"], img[alt=":P"], img[alt=":pwease:"], img[alt=":rofl:"], img[alt=":("], img[alt="<.<"], img[alt=":omg:"], img[alt=":sick:"], img[alt=":)"], img[alt=":smug:"], img[alt=":#"], img[alt=":srsly:"], img[alt=":wut:"], img[alt="O.o"], img[alt=":sarcastic:"], img[alt=":r"], img[alt=";)"], img[alt=":wub:"], img[alt="XD"], img[alt=":yes:"], img[alt=":zip:"], img[alt=":zombie:"], img[alt=":shifty:"]{
background: url(http://z3.ifrm.com/28094/5/0/p445912/baseBlue.png) no-repeat;
}


I put it at the top of my CSS, and then also tried it somewhere in the middle and at the very bottom, all did the same thing (removed all the CSS).
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
img[alt=":\"]
You're using a backslash, insert another backslash before the backslash to escape it.
Offline Profile Quote Post Goto Top
 
Geoffrey
Member Avatar
Devilishly Handsome
[ *  *  *  *  * ]
Thanks Cory!
Offline Profile Quote Post Goto Top
 
Eccentric Feline
Member Avatar
梦想
[ *  *  *  *  *  *  *  * ]
This is really a great system. Kudos to you and Reid for creating it! :D
Offline Profile Quote Post Goto Top
 
Reid
Member Avatar
Č una trappola!

Eccentric Feline
Apr 6 2012, 07:37 PM
This is really a great system. Kudos to you and Reid for creating it! :D
The credit is all Helena's. I may have developed the technique, but as you can tell, it's not the most difficult thing in the universe. The idea is the important thing.
Offline Profile Quote Post Goto Top
 
Lothlómendil-ZNR
Member Avatar
Member
[ *  *  *  * ]
This is AWESOME! Great work, guys, as always. :)
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Emoticons · Next Topic »
Add Reply