Forum de support officiel

Forum d'entraide et support officiel des forums Forumprod.com


Heures au format UTC + 1 heure [ Heure d’été ]



Poster un nouveau sujet Répondre au sujet  [ 3 messages ] 
Auteur Message
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 22 Sep 2012, 18:36 

Installer de nouvelles polices d'écriture avec
Google Web fonts sur son forum.

Il faudrait dans un premier temps aller sur le site : http://www.google.com/webfonts pour choisir la/les police(s) d'écriture que vous voulez installer sur votre forum , par la suite on pourras donc utiliser la police souhaitée en utilisant soit :
- La feuille de style CSS.
- Dans un message posté , avec le bbcode [font].

En arrivant sur le site de Google web fonts, je choisis donc une police d'écriture , puis je clique sur Quick-use en bas à droite de l'encadrement :
(La police d'écriture en guise d'exemple : Orienta )
Image

Puis, on descend un petit peu sur la page et on obtient les différentes possibilités d'ajouter la police à votre forum.
Pour notre exemple, ce sera comme cité plus haut par la feuille de style CSS.Libre à vous d'utiliser les autres manières.
On regarde le lien donné dans l'onglet standard , et on prend l'url présente pour prendre le code CSS utilisable sur votre forum :
Image
On insère l'url concernée dans la barre d'adresse du navigateur , puis on fait un copier/coler du code :
Image

Dernier point, on insère le code copié-collé dans la feuille de style CSS de votre forum :
Si vous ne voyez pas la feuille de style CSS, pensez à passer votre Panneau d'administration en mode avancé.
Panneau d'administration :arrow: Styles :arrow: Editer la feuille de style CSS
Et vous insérez le code à la fin de la feuille.
La police est installée ! :happy-jumpgreen:
Il ne reste plus qu'à l'utilisée.

Utiliser la police d'écriture dans un message avec le bbcode [font] et la Feuille de style CSS
Dans l'éditeur de message de votre forum,un raccourci existe pour utiliser une police spécifique :
Image
En cliquant sur l'une des polices cités dans le menu déroulant on obtient le bbcode, exemple avec la police Lucida Console :
Code:
[font=Lucida Console][/font] 

Souvenez-vous du titre de votre police,visible sur le site Google web fonts et dans le code CSS que vous aviez mis dans votre feuille de style.
Ce qui donne avec notre exemple :
Code:
[font=Orienta][/font] 


Autre possibilité, pour afficher le contenu de votre forum avec la police d'écriture il faut utiliser les identifiants css (classes ou id) comme décrit sur le site Google web fonts :
Image

Pour nous par exemple , on utilisera dans la feuille de style ce code ci-dessous :
Code:
h1 {
font-family: 'Orienta' !important;
}
 


Rajouter un raccourci dans le menu déroulant via l'éditeur de message

Bien sûr, taper le bbcode à chaque fois manuellement pourrais être lassant,il est donc possible de rajouter un raccourci pour chaque polices rajoutés.
Pour ce faire , on insère ce code dans l'en-tête du forum :
Panneau d'administration :arrow: Onglet " général " :arrow: Configuration du forum :arrow: Ajouter un code dans l'en-tête du forum
Code:
<script type="text/javascript">
$(function(){
   $('select[name="fonttype"] option:eq(0)').after('<option style="font-family: Orienta;" value="Orienta">Orienta (rajoutée)</option>');
});
</script>

Code basé sur la police d'exemple de ce présent tuto,donc = Orienta .
Font-family: :arrow: On change par le nom de la police.
value="" :arrow: On met également le nom de la police ou autre.
Et à l'intérieur des balises " option " on y met un texte qui sera visible dans le menu déroulant ^^
Exemple :
Image

Bonnes configurations si il y a ! :angel:


Haut
  Profil 
 
Membre habitué
Membre habitué

Inscription: Juil 2012
Messages: 18
Points: 127
Sexe: Masculin
Age: 38
Posté: 04 Nov 2012, 04:56 

C'est tout simplement génial ! :thumbup:
Merci beaucoup pour ce tuto ! :clap:


Haut
  Profil Site Internet 
 
Modérateur
Modérateur
Avatar de l’utilisateur

Inscription: Sep 2009
Messages: 4544
Points: 9731
Localisation: en France
Sexe: Masculin
Age: 27
Forum: http://support.forumprod.com
Posté: 04 Nov 2012, 12:36 

bonjour / bonsoir

super tuto wadjh

_________________
Nous restons à votre disposition pour toutes questions complémentaires.

Cordialement,
Lesny- Modérateur du forum de support.

- Merci de lire les règles du forum
- Merci de faire une recherche avant de poster
- Pas de support par MP, merci.


Haut
  Profil Site Internet 
 

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

Modérateur:

Aideurs

Permissions de ce forum:

Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers
Poster un nouveau sujet Répondre au sujet  [ 3 messages ] 


cron
Créer un forum | © phpBB | Entraide & support | Forum gratuit