Connexion

Récupérer mon mot de passe

Derniers sujets
» *RESOLU*[PhpBB2] Changer le lien d'une image par une icone font awesone
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Aujourd'hui à 14:57 par Milouze14

» *RESOLU*[AwesomeBB] Profils en onglets
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Aujourd'hui à 12:04 par Milouze14

» histoire du Jour sans fin
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Hier à 8:11 par Quad Daniel

» Test d'intelligence des politiciens-(e) histoire blagounette
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Ven 23 Aoû 2019 - 9:22 par Quad Daniel

» Règlement de l'entraide Forumactif
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Jeu 22 Aoû 2019 - 11:42 par BADLANDS

» [AwesomeBB] Problème avec le tuto "AutoSuggestion" - Incompatible version AwesomeBB
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Mer 21 Aoû 2019 - 12:14 par MathisB

» *RESOLU*[AwesomeBB] Barre de progression sur la page - AwesomeBB
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Mar 20 Aoû 2019 - 21:17 par Milouze14

» *RESOLU*[PhpBB2] Insérer la valeur d'un champ personnalisé dans une page HTML
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Mar 20 Aoû 2019 - 19:11 par Milouze14

» *CORBEILLE*[PhpBB2] Récupérer la valeur d'un input
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Lun 19 Aoû 2019 - 18:42 par Milouze14

» *RESOLU*[PhpBB3] Prévisualisation directe
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Ven 16 Aoû 2019 - 11:06 par Milouze14

» *RESOLU*[PhpBB2] l'image s'éclairci dans le codage
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Lun 12 Aoû 2019 - 6:30 par Milouze14

» *RESOLU*[PhpBB2] Vérifier valeur dans InArray (Jquery)
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Sam 10 Aoû 2019 - 6:24 par Milouze14

» *RESOLU*[PhpBB2] Récupérer valeur checkbox
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Jeu 8 Aoû 2019 - 4:17 par Milouze14

» [Toutes versions] Utiliser les variables utilisateur/forum
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Mer 31 Juil 2019 - 19:36 par photoclic

» *RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Mer 31 Juil 2019 - 19:19 par Milouze14

» *RESOLU*[PhpBB3] Nombre de messages et membres su qeel
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Mer 31 Juil 2019 - 17:01 par no_way

» *RESOLU*[PhpBB2] Prévisualisation en direct
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Lun 29 Juil 2019 - 17:42 par Milouze14

» *RESOLU*[PhpBB2] La version web ne s'affiche pas sur "mon" IPAD.
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Ven 26 Juil 2019 - 19:51 par Milouze14

» [AwesomeBB] Problème avec le tuto "AutoSuggestion" - Incompatible version AwesomeBB
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Dim 21 Juil 2019 - 6:07 par Milouze14

» [Toutes versions]Remplacer les icônes de l'éditeur par des icônes FontAwesome
[TOUTES VERSIONS] Installer des polices supplémentaires à l'éditeur  Clock-10Sam 20 Juil 2019 - 11:23 par Morane

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

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

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
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
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Dim 7 Oct 2018 - 6:50

Anonymous
Invité
Invité

MessageInvité le Ven 12 Oct 2018 - 3:12

Merci beaucoup !
avatar
ThunderTB
Milouzien

MessageThunderTB le Mar 6 Nov 2018 - 5:26

Merci beaucoup !
Kaeyla
Kaeyla
Milouzien

MessageKaeyla le Sam 26 Jan 2019 - 21:14

Merci pour ce superbe partage super
HeroxAquariophile
HeroxAquariophile
Milouzien

MessageHeroxAquariophile le Jeu 28 Mar 2019 - 17:25

MERCI !
Ptite_Perle
Ptite_Perle
Milouzien

MessagePtite_Perle le Ven 29 Mar 2019 - 14:51

Merci
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

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

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum