FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

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

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Add more font choices to the Editor

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Add more font choices to the Editor Captur15


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
Ape

Gender : Male
Age : 49
Posts : 136
Points : 3792
Reputation : 29
Location : UK kent
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://missingpeople.darkbb.com

PostApe 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Ape

Gender : Male
Age : 49
Posts : 136
Points : 3792
Reputation : 29
Location : UK kent
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://missingpeople.darkbb.com

PostApe 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Michael_vx

Gender : Male
Age : 32
Posts : 302
Points : 4067
Reputation : 76
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx Sun 12 Oct 2014, 03:56

hi ange i got little problem with the scroll bar
image to show the problem
Add more font choices to the Editor Untitl10
the used height is 150 so it should make a scroll bar am i right ?
Suspect
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Michael_vx

Gender : Male
Age : 32
Posts : 302
Points : 4067
Reputation : 76
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sun 19 Oct 2014, 06:11

Super ! You're welcome ^^
Sponsored content

PostSponsored content

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