Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB

Connexion

Récupérer mon mot de passe

Derniers sujets
» *RESOLU*[PhpBB2] Annonce Google décalée
par Milouze14 Hier à 21:08

 » [PhpBB2] Ajouter à vos favoris
par Milouze14 Hier à 18:22

 » [PhpBB2] Changer le nom d'un groupe
par petitefeuille Hier à 15:53

 » *RESOLU*[Edge] Bannière defilante
par Milouze14 Hier à 8:57

 » *RESOLU*[PhpBB3] Bouton uniquement sur premier post
par Milouze14 Dim 10 Nov 2019 - 19:19

 » *RESOLU*[PhpBB3] Photos par thèmes
par Milouze14 Dim 10 Nov 2019 - 17:51

 » [PhpBB2] Avertissement lors de la publication d'un email
par fascicularia Dim 10 Nov 2019 - 13:12

 » Le ver de terre "Blagounette"
par soleda Sam 9 Nov 2019 - 6:14

 » *RESOLU*[PhpBB3] L'heure sous la date dans un Blog
par Milouze14 Ven 8 Nov 2019 - 19:30

 » [PhpBB2] Ajout de boutons barre Windows 10
par Milouze14 Ven 8 Nov 2019 - 17:53

 » [Edge]Avatar par défaut dans le Qeel
par Milouze14 Ven 8 Nov 2019 - 17:25

 » [PhpBB2] Barre windows 10
par Milouze14 Mer 6 Nov 2019 - 18:15

 » [Edge] Icônes Font Awesome devant les titres de forums
par Milouze14 Mar 5 Nov 2019 - 19:12

 » [Edge] Supprimer la bulle des icones du forum
par Milouze14 Mar 5 Nov 2019 - 16:03

 » [PhpBB2] Installe rmarque ligne
par Milouze14 Lun 4 Nov 2019 - 19:52

 » [PhpBB2] Indexation d'une section par auteur et par ordre alphabétique
par Milouze14 Lun 4 Nov 2019 - 14:54

 » [AwesomeBB] Modifier l'icône du bouton d'accueil
par Splash Lun 4 Nov 2019 - 11:51

 » histoire du Jour sans fin
par Quad Daniel Lun 4 Nov 2019 - 7:42

 » *RESOLU*[PhpBB3] Retour à la page d'accueil
par Milouze14 Dim 3 Nov 2019 - 20:39

 » [Edge] Placer les forums l'un à côté de l'autre à l'intérieur des catégories
par Milouze14 Sam 2 Nov 2019 - 20:02

[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

 :: Astuces Forumactif :: Toutes versions

Voir le sujet précédent Voir le sujet suivant Aller en bas

Icône par defaut [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#602947
Message n°1
Splash
Splash
Milouzien

MessageSplash le Sam 6 Oct 2018 - 7:50

Hi,

Rendez-vous sur ce site et choisissez la/les polices à installer : https://fonts.google.com

Ajoutons 2 polices supplémentaires au forum, sans modifier le Template, mais en utilisant des codes javascript

Les 2 polices ajoutées sont les polices Coiny et Wallpoet

-Astuce des Forums Milouze14&Compagnie-





  • Astuce postée par:
    Réponse automatique:

    Merci de cliquer ici pour voir le message

Pour toute information,merci de contacter un Membre du Staff		[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Staff10



Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript



Mettre ce code javascript Sur toutes les pages pour la première police :
Code:
WebFontConfig = {
    google: { families: [ 'Coiny' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

Et ce code pour la seconde police :
Code:
WebFontConfig = {
    google: { families: [ 'Wallpoet' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

Ensuite mettre ce nouveau code javascript Sur toutes les pages (ce code correspondra aux polices de l'éditeur) :
Code:
WebFontConfig = {
    google: { families: [ 'Coiny','Wallpoet' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
$(function(){
          if(!$["sceditor"]) return;
          
        $.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Coiny, Wallpoet'
          
});



Cette partie du code sert à inscrire les 2 nouvelles polices :
Code:
WebFontConfig = {
    google: { families: [ 'Coiny','Wallpoet' ] }
  };

Polices qu'il faut également ajouter à cette ligne (en fin de code) :
Code:
$.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Coiny, Wallpoet';

[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Police10

Et ainsi de suite pour chaque nouvelle police à ajouter


Si vous rencontrez un problème avec l'ajout des polices par javascript

Sélectionnez vos polices sur la page Google Fonts en cliquant sur le petit rond rouge "Select this font"

[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Select10

Une fois vos polices sélectionnées, vous verrez en bas de page ce rectangle noir :

[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Select11

Déployez le en cliquant sur le petit tiret blanc (sur la gauche) :

[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur Select12

Copier le code qui se trouve après Embed Font, pour nos 2 polices c'est celui-ci :

Code:
<link href="https://fonts.googleapis.com/css?family=Coiny|Wallpoet" rel="stylesheet">

Coller ce code dans le template overall_header (juste après la balise head) :

Panneau d'administration / Affichage / Templates / Général


Votre début de template ressemblera à ça :

Code:
<!DOCTYPE HTML>
<html lang="{L_LANG_HTML}">
<head>
   <link href="https://fonts.googleapis.com/css?family=Coiny|Wallpoet" rel="stylesheet">

Ensuite ajouter le code javascript pour l'ajout à l'éditeur :


Code:
WebFontConfig = {
    google: { families: [ 'Coiny','Wallpoet' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
$(function(){
          if(!$["sceditor"]) return;
          
        $.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Coiny, Wallpoet'
          
});





:u1677:
A bientôt


Dernière édition par Splash le Sam 6 Oct 2018 - 21:21, édité 3 fois

Icône par defaut Re: [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#602977
Message n°2
Lilas
Lilas
Milouzien

MessageLilas le Sam 6 Oct 2018 - 13:52

Kikou Splash,

Je m'intéresse à ta petite astuce, aujourd'hui.

Bonne journée forum,

mdr

Icône par defaut Re: [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#603010
Message n°3
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Dim 7 Oct 2018 - 6:50

Icône par defaut Re: [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#603169
Message n°4
Anonymous
Invité
Invité

MessageInvité le Ven 12 Oct 2018 - 3:12

Merci beaucoup !

Icône par defaut Re: [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#603907
Message n°5
avatar
ThunderTB
Milouzien

MessageThunderTB le Mar 6 Nov 2018 - 5:26

Merci beaucoup !

Icône par defaut Re: [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#607247
Message n°6
Kaeyla
Kaeyla
Milouzien

MessageKaeyla le Sam 26 Jan 2019 - 21:14

Merci pour ce superbe partage super

Icône par defaut Re: [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#609730
Message n°7
HeroxAquariophile
HeroxAquariophile
Milouzien

MessageHeroxAquariophile le Jeu 28 Mar 2019 - 17:25

MERCI !

Icône par defaut Re: [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#609762
Message n°8
Ptite_Perle
Ptite_Perle
Milouzien

MessagePtite_Perle le Ven 29 Mar 2019 - 14:51

Merci

Icône par defaut Re: [TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur

#609787
Message n°9
xewup
xewup
Milouzien

Messagexewup le Sam 30 Mar 2019 - 10:53

Merci beaucoup

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Sujets similaires
» Comment choisir les polices du forum ?
» Installer une ChatBox latérale
» Hébergement des feuilles de style pour installer un sélecteur de thèmes
» Je n'arrive pas à installer le tournepage, qui sait m'aider ?
» Mettre par défaut, certaines polices, couleur et taille pour certains membres

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Astuces Forumactif :: Astuces Forumactif :: Toutes versions

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
© phpBB | Signaler un abus