Personnaliser l'apparence en version mobile de votre forum

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

  • 0

Tutoriel Personnaliser l'apparence en version mobile de votre forum

Message par Alex Fowl le Mer 27 Juil 2011 - 18:37

Personnaliser l'apparence en version mobile de votre forum.

Ce tutoriel va vous permettre de personnaliser l'apparence de votre forum via le CSS quand celui-ci sera visionné depuis un mobile.


Important: Depuis mai 2015, les templates mobiles sont disponibles à la personnalisation! Plus d'informations dans notre annonce: Nouveauté: Accès aux templates pour la version mobile

Général :

L'image de fond :
Code:
#mpage-body
L'image de fond de haut de page :
Code:
.mobile_title
Texte de haut de page :
Code:
.mobile_title_content
L'image de fond de bas de page :
Code:
.linklist
Texte de bas de page (nécessite la balise !important) :
Code:
.small

Accueil : Catégorie/Forum :

Texte principal :
Code:
.mobile_set_content
L'image de fond du texte principal :
Code:
.mobile_set
Sous-texte :
Code:
.mobile_subtitle
Texte commentaire :
Code:
.mobile_comment
Image de fond du sous-texte et texte commentaire :
Code:
.mobile_item
Image de fond du sous-texte et texte commentaire survolé :
Code:
.mobile_item:hover

Icône catégorie/forum :

L'image de la catégorie sans nouveau message :
Code:
.cat_no_new
L'image de la catégorie nouveau message :
Code:
.cat_new
L'image de la catégorie verrouillé :
Code:
.cat_locked
L'image du forum sans nouveau message :
Code:
.forum_no_new
L'image du forum nouveau message :
Code:
.forum_new
L'image du forum verrouillé :
Code:
.forum_locked


Icône de sujet :

L'image de sujet Annonce Global normal:
Code:
.folder_global
L'image de sujet Annonce Global avec nouveau message :
Code:
.folder_global_new
L'image de sujet Annonce normal :
Code:
.folder_announce
L'image de sujet Annonce avec nouveau message :
Code:
.folder_announce_new
L'image de sujet Note normal :
Code:
.folder_sticky
L'image de sujet Note avec nouveau message :
Code:
.folder_sticky_new
L'image de sujet Populaire normal :
Code:
.folder_hot
L'image de sujet Populaire avec nouveau message :
Code:
.folder_hot_new
L'image de sujet Normal sans message :
Code:
.folder_no_new
L'image de sujet Normal avec nouveau message :
Code:
.folder_new
L'image de sujet Normal verrouillé :
Code:
.folder_locked
L'image de sujet Normal avec nouveau message verrouillé :
Code:
.folder_locked_new

Sujet :

L'image de fond et texte du haut du sujet (nécessite la balise !important) :
Code:
.post_header
Contenu du sujet :
Code:
.content
L'image de fond du contenu du sujet :
Code:
#p3

Simulateur de mobile sur votre navigateur :

Pour tester les codes CSS sur votre navigateur internet depuis un ordinateur, il vous faut simuler un mobile, pour cela ce plugin pour Firefox User Agent Switcher.

Il est possible de simuler un mobile sous Chrome en inspectant l'élément (clic droit puis inspecter l'élément ou F12 sous windows) et en cliquant en haut à gauche sur cette icône:



Sous Opera, installer l'extension User-Agent Switcher.

Tutoriel lié:



Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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


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