Latest topics
» [Bug] The theme selector with Firefox
by Milouze14 Yesterday at 21:21

» Imagine in statistics
by Dr Jay Yesterday at 20:56

» [Suggestion] Coders- Team up with me: Design loading screen for mobile devices
by Bigtuber Yesterday at 14:16

» [GAME] Count to One Million!
by Valoish Yesterday at 13:36

» [GAME] Post a random picture
by Valoish Yesterday at 13:36

» Ranks icon
by MAX Yesterday at 12:28

» Add Signature Resizing To Your Forum
by Dr Jay Thu 23 Feb 2017, 15:53

» phpbb2: Removal of Last Visit/Unanswered Posts Table
by Spherical Thu 23 Feb 2017, 13:19

» phpbb2: Removal of Top Posters/Mark Forums Read Table
by Spherical Thu 23 Feb 2017, 13:18

» [EDGE] Protocol HTTPS
by Milouze14 Wed 22 Feb 2017, 13:34

» IconSkouliki
by skouliki Tue 21 Feb 2017, 03:56

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Sat 18 Feb 2017, 15:50

» Multi-step Login Form
by Samantha Sat 18 Feb 2017, 10:32

» Support Forum both chat and web developments
by MAX Sat 18 Feb 2017, 06:40

» Share Link Above Topics
by SLGray Fri 17 Feb 2017, 16:35

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

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 : 4294
Points : 8840
Reputation : 2137
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 : 118
Points : 1179
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
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4294
Points : 8840
Reputation : 2137
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 : 118
Points : 1179
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
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4294
Points : 8840
Reputation : 2137
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 : 25
Posts : 297
Points : 1469
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 : 4294
Points : 8840
Reputation : 2137
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 : 25
Posts : 297
Points : 1469
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 : 4294
Points : 8840
Reputation : 2137
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