Latest topics
» [GAME] What are you thinking right now?
by Ange Tuteur Today at 15:10

» [GAME] Countdown from 200,000
by Ange Tuteur Today at 15:09

» [GAME] Post a random picture
by Ange Tuteur Today at 15:08

» [GAME] What are you doing right now?
by Ange Tuteur Today at 15:06

» [GAME] Count to 30 - Ange Edition
by Ange Tuteur Today at 15:05

» [GAME] Count to One Million!
by Ange Tuteur Today at 15:05

» Categories as tabs on Edge!
by Ange Tuteur Today at 15:03

» Colored Bar Navigation
by Ange Tuteur Yesterday at 20:03

» Classified Ads
by SLGray Yesterday at 17:11

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Ch@lo Valdez Mon 22 May 2017, 13:45

» FM Chatbox
by Andrei34 Sun 21 May 2017, 12:35

» Starred Forums
by tillytiger99 Sun 21 May 2017, 04:35

» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Valoish Sat 20 May 2017, 10:24

» Copy Code
by Luffy Fri 19 May 2017, 14:56

» Think Tank Forum
by Luffy Fri 19 May 2017, 05:25

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

None

[ View the whole list ]


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

Forum Font Size Selector

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4539
Points : 9360
Reputation : 2291
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 Fri 13 May 2016, 12:55

First topic message reminder :

This plugin installs a small selector for the font size of the forum which allows you to adjust the size of the font to what you prefer.

Click to view demo

This plugin is optimized for the following forum versions :

  • PhpBB3
  • PunBB
  • Invision

Note : This selector changes the global font size of the document and will not effect elements that have specified an absolute font size, such as text inside [size] tags.


Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Font Size Selector
Placement : In all the pages
Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t571-forum-font-size-selector#8979';

  // font sizes
  var sizes = [
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24
  ],

  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
  attachTo = '#page-body, #ipbwrapper #content-container', // element(s) where the selector will be attached

  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },


  cookie = my_getcookie('fa_fontsize'), // selected font size

  selector = $('<select id="fa_fontsize" />')[0], // font size selector
  container = $('<div id="fa_fontsize_container"><span id="fa_fontsize_label" style="font-size:12px">' + lang.FontSize + '</span></div>')[0], // selector container

  // options string
  html = '<option value="default:' + window.getComputedStyle(document.body, null).getPropertyValue('font-size') + '" ' + ( /default/i.test(cookie) ? 'selected' : '' ) + '>' + lang.Default + '</option>',

  // loop variables
  i = 0, j = sizes.length,

  // function for changing the font size
  change = function(init, val) {
    var value = init === true ? val : this.value;

    my_setcookie('fa_fontsize', value);

    document.body.style.fontSize = /default/i.test(value) ? value.replace(/default:/, '') : value + 'px';
  };

  // loop through the sizes array to create an options list for the selector
  for (; i < j; i++) {
    html += '<option value="' + sizes[i] + '" ' + (cookie == sizes[i] ? 'selected' : '') + '>' + sizes[i] + '</option>';
  }

  // apply the html and event handler to the selector
  selector.innerHTML = html;
  selector.onchange = change;

  // apply the chosen font size if any was selected
  if (cookie) {
    change(true, cookie);
  }

  // add the selector to the container and finally the document
  container.appendChild(selector);
  $(attachTo)[['prepend', 'append'][position]](container);
});

When you're finished and have saved the script, the font size selector should be available at the top of your forum. If not, please see the modifications section to find out how to modify this plugin. Wink


Modifications

Below is a list of modifications that can be made to this plugin.


1. Sizes
At the top of the script you should see a variable named sizes. This variables contains an array of the font sizes available in the select drop down. Feel free to add more sizes or remove existing ones.
Code:
  var sizes = [
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24
  ],
Note : Please make sure to separate each number by a COMMA : , ( e.g. 1, 2, 3, 4 )


2. Position
Below the sizes array you should see the position variable. This variable takes two(2) values ; 0 and 1, and determines the position of the selector.
0 = The selector is placed at the top of the selected element
1 = The selector is placed at the bottom of the selected element
Code:
  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
Modify this variable to change the position of the font size selector.


3. Placement
Below the position variable you should see the attachTo variable. This takes a string of CSS selectors which determine WHERE the font size selector will be placed. By default its placed inside the forum body, however if you want it to display somewhere else, such as in a widget :
Code:
<div id="font_size_div"></div>

all you need to do is change the string so that it matches your element's id or class :
Code:
  attachTo = '#font_size_div', // element(s) where the selector will be attached


4. Language
Last but certainly not least is the lang object. You can use this object to change or translate the existing texts.
Code:
  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },


That's all the modifications ! Clean glasses

If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy ! Party


Notice
Tutorial written by Ange Tuteur.
Special thanks to the Beta Testers for testing this plugin.
Reproduction not permitted without consent from the author.

avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2091
Points : 2697
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 03 Oct 2016, 18:16

Um, did you by chance keep both the original and the one I gave you?

That would be the only reason it comes up twice.
avatar
skouliki

Title :
Gender : Female
Posts : 317
Points : 1086
Reputation : 151
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki on Tue 04 Oct 2016, 02:44

no , this original had happened when i add Ange's code from the start also

the red arrow is the active one - your code - .... the other one is there but its not working 


--------

avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2091
Points : 2697
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 04 Oct 2016, 07:06

Oh okay.

Use this Javascript:

Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t571-forum-font-size-selector#8979';
 
  // font sizes
  var sizes = [
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24
  ],
 
  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
  attachTo = '#ipbwrapper #content-container', // element(s) where the selector will be attached
 
  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },
 
 
  cookie = my_getcookie('fa_fontsize'), // selected font size
 
  selector = $('<select id="fa_fontsize" />')[0], // font size selector
  container = $('<div id="fa_fontsize_container"><span id="fa_fontsize_label" style="font-size:12px">' + lang.FontSize + '</span></div>')[0], // selector container
 
  // options string
  html = '<option value="default:' + window.getComputedStyle(document.body, null).getPropertyValue('font-size') + '" ' + ( /default/i.test(cookie) ? 'selected' : '' ) + '>' + lang.Default + '</option>',
 
  // loop variables
  i = 0, j = sizes.length,
 
  // function for changing the font size
  change = function(init, val) {
    var value = init === true ? val : this.value;
 
    my_setcookie('fa_fontsize', value);
 
    // forces font-size
    document.body.style.setProperty('font-size', /default/i.test(value) ? value.replace(/default:/, '') : value + 'px', 'important')
  };
 
  // loop through the sizes array to create an options list for the selector
  for (; i < j; i++) {
    html += '<option value="' + sizes[i] + '" ' + (cookie == sizes[i] ? 'selected' : '') + '>' + sizes[i] + '</option>';
  }
 
  // apply the html and event handler to the selector
  selector.innerHTML = html;
  selector.onchange = change;
 
  // apply the chosen font size if any was selected
  if (cookie) {
    change(true, cookie);
  }
 
  // add the selector to the container and finally the document
  container.appendChild(selector);
  $(attachTo)[['prepend', 'append'][position]](container);
});

And make sure you're using the CSS style that Andrei gave you.
avatar
skouliki

Title :
Gender : Female
Posts : 317
Points : 1086
Reputation : 151
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki on Tue 04 Oct 2016, 09:18

now it worked only with your code but is this normal ? these parts with the red arrow are not getting larger 


--------

avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2091
Points : 2697
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 04 Oct 2016, 14:26

This code isn't a sure fire way to do it, but it clears the important style set to the font-size of all of your forum titles.

Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t571-forum-font-size-selector#8979';
 
  // font sizes
  var sizes = [
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24
  ],
 
  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
  attachTo = '#ipbwrapper #content-container', // element(s) where the selector will be attached
 
  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },
 
 
  cookie = my_getcookie('fa_fontsize'), // selected font size
 
  selector = $('<select id="fa_fontsize" />')[0], // font size selector
  container = $('<div id="fa_fontsize_container"><span id="fa_fontsize_label" style="font-size:12px">' + lang.FontSize + '</span></div>')[0], // selector container
 
  // options string
  html = '<option value="default:' + window.getComputedStyle(document.body, null).getPropertyValue('font-size') + '" ' + ( /default/i.test(cookie) ? 'selected' : '' ) + '>' + lang.Default + '</option>',
 
  // loop variables
  i = 0, j = sizes.length,
 
  // function for changing the font size
  change = function(init, val) {
    var value = init === true ? val : this.value;
 
    my_setcookie('fa_fontsize', value);
 
    // forces font-size
    document.body.style.setProperty('font-size', /default/i.test(value) ? value.replace(/default:/, '') : value + 'px', 'important')
  };
 
  // loop through the sizes array to create an options list for the selector
  for (; i < j; i++) {
    html += '<option value="' + sizes[i] + '" ' + (cookie == sizes[i] ? 'selected' : '') + '>' + sizes[i] + '</option>';
  }
 
  // apply the html and event handler to the selector
  selector.innerHTML = html;
  selector.onchange = change;
 
  // apply the chosen font size if any was selected
  if (cookie) {
    change(true, cookie);
  }
 
  // add the selector to the container and finally the document
  container.appendChild(selector);
  $(attachTo)[['prepend', 'append'][position]](container);

  if ( window.location.pathname == '/' ) {
    $('h3.hierarchy').html($('h3.hierarchy').html().replace('!important', '').replace(/font-size:\s\d+px/, ''));
  }
});

Sadly, the code still doesn't fix the forum titles, seeing as though you have this selector in your index_body template:

Code:
.pun h3 { font-size: 14px; }

And these in your stylesheet:

Code:
.hierarchy { font-size: 10px; }

.pun tbody.statused td.tcl { font-size: 12px; }

They shouldn't be affecting it, but they are for some reason. I'm going to look into this some more.
avatar
skouliki

Title :
Gender : Female
Posts : 317
Points : 1086
Reputation : 151
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki on Tue 04 Oct 2016, 16:49

thanks for all your help 
yes with the modified templates something you win something you lose 
this java code isnt so important to me as a feature so maybe i will not include it in the end
again thanks for taking the time to investigate my page

--------

avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2091
Points : 2697
Reputation : 78
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 04 Oct 2016, 20:02

No problem, skou.
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2293
Points : 4408
Reputation : 275
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Sun 18 Dec 2016, 15:07

Does text in posts change with this, too? I just noticed on my forum with Edge post text is not changing.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4539
Points : 9360
Reputation : 2291
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 Mon 19 Dec 2016, 12:00

At the moment this isn't compatible with FA Edge, mostly because it's using absolute font-sizes which was kind of a dumb move on my part. Dx
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2293
Points : 4408
Reputation : 275
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Mon 19 Dec 2016, 16:02

Ok. Thanks for the reply.
avatar
Gae
New Member
Title :
Gender : Unspecified
Posts : 7
Points : 64
Reputation : 2
Language : French English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostGae on Mon 10 Apr 2017, 07:47

Hey, 

Thank you very much for the tips, this is very useful! 
It will be better for this JS if we can (if you want) customize the title of "font-size" before the selector like a button.



-> So the button color will change too when we want change the theme color of the forum. 

Currently, i've make a CSS adjustement like this :

Code:
#fa_fontsize_label {color:white; background-color:#802;}

Thanks in advance!
Have a nice day!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4539
Points : 9360
Reputation : 2291
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 Mon 10 Apr 2017, 12:50

Hi @Gae,

You can add this now if you like. Go to Admin Panel > Modules > JS Codes management > ALL.JS

Find ( depending on how you want the color to change ) :

if you want the background color to change :
Code:
{ background-color:' + palette[1] + '; }

replace with :
Code:
, #fa_fontsize_label { background-color:' + palette[1] + '; }


OR if you want just the font color to change :
Code:
{ color:' + palette[1] + '; }

replace with :
Code:
, #fa_fontsize_label { color:' + palette[1] + '; }

When you're finished, save the script and the label should now change with your selected theme. Smile

Page 2 of 2 Previous  1, 2

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