Recent Tutorials
Who is online?
In total there are 4 users online :: 0 Registered, 0 Hidden and 4 Guests

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Add more font choices to the Editor

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 09 Jul 2014, 04:25

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');

 Exclamation 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 ! Very Happy


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


Last edited by Ange Tuteur on Tue 15 Mar 2016, 06:25; edited 1 time in total
Ape

Title :
Gender : Male
Posts : 99
Points : 1047
Reputation : 23
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostApe on Sun 28 Sep 2014, 15:41

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
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 28 Sep 2014, 17:07

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
Ape

Title :
Gender : Male
Posts : 99
Points : 1047
Reputation : 23
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostApe on Sun 28 Sep 2014, 17:16

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

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
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 28 Sep 2014, 17:24

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 Wink
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Sun 12 Oct 2014, 03:56

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 ?
Suspect
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 12 Oct 2014, 19:13

It should, have you tired adding important ?
Code:
.sceditor-fontsize-picker div {
  height:150px !important;
  width:75px !important;
  overflow-y:auto;
  overflow-x:hidden;
}
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Fri 17 Oct 2014, 14:50

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 Smile
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 19 Oct 2014, 06:11

Super ! You're welcome ^^

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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