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
Replace Emoticon Box With Anything; By Faylen
Topic Started: Jul 22 2016, 12:02 AM (328 Views)
Faylen
Member Avatar
Member
[ *  * ]
Code Name: Replace Emoticon Box with Anything

What the code does: Replaces the Emoticons box in the reply screen with, well, anything else you want or an image. I initially created this code to include a calculator in the reply screen on a forum roleplay I was running. We had a member with dyscalculia and I wanted to make getting the damage output of characters easier for her and other math challenged individuals.

Preview

How to use the code: You place the code in Below the Boards, alternatively, you can place the parts in the Style tags in the CSS portion of the ACP under Board Themes and Appearences. But you'd have to do so for each skin you have.

How to install the code:

Below the Board
 
<style>
#target {
width: 220px; <!-- Change based on the desired width of your emoticon box replacer -->
height: 420px; <!-- Change based on the desired height of your emoticon box replacer-->
border-style: none;
}
</style>

<script>
document.getElementById("emot_wrap").style.visibility = "hidden";
var container = document.getElementById("c_emot");

var iframe = document.createElement('iframe');
iframe.id = "target";
iframe.src = "WEBSITE/IMAGE URL HERE";
container.appendChild(iframe);
</script>


Red can be changed
Blue can be removed

Extra notes:

An image works best for this. If you use a website URL make sure it's to a site that you are in control of and can put a <div id="NAME"> on the page where you want it to display at and #Name at the end of the Website page URL. You can create a Webpage in ACP, put the content you want displayed in the reply screen there and have it display in the posts. If you don't want a scroll bar when linking directly to a webpage you must put the below code In the webpage itself.

Code:
 
<style>
body {
overflow: hidden;
}
</style>


It'll take some tweaking to get it to display correctly if using a webpage. So if you are not versed in CSS/HTML I'd recommend sticking to an image that is made to be the exact size desired. This would be useful if there are some rules you'd like to be visible when replying on a forum and want it to be aesthetic in an image form. Honestly, the use for this is quite versatile and the limit is how resourceful you are.

If you use a custom webpage hosted on Zetaboards it will use an extra Ad Credit per reply screen opened.
Edited by Faylen, Jul 22 2016, 12:12 AM.
Offline Profile Quote Post Goto Top
 
Skyon Archer
Member Avatar
Member
[ *  *  *  * ]
Here are some other options to change the Emoticon Box as well:

Code:
 
<script type="text/javascript">
// <--- two slashes hide that line from being seen from the browser so delete those next to the line you want to work

/* this is an image I'll be using, change it to your image address */
var replaceImg = 'http://go.imagehost.club/072410f0';

/* to completely replace the emoticon box with an image, remove slashes from the line below */
//$('#emot_wrap').html('<img src="' + replaceImg +'" id="c_emot" />');

/* to put an image behind the emoticon box, remove slashes from the line below */
//$('#emot_wrap').css('background-image','url(' + replaceImg + ')');

/* to change the content of the emoticon box, change the info below and remove slashes from the line below */
//$('#emot_wrap').html('<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</p><p>Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz.</p><p>Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim.</p><p>Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack! " my brave</p>');
</script>


Try each one on your site to see the differences. Hope this helps :)
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply