Latest topics
» [GAME] Post a random picture
by Valoish Today at 08:42

» [GAME] Q&A
by Valoish Today at 08:37

» [GAME] Last Letter Game
by Valoish Today at 08:36

» [GAME] Never have I ever..
by Valoish Today at 08:35

» [GAME] this or that
by Valoish Today at 08:35

» [GAME] What are you doing right now?
by Valoish Today at 08:34

» Web Page Speed & Optimization for FAE
by dannig Today at 08:15

» Remove automatic image resizer
by Andrei34 Today at 03:11

» Happy Birthday Thread
by Dr Jay Today at 02:29

» hello from forumotion
by Dr Jay Today at 02:26

» Need Help installing Forumactif Edge Theme
by Dr Jay Today at 02:24

» Awards
by Dr Jay Today at 02:21

» Warning Bars - Glossy v.2
by Dr Jay Today at 02:13

» Colors Tab
by Dr Jay Today at 02:11

» [GAME] Count to One Million!
by Valoish Fri 21 Apr 2017, 21:31

Recent Tutorials
Top posting users this month
Who is online?
In total there are 8 users online :: 1 Registered, 0 Hidden and 7 Guests

Andrei34

[ 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

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4465
Points : 9189
Reputation : 2232
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
Ape

Title :
Gender : Male
Posts : 124
Points : 1242
Reputation : 25
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4465
Points : 9189
Reputation : 2232
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
Ape

Title :
Gender : Male
Posts : 124
Points : 1242
Reputation : 25
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4465
Points : 9189
Reputation : 2232
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 299
Points : 1531
Reputation : 75
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4465
Points : 9189
Reputation : 2232
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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;
}
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 299
Points : 1531
Reputation : 75
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4465
Points : 9189
Reputation : 2232
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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