Add more font choices to the Editor

Hello,

This quick trick will teach you how to add more font choices to the Editor of you Forumotion forum, as in the example below.


Adding the JavaScript

Go to Administration Panel > Modules > JavaScript codes management and create a new script.

Title : Your choice
Placement : In all the pages
Paste the code below :

Code:

$(function(){$(function() {
  $('.sceditor-button-font').click(function() {
    addFont('Calibri');
    addFont('Papyrus');
    addFont('Avantgarde');
  
    $('.sceditor-font-option.new-font').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[font='+$(this).attr('data-font')+']','[/font]');$('.sceditor-font-picker').remove();e.preventDefault()})
  });
  function addFont(font){$('.sceditor-font-picker div').append('<a unselectable="on" class="sceditor-font-option new-font" href="#" data-font="'+font+'"><font unselectable="on" face="'+font+'">'+font+'</font></a>')}
})});

Modifications

To add more fonts to the list write addFont();, between the parenthesis you'll write the font you want in "quotes". For example :

Code:

addFont('Baskerville');

  Attention : If the font is not installed on a users computer they will not see the font you added to the Editor when used !

If you add many fonts and the popup is too long you can add a scroll bar to it with CSS. Simply add the code below to your Stylesheet :
Administration Panel > Display > Colors > CSS stylesheet

Code:

.sceditor-font-picker {
  height:250px;
  width:150px;
  overflow-y:auto;
}

Enjoy !

Notice

Tutorial written by Ange Tuteur. Special thanks to QeemBA for the idea[ Reproduction not permitted without consent from the author.

Hi there  buddy is there away to add some more font sizes aswell ?  like "size 6" "size 8" "size 26" "size 28" "size 30"
I want some text to be in small print on my forum Like this

Hi Ape,

Try this :
Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages
Paste the code below :

Code:

$(function(){$(function() {
  $('.sceditor-button-size').click(function() {
    addSize(8, 'before');
    addSize(6, 'before');
    
    addSize(26, 'after');
    addSize(28, 'after');
    addSize(30, 'after');
  
    $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
  });
  function addSize(size, position){
    var data = '<a unselectable="on" class="sceditor-fontsize-option new-size" href="#" data-size="'+size+'"><span unselectable="on" style="font-size:'+size+'px;">'+size+'</span></a>';
    if (position == 'after' || position == null) $('.sceditor-fontsize-picker div').append(data);
    if (position == 'before') $('.sceditor-fontsize-picker div').prepend(data);
  }
})});

To add sizes write : addSize(number, position)

number : the size of the font e.g. 1, 2, 3..
position : where the option will be placed e.g. before, after..
- before places the option before all current fonts
- after places the option after all current fonts

@ Ange Tuteur could I also add a
scroll bar to it aswell as its to big when dropping down

its ok i worked it out lol

Code:


.sceditor-fontsize-picker {
  height:250px;
  width:150px;
  overflow-y:auto;
}

I could kiss ya if you was a girl lol XX

Add this to your CSS :
Display > Colors > CSS stylesheet

Code:

.sceditor-fontsize-picker div {
  height:150px;
  width:75px;
  overflow-y:auto;
  overflow-x:hidden;
}

Nevermind you got it

hi ange i got little problem with the scroll bar
image to show the problem

the used height is 150 so it should make a scroll bar am i right ?

It should, have you tired adding important ?

Code:

.sceditor-fontsize-picker div {
  height:150px !important;
  width:75px !important;
  overflow-y:auto;
  overflow-x:hidden;
}

thanks for the tips ange
the code worked now

Code:

    .sceditor-font-picker {
      height:250px !important;;
      width:150px !important;;
      overflow-y:auto;
      overflow-x:hidden;
    }

thanks so much again

Super ! You're welcome ^^