*Edit: This has now been made into a mod and updated/improved/bug fixes.
Link to Mod (http://mods.simplemachines.org/index.php?mod=435)
Rate this Mod (http://mods.simplemachines.org/index.php?action=review;sa=add;mod=435)
Thanks to Alan S (http://www.simplemachines.org/community/index.php?action=profile;u=41787) [http://www.theteenzone.net/] for making my code into the original Mod.
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg147.imageshack.us%2Fimg147%2F8695%2Fpic1colorbarpostscreenww1.jpg&hash=9e4549e6e36e9036517f2fbd8c8a0ba65774eefa)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg147.imageshack.us%2Fimg147%2F8028%2Fpic2colorbarqrscreenle3.jpg&hash=69a7774a16cdf9f2547a32b1c624be3717508ef3)
Color Bar Only.
Notes
This is converted from a PHPBB/PHPBB2 mod by mat <mat100.AT.ifrance.com> which I've improved for another board provider. I've converted it again for my SMF, so here it is. (I'm knew to SMF, so I dont know how to make it into a mod, I've hard coded mine.
- Color bar on clicks inserts at post @ cursor (works for most browsers as far as I have tested)
- Two boxes to far left, one shows the color last clicked, the other the one last hovered over.
Tested & Works On SMF1.1 RC2 (but since its independant of SMF, it should work for any version with little or no modding AFAIK)
Plans For Future
I want to get orange/brown colors, but I cant/dont know the matrix for creating an orange/brown strip
if anyone knows, it would be great to add.
Demo http://www.mortons-solicitors.co.uk (on new topic post or quick reply)
Image Color Bar
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.youposted.com%2Fstuff%2Fcolorbar.png&hash=fb6ac4b74f16c7796cc68771ec35c98518d871b7)
For each skin you want to use this on in the NEW TOPIC/POST REPLY
Note if you use the enhanced Quick reply like me, you insert the same lines in Display.template.
Open Themes/default/Post.template.php
AFTER (Line 844) in default unmodded RC2 version
// Okay... we have the link. Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
// I guess it's a divider...
else
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
BEFORE (Line 845 in default unmodded RC2 version)
}
// Now start printing all of the smileys.
if (!empty($context['smileys']['postform']))
{
echo '
<tr>
<td align="right"></td>
<td valign="middle">';
INSERT THIS CODE
echo '<tr>
<td align="right"></td>
<td valign="middle">
<script language="javascript" src="', $settings['default_theme_url'], '/color.js" type="text/javascript"></script>
</td>
</tr>';
Save as color.js in the folder Themes/default/
(you need to ensure there is a blank.gif image in the subfolder images/) which it uses as a placeholder [otherwise its screwy in IE]
// COLOR BAR * Code Based On PHPBB2 hack by mat < mat100.AT.ifrance.com >
// Reworked/Converted/Improved for use on SMF boards by Karlbenson aka(Smack!) <URL:http://www.youposted.com/>
// Insert @ Cursor Script Copyright © 2004 Charles C. Fu <URL:http://www.web-i18n.net/>
// V1.01 - Added Greyscale Colors
var pas = 25;// Defines the number of colors PER set eg 25 reds, 25 yellows etc
function color(MyString)
{
bbcodeopen='[color=' + MyString + ']'
bbcodeclose='[/color]'
addElement(bbcodeopen, bbcodeclose)
}
var base_hexa = "0123456789ABCDEF";
function dec2Hexa(number)
{
return base_hexa.charAt(Math.floor(number / 16)) + base_hexa.charAt(number % 16);
}
function RGB2Hexa(TR,TG,TB)
{
return "#" + dec2Hexa(TR) + dec2Hexa(TG) + dec2Hexa(TB);
}
col = new Array;
col[0] = new Array(255,0,255,0,255,-1);
col[1] = new Array(255,-1,255,0,0,0);
col[2] = new Array(0,0,255,0,0,1);
col[3] = new Array(0,0,255,-1,255,0);
col[4] = new Array(0,1,0,0,255,0);
col[5] = new Array(255,0,0,0,255,-1);
col[6] = new Array(255,-1,0,0,0,0);
function rgb(pas){
for (j=0;j<6+1;j++){
for (i=0;i<pas+1;i++)
{
r = Math.floor(col[j][0]+col[j][1]*i*(255)/pas);
g = Math.floor(col[j][2]+col[j][3]*i*(255)/pas);
b = Math.floor(col[j][4]+col[j][5]*i*(255)/pas);
codehex = r + '' + g + '' + b;
document.write(' <td class="color_cell" bgColor="' + RGB2Hexa(r,g,b) + '" onClick="color(this.bgColor);document.getElementById(\'colorused\').bgColor = this.bgColor;" '
+ 'onmouseover="document.getElementById(\'colorused1\').bgColor = this.bgColor;this.style.cursor=\'pointer\'" title="Insert Color BBCode [color='+ RGB2Hexa(r,g,b) + '][/color]"></td>\n');
}}}
function greyscale() {
var rows = 40;
for (i=0;i<rows;i++) {
v = Math.floor(i*(255)/rows);
codehex = v + '' + v + '' + v;
document.write(' <td class="color_cell" bgColor="' + RGB2Hexa(v,v,v) + '" onClick="color(this.bgColor);document.getElementById(\'colorused\').bgColor = this.bgColor;" '
+ 'onmouseover="document.getElementById(\'colorused1\').bgColor = this.bgColor;this.style.cursor=\'pointer\'" title="Insert Color BBCode [color='+ RGB2Hexa(v,v,v) + '][/color]"></td>\n');
}
}
/* Insert @ Cursor Script Copyright © 2004 Charles C. Fu <URL:http://www.web-i18n.net/> */
/* Try to add text surrounded by prepend/append in a number of ways. */
function addElement(prepend, append) {
saveTextarea();
var a = document.forms.postmodify.message; // reply textarea
if (a.selectionStart != null) // Moz
insertSelectionMoz(a, prepend, append);
else if (document.selection) // IE/Win32
insertSelectionIEWin32(a, prepend, append);
else {
if (a.getSelection)
a.value += prepend + getSelection() + append;
else
a.value += prepend + append;
a.focus();
}
}
/* For Mozilla family browsers, replace selected textarea text with
* selected text surrounded by prepend/append. If no other text is
* selected, just surround selected textarea text. */
function insertSelectionMoz(a, prepend, append) {
var sel = window.getSelection().toString();
if (sel == "")
return surroundMozTextareaSelection(a, prepend, append);
/* Replaces selected textarea text with (prepend+selected
* text+append). Leaves inserted selected text selected. */
var selLength = sel.length;
var t = a.value; // textarea text
var scrollTop = a.scrollTop;
var scrollLeft = a.scrollLeft;
a.value = t.substring(0, start) + prepend + sel + append + t.substring(end);
a.scrollTop = scrollTop;
a.scrollLeft = scrollLeft;
a.selectionStart = start + prepend.length;
a.selectionEnd = start + prepend.length + selLength;
a.focus();
}
/* Replaces selected textarea text with (prepend+selected
* text+append). That is, it surrounds the selected text with
* prepend/append. Leaves surrounded text selected. */
function surroundMozTextareaSelection(a, prepend, append) {
var start = a.selectionStart;
var end = a.selectionEnd;
var t = a.value; // textarea text
var scrollTop = a.scrollTop;
var scrollLeft = a.scrollLeft;
a.value = (t.substring(0, start)
+ prepend + t.substring(start, end) + append
+ t.substring(end));
a.scrollTop = scrollTop;
a.scrollLeft = scrollLeft;
if (a.setSelectionRange)
a.setSelectionRange(start + prepend.length, end + prepend.length);
else {
a.selectionStart = start + prepend.length;
a.selectionEnd = end + prepend.length;
}
a.focus();
}
/* Stores IE caret position. */
function storeIECaret(el) {
var el = document.forms.postmodify.message;
if (el.createTextRange)
el.caretPos = document.selection.createRange().duplicate();
}
/* Replaces selected textarea text (text at caret) with
* (prepend+selected text+append). Leaves inserted selected text
* selected. */
function insertSelectionIEWin32(a, prepend, append) {
if (! a.caretPos) {
/* IE6/Win32 initially places cursor at the start of textareas. */
a.caretPos = a.createTextRange();
a.caretPos.collapse();
}
var insertText = document.selection.createRange().text;
/* Can't calc on insertText.length since that counts CR/LF as 2 but
* caretPos counts it as 1. */
a.caretPos.text = prepend;
var afterPrepend = a.caretPos.duplicate();
a.caretPos.text = insertText + append;
a.caretPos.move("character", - append.length);
a.caretPos.setEndPoint("StartToStart", afterPrepend);
a.caretPos.select();
}
function selectionLengthIE(sel) {
var r = sel.duplicate();
r.collapse();
var len = 0;
while (! r.isEqual(sel)) {
r.moveEnd("character", 1);
++len;
}
return len;
}
function saveTextarea(undoOrRedo) {
var a = document.forms.postmodify.message; // reply textarea
var state = new Object();
state.value = a.value;
if (a.selectionStart) {
state.selectionStart = a.selectionStart;
state.selectionEnd = a.selectionEnd;
} else if (a.caretPos) {
state.offsetLeft = a.caretPos.offsetLeft;
state.offsetTop = a.caretPos.offsetTop;
state.length = selectionLengthIE(a.caretPos);
}
a.focus();
}
function installPostHandlers(msg) {
if (! msg)
return;
document.forms.postmodify.message.onkeyup = storeIECaret;
document.forms.postmodify.message.onclick = storeIECaret;
document.forms.postmodify.message.onselect = storeIECaret;
}
document.write('<table cellspacing="0" width="450px" cellpadding="0"><tr>')
document.write('<td id="colorused" name="color_bar" onClick="color(this.bgColor);" onMouseOver="this.style.cursor=\'pointer\'" width="10" class="color_bar">')
document.write('<img name="color_bar" src="Themes/default/images/blank.gif" width="10px"/></td>')
document.write('<td name="color_bar" width="5"></td>')
document.write('<td id="colorused1" name="color_bar" onClick="color(this.bgColor);" color(this.bgColor); onMouseOver="this.style.cursor=\'pointer\'" width="10" class="color_bar">')
document.write('<img name="color_bar" src="Themes/default/images/blank.gif" width="10px" /></td>')
document.write('<td><img name="color_bar" src="Themes/default/images/blank.gif" width="3px"/></td>')
document.write('<!--' + rgb(pas) + '// -->')
document.write('<!--' + greyscale() + '// -->')
document.write('</tr></table>')
CSS Classes to mod as you require
.color_bar {
border-color:#808080;
border-width:1px;
border-style:solid;
}
.color_cell {
height:12px;
width:5px;
border:0px solid #808080;
}
Very interesting, I'm sure you could figure out how to package it up. Check out this link:
http://www.simplemachines.org/community/index.php?topic=20319.0 (http://www.simplemachines.org/community/index.php?topic=20319.0)
If you have any question let me know.
-Snork13
thx, I'll check it out
Link To Mod (http://mods.simplemachines.org/index.php?mod=428)
Karlbenson gave me permission to turn it into a mod.
2 Packages Available.
1. Colourbar.zip - Adds a colour selection bar to the post template
2.quickreply_colourbar.zip - Adds a colour selection bar to the post template and to the quick reply box ( providing the enchanced quick reply box mod is installed first. )
woot, can't wait to try it ;)
Oh and this works with 1.1RC2 ONLY! it is not compatable with 1.0.7 , Will test with RC3 when its available
Zitat von: Alan S in August 20, 2006, 11:05:36 VORMITTAG
Link To Mod (http://mods.simplemachines.org/index.php?mod=428)
Karlbenson gave me permission to turn it into a mod.
2 Packages Available.
1. Colourbar.zip - Adds a colour selection bar to the post template
2.quickreply_colourbar.zip - Adds a colour selection bar to the post template and to the quick reply box ( providing the enchanced quick reply box mod is installed first. )
this link isnt working
Yep, Whats happened is, I asked Alan S to transfer the mod to me (as i made the original code, he made it into a mod) so that I could update it.
Well he removed the mod and I've uploaded the new version, which is yet to be approved (hopefully soon).
There are now 3 versions of it which work for RC2 & RC3
http://mods.simplemachines.org/index.php?mod=435
*Update, this mod has now been approved.
Link to Mod (http://mods.simplemachines.org/index.php?mod=435)
Rate The Mod (http://mods.simplemachines.org/index.php?action=review;sa=add;mod=435)