The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Replying to posts and choosing different colours

View previous topic View next topic Go down

In progress Replying to posts and choosing different colours

Post by cougar30 on January 19th 2012, 8:04 pm

Hi all,

I have just found that when you reply to posts that you have only a limited amount of colours to choose from? Is there a way to open this up a bit or some coding or changes that can be made to introduce more colours ?

Thanks in advance

Andy

cougar30
Forumember

Male Posts : 244
Reputation : 1
Language : English

http://nineelms.freeforum.me.uk/forum

Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by Guest on January 19th 2012, 8:12 pm

Hi! Can you provide your forum url? Smile

Guest
Guest


Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by cougar30 on January 19th 2012, 8:22 pm

Thanks, this is the URL. http://nineelms.freeforum.me.uk/forum

cougar30
Forumember

Male Posts : 244
Reputation : 1
Language : English

http://nineelms.freeforum.me.uk/forum

Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by Guest on January 19th 2012, 8:27 pm

@cougar30 wrote:Thanks, this is the URL. http://nineelms.freeforum.me.uk/forum
I'm afraid this is possible only for phpBB2 and PunBB versions. Sad

Guest
Guest


Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by SLGray on January 19th 2012, 9:36 pm

You can add more color choices to the text editor, but not the drop-down menu for the title: http://www.diondesigns.org/t1377-example-11-color-picker-for-forumotion-editors-all-boards


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by APE on January 19th 2012, 9:50 pm

slg wrote:You can add more color choices to the text editor, but not the drop-down menu for the title: http://www.diondesigns.org/t1377-example-11-color-picker-for-forumotion-editors-all-boards
i also found a better one that we use in the ACP
This can be found on our sister site The french forum >> here Add a color picker

APE
Manager
Manager

Male Posts : 8309
Reputation : 716
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by Geezer on January 29th 2012, 10:44 am

Tried your one APE but it would not work , so went back to sig,s version . Dont want to spoil the members too much Laughing

Geezer
Forumember

Posts : 191
Reputation : 0
Language : English

http://cockneyboys.forumotion.co.uk/forum

Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by APE on January 29th 2012, 4:25 pm

LOL im not sure why its not working for you but if your happy with the other one then Cool with me Wink





APE
Manager
Manager

Male Posts : 8309
Reputation : 716
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by Geezer on January 29th 2012, 5:55 pm

From what I can see there is some script missing or am I missing something ?

Geezer
Forumember

Posts : 191
Reputation : 0
Language : English

http://cockneyboys.forumotion.co.uk/forum

Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by APE on January 29th 2012, 11:44 pm

To do this place all this code in (CSS Stylesheet)
Code:
      .colorpicker {
        width: 356px;
        height: 176px;
        overflow: hidden;
        position: absolute;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
        font-family: Arial, Helvetica, sans-serif;
        display: none;
        }
        .colorpicker_color {
        width: 150px;
        height: 150px;
        left: 14px;
        top: 13px;
        position: absolute;
        background: #f00;
        overflow: hidden;
        cursor: crosshair;
        }
        .colorpicker_color div {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
        }
        .colorpicker_color div div {
        position: absolute;
        top: 0;
        left: 0;
        width: 11px;
        height: 11px;
        overflow: hidden;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
        margin: -5px 0 0 -5px;
        }
        .colorpicker_hue {
        position: absolute;
        top: 13px;
        left: 171px;
        width: 35px;
        height: 150px;
        cursor: n-resize;
        }
        .colorpicker_hue div {
        position: absolute;
        width: 35px;
        height: 9px;
        overflow: hidden;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
        margin: -4px 0 0 0;
        left: 0px;
        }
        .colorpicker_new_color {
        position: absolute;
        width: 60px;
        height: 30px;
        left: 213px;
        top: 13px;
        background: #f00;
        }
        .colorpicker_current_color {
        position: absolute;
        width: 60px;
        height: 30px;
        left: 283px;
        top: 13px;
        background: #f00;
        }
        .colorpicker input {
        background-color: transparent;
        border: 1px solid transparent;
        position: absolute;
        font-size: 10px;
        font-family: Arial, Helvetica, sans-serif;
        color: #898989;
        top: 4px;
        right: 11px;
        text-align: right;
        margin: 0;
        padding: 0;
        height: 11px;
        }
        .colorpicker_hex {
        position: absolute;
        width: 72px;
        height: 22px;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
        left: 212px;
        top: 142px;
        }
        .colorpicker_hex input {
        right: 6px;
        }
        .colorpicker_field {
        height: 22px;
        width: 62px;
        background-position: top;
        position: absolute;
        }
        .colorpicker_field span {
        position: absolute;
        width: 12px;
        height: 22px;
        overflow: hidden;
        top: 0;
        right: 0;
        cursor: n-resize;
        }
        .colorpicker_rgb_r {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
        top: 52px;
        left: 212px;
        }
        .colorpicker_rgb_g {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
        top: 82px;
        left: 212px;
        }
        .colorpicker_rgb_b {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
        top: 112px;
        left: 212px;
        }
        .colorpicker_hsb_h {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
        top: 52px;
        left: 282px;
        }
        .colorpicker_hsb_s {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
        top: 82px;
        left: 282px;
        }
        .colorpicker_hsb_b {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
        top: 112px;
        left: 282px;
        }
        .colorpicker_submit {
        position: absolute;
        width: 22px;
        height: 22px;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
        left: 322px;
        top: 142px;
        overflow: hidden;
        }
        .colorpicker_focus {
        background-position: center;
        }
        .colorpicker_hex.colorpicker_focus {
        background-position: bottom;
        }
        .colorpicker_submit.colorpicker_focus {
        background-position: bottom;
        }
        .colorpicker_slider {
        background-position: bottom;
        }


Then just add the javascript code And mark as ( In all the pages )
Code:
/**
 *
 * Color picker
 * Author: Stefan Petre www.eyecon.ro
 *
 * Dual licensed under the MIT and GPL licenses
 *
 */
$(function(){
  $("#color").length!=0&&(function(c){var e=function(){var e=65,j={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:!0,flat:!1},i=function(a,b){var d=h(a);c(b).data("colorpicker").fields.eq(1).val(d.r).end().eq(2).val(d.g).end().eq(3).val(d.b).end()},n=function(a,b){c(b).data("colorpicker").fields.eq(4).val(a.h).end().eq(5).val(a.s).end().eq(6).val(a.b).end()},l=function(a,b){c(b).data("colorpicker").fields.eq(0).val(k(h(a))).end()},
o=function(a,b){c(b).data("colorpicker").selector.css("backgroundColor","#"+k(h({h:a.h,s:100,b:100})));c(b).data("colorpicker").selectorIndic.css({left:parseInt(150*a.s/100,10),top:parseInt(150*(100-a.b)/100,10)})},p=function(a,b){c(b).data("colorpicker").hue.css("top",parseInt(150-150*a.h/360,10))},r=function(a,b){c(b).data("colorpicker").currentColor.css("backgroundColor","#"+k(h(a)))},q=function(a,b){c(b).data("colorpicker").newColor.css("backgroundColor","#"+k(h(a)))},D=function(a){a=a.charCode||
a.keyCode||-1;if(a>e&&a<=90||a==32)return!1;c(this).parent().parent().data("colorpicker").livePreview===!0&&g.apply(this)},g=function(a){var b=c(this).parent().parent(),d;if(this.parentNode.className.indexOf("_hex")>0){d=b.data("colorpicker");var f=this.value,e=6-f.length;if(e>0){for(var g=[],j=0;j<e;j++)g.push("0");g.push(f);f=g.join("")}f=m(s(f));d.color=d=f}else this.parentNode.className.indexOf("_hsb")>0?b.data("colorpicker").color=d=t({h:parseInt(b.data("colorpicker").fields.eq(4).val(),10),
s:parseInt(b.data("colorpicker").fields.eq(5).val(),10),b:parseInt(b.data("colorpicker").fields.eq(6).val(),10)}):(d=b.data("colorpicker"),f={r:parseInt(b.data("colorpicker").fields.eq(1).val(),10),g:parseInt(b.data("colorpicker").fields.eq(2).val(),10),b:parseInt(b.data("colorpicker").fields.eq(3).val(),10)},d.color=d=m({r:Math.min(255,Math.max(0,f.r)),g:Math.min(255,Math.max(0,f.g)),b:Math.min(255,Math.max(0,f.b))}));a&&(i(d,b.get(0)),l(d,b.get(0)),n(d,b.get(0)));o(d,b.get(0));p(d,b.get(0));q(d,
b.get(0));b.data("colorpicker").onChange.apply(b,[d,k(h(d)),h(d)])},E=function(){c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus")},F=function(){e=this.parentNode.className.indexOf("_hex")>0?70:65;c(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");c(this).parent().addClass("colorpicker_focus")},G=function(a){var b=c(this).parent().find("input").focus(),a={el:c(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>
0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:a.pageY,field:b,val:parseInt(b.val(),10),preview:c(this).parent().parent().data("colorpicker").livePreview};c(document).bind("mouseup",a,u);c(document).bind("mousemove",a,v)},v=function(a){a.data.field.val(Math.max(0,Math.min(a.data.max,parseInt(a.data.val+a.pageY-a.data.y,10))));a.data.preview&&g.apply(a.data.field.get(0),[!0]);return!1},u=function(a){g.apply(a.data.field.get(0),[!0]);a.data.el.removeClass("colorpicker_slider").find("input").focus();
c(document).unbind("mouseup",u);c(document).unbind("mousemove",v);return!1},H=function(){var a={cal:c(this).parent(),y:c(this).offset().top};a.preview=a.cal.data("colorpicker").livePreview;c(document).bind("mouseup",a,w);c(document).bind("mousemove",a,x)},x=function(a){g.apply(a.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,a.pageY-a.data.y)))/150,10)).get(0),[a.data.preview]);return!1},w=function(a){i(a.data.cal.data("colorpicker").color,a.data.cal.get(0));
l(a.data.cal.data("colorpicker").color,a.data.cal.get(0));c(document).unbind("mouseup",w);c(document).unbind("mousemove",x);return!1},I=function(){var a={cal:c(this).parent(),pos:c(this).offset()};a.preview=a.cal.data("colorpicker").livePreview;c(document).bind("mouseup",a,y);c(document).bind("mousemove",a,z)},z=function(a){g.apply(a.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,a.pageY-a.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*Math.max(0,Math.min(150,
a.pageX-a.data.pos.left))/150,10)).get(0),[a.data.preview]);return!1},y=function(a){i(a.data.cal.data("colorpicker").color,a.data.cal.get(0));l(a.data.cal.data("colorpicker").color,a.data.cal.get(0));c(document).unbind("mouseup",y);c(document).unbind("mousemove",z);return!1},J=function(){c(this).addClass("colorpicker_focus")},K=function(){c(this).removeClass("colorpicker_focus")},L=function(a){var b=c(this).parent(),d=b.data("colorpicker").color;b.data("colorpicker").origColor=d;r(d,b.get(0));b.data("colorpicker").onSubmit(d,
k(h(d)),h(d),b.data("colorpicker").el,a)},B=function(){var a=c("#"+c(this).data("colorpickerId"));a.data("colorpicker").onBeforeShow.apply(this,[a.get(0)]);var b=c(this).offset(),d;d=document.compatMode=="CSS1Compat";d={l:window.pageXOffset||(d?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(d?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(d?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||
(d?document.documentElement.clientHeight:document.body.clientHeight)};var f=b.top+this.offsetHeight,b=b.left;f+176>d.t+d.h&&(f-=this.offsetHeight+176);b+356>d.l+d.w&&(b-=356);a.css({left:b+"px",top:f+"px"});a.data("colorpicker").onShow.apply(this,[a.get(0)])!=!1&&a.show();c(document).bind("mousedown",{cal:a},A);return!1},A=function(a){M(a.data.cal.get(0),a.target,a.data.cal.get(0))||(a.data.cal.data("colorpicker").onHide.apply(this,[a.data.cal.get(0)])!=!1&&a.data.cal.hide(),c(document).unbind("mousedown",
A))},M=function(a,b,d){if(a==b)return!0;if(a.contains)return a.contains(b);if(a.compareDocumentPosition)return!!(a.compareDocumentPosition(b)&16);for(b=b.parentNode;b&&b!=d;){if(b==a)return!0;b=b.parentNode}return!1},t=function(a){return{h:Math.min(360,Math.max(0,a.h)),s:Math.min(100,Math.max(0,a.s)),b:Math.min(100,Math.max(0,a.b))}},s=function(a){a=parseInt(a.indexOf("#")>-1?a.substring(1):a,16);return{r:a>>16,g:(a&65280)>>8,b:a&255}},m=function(a){var b={h:0,s:0,b:0},d=Math.max(a.r,a.g,a.b),c=d-
Math.min(a.r,a.g,a.b);b.b=d;b.s=d!=0?255*c/d:0;b.h=b.s!=0?a.r==d?(a.g-a.b)/c:a.g==d?2+(a.b-a.r)/c:4+(a.r-a.g)/c:-1;b.h*=60;b.h<0&&(b.h+=360);b.s*=100/255;b.b*=100/255;return b},h=function(a){var b={},d=Math.round(a.h),c=Math.round(a.s*255/100),a=Math.round(a.b*255/100);if(c==0)b.r=b.g=b.b=a;else{var c=(255-c)*a/255,e=(a-c)*(d%60)/60;d==360&&(d=0);d<60?(b.r=a,b.b=c,b.g=c+e):d<120?(b.g=a,b.b=c,b.r=a-e):d<180?(b.g=a,b.r=c,b.b=c+e):d<240?(b.b=a,b.r=c,b.g=a-e):d<300?(b.b=a,b.g=c,b.r=c+e):d<360?(b.r=a,
b.g=c,b.b=a-e):(b.r=0,b.g=0,b.b=0)}return{r:Math.round(b.r),g:Math.round(b.g),b:Math.round(b.b)}},k=function(a){var b=[a.r.toString(16),a.g.toString(16),a.b.toString(16)];c.each(b,function(a,c){c.length==1&&(b[a]="0"+c)});return b.join("")},N=function(){var a=c(this).parent(),b=a.data("colorpicker").origColor;a.data("colorpicker").color=b;i(b,a.get(0));l(b,a.get(0));n(b,a.get(0));o(b,a.get(0));p(b,a.get(0));q(b,a.get(0))};return{init:function(a){a=c.extend({},j,a||{});if(typeof a.color=="string")a.color=
m(s(a.color));else if(a.color.r!=void 0&&a.color.g!=void 0&&a.color.b!=void 0)a.color=m(a.color);else if(a.color.h!=void 0&&a.color.s!=void 0&&a.color.b!=void 0)a.color=t(a.color);else return this;return this.each(function(){if(!c(this).data("colorpickerId")){var b=c.extend({},a);b.origColor=a.color;var d="collorpicker_"+parseInt(Math.random()*1E3);c(this).data("colorpickerId",d);d=c('<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>').attr("id",
d);b.flat?d.appendTo(this).show():d.appendTo(document.body);b.fields=d.find("input").bind("keyup",D).bind("change",g).bind("blur",E).bind("focus",F);d.find("span").bind("mousedown",G).end().find(">div.colorpicker_current_color").bind("click",N);b.selector=d.find("div.colorpicker_color").bind("mousedown",I);b.selectorIndic=b.selector.find("div div");b.el=this;b.hue=d.find("div.colorpicker_hue div");d.find("div.colorpicker_hue").bind("mousedown",H);b.newColor=d.find("div.colorpicker_new_color");b.currentColor=
d.find("div.colorpicker_current_color");d.data("colorpicker",b);d.find("div.colorpicker_submit").bind("mouseenter",J).bind("mouseleave",K).bind("click",L);i(b.color,d.get(0));n(b.color,d.get(0));l(b.color,d.get(0));p(b.color,d.get(0));o(b.color,d.get(0));r(b.color,d.get(0));q(b.color,d.get(0));b.flat?d.css({position:"relative",display:"block"}):c(this).bind(b.eventName,B)}})},showPicker:function(){return this.each(function(){c(this).data("colorpickerId")&&B.apply(this)})},hidePicker:function(){return this.each(function(){c(this).data("colorpickerId")&&
c("#"+c(this).data("colorpickerId")).hide()})},setColor:function(a){if(typeof a=="string")a=m(s(a));else if(a.r!=void 0&&a.g!=void 0&&a.b!=void 0)a=m(a);else if(a.h!=void 0&&a.s!=void 0&&a.b!=void 0)a=t(a);else return this;return this.each(function(){if(c(this).data("colorpickerId")){var b=c("#"+c(this).data("colorpickerId"));b.data("colorpicker").color=a;b.data("colorpicker").origColor=a;i(a,b.get(0));n(a,b.get(0));l(a,b.get(0));p(a,b.get(0));o(a,b.get(0));r(a,b.get(0));q(a,b.get(0))}})}}}();c.fn.extend({ColorPicker:e.init,
ColorPickerHide:e.hidePicker,ColorPickerShow:e.showPicker,ColorPickerSetColor:e.setColor})}(jQuery),$("#wcolor,#color").html("<div></div>"),defaulColor=my_getcookie("defaultColor")?my_getcookie("defaultColor"):"000000",$("#color div").ColorPicker({color:defaulColor,flat:!0,onSubmit:function(c,e,C,j){my_setcookie("defaultColor",e,1,0);bbfontstyle("[color=#"+e+"]","[/color]");selectWysiwyg(j,"color");return!1}}),$("#wcolor div").ColorPicker({color:defaulColor,flat:!0,onSubmit:function(c,e,C,j,i){my_setcookie("defaultColor",
e,1,0);vB_Editor.text_editor.format(i,"constructBBcode_select_color_#"+e,!1,!0)}}))
});
And then SAVE

~Ape~

APE
Manager
Manager

Male Posts : 8309
Reputation : 716
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Replying to posts and choosing different colours

Post by Geezer on January 30th 2012, 5:46 pm

Thanks Ape , worked perfectly :wouhou:

Geezer
Forumember

Posts : 191
Reputation : 0
Language : English

http://cockneyboys.forumotion.co.uk/forum

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum