C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Personnalisation du BBCode sous PHPBB2

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 1757



Personnalisation du BBCode sous PHPBB2


Informations générales

Description :
Vous n'en avez pas marre d'avoir un soulignement avec un trait ou un gras juste gras sans couleur ? Vous voulez les modifier, alors rien de plus simple.

Démo :
Voici quelques exemples de ce que vous pouvez faire :

Testé sur :
Firefox, Chrome, Safari, Opera, Internet Explorer

Crédits :
Proposé par Faucon le 29/04/2012 | Validé par Espeon

Mise(s) à jour :
Mise à jour le 18/09/2012 par Faucon & 'Christa
Modifications finales par 'Christa le 06/12/2012

Le tutoriel


Les classes correspondantes traitées dans ce tutoriel sont spécifiques à la version PHPBB2 de ForumActif

Tous les admins peuvent faire la modification, dans la mesure où tout se passe dans la feuille CSS de votre forum, c'est-à-dire dans votre panneau d'administration, dans l'onglet Affichage, menu Images & Couleurs » Couleurs puis Feuille de style CSS.

Un petit mot sur les sélecteurs


Pour commencer, il vous faut connaître les bases pour modifier vos codes. Pour la mise en forme de votre texte, vous devez connaître les classes ou bien les marqueurs HTML (c'est-à-dire le texte entre les balises < et > en HTML) qui sont utilisés pour chaque balise BBCode.
  • [b] correspond à la balise HTML <strong>
  • [i] correspond à la balise HTML <i> (ou <em>)
  • [u] correspond à la balise HTML <u>
  • [strike] correspond à la balise HTML <strike>
  • [code] correspond à la classe CSS .code
  • [quote] correspond à la classe CSS .quote
  • [spoiler] correspond à la classe CSS .spoiler
  • [hr] correspond à la balise HTML <hr />
  • [list] correspond à la balise HTML <ul>
  • [list=1] et [list=a] correspondent à la balise HTML <ol>
  • [*] qui correspond à la balise HTML <li> (élément de liste) et s'associe obligatoirement à [list]

Pour savoir quelle classe ou quelle balise est utilisée pour chaque BBCode, il vous faut regarder le code source ou demander à quelqu'un qui s'y connaît, sur CSSActif par exemple.

Selon les cas, on a une classe ou bien un marqueur HTML (= une balise HTML). Si vous avez quelques bases en CSS, vous savez qu'un sélecteur CSS est soit une classe (précédée par un point), soit un identifiant (précédé par un #), soit un marqueur HTML (précédé par rien du tout), soit une combinaison des uns et des autres ainsi que de sélecteurs un peu plus particuliers, mais on va faire simple pour ce tutoriel.

Retenez juste ce point :
• Si votre BBCode correspond à une balise HTML, le sélecteur CSS associé doit être le nom de cette balise.
• Si votre BBCode correspond à une classe CSS, le sélecteur CSS associé doit être le nom de cette classe, précédé d'un point.

Voici deux exemples d'application :
Code:
u {
/*Propriétés de u*/
}
.code {
/*Propriétés de code*/
}

L’apparence


Pour modifier la mise en forme de vos bbcodes, rien de plus simple ! Il faut connaître la base de départ et la modifier, prenons par exemple la balise <u>, la définition CSS par défaut de cette balise est :
Code:
u {
    text-decoration: underline;
}
On va "surcharger" cette déclaration CSS par défaut en écrivant notre propre version personnalisée. Puisque nous savons qu'il y a un soulignement, si nous voulons le retirer il faut réécrire la même propriété et en changer la valeur (ici underline) par none. Elle aura ainsi la priorité sur la définition par défaut et le soulignement sera supprimé.

Vous pourrez ensuite ajouter vos propres propriétés CSS comme vous l'entendez, comme ceci par exemple :

Code:
u {
  text-decoration: none;
  border-bottom: 3px double #000000;
 }
Vous venez de remplacer le soulignement par défaut par un double soulignement de couleur noire, en utilisant la propriété CSS border-bottom !

Vous pouvez faire pareil pour la classe .code Par exemple, supposons que vous vouliez un trait à gauche de votre code. A ce moment-là vous utilisez la propriété border-left, voici le code :
Code:
.code {
    border-left:3px solid #F50E0E;
 }

Pour la plupart des classes et marqueurs à personnaliser pour le BBCode, les propriétés par défaut sont assez simples à deviner, donc à surcharger, et le reste découlera de vos expériences et essais personnels. Il reste néanmoins quelques petites subtilités que je vais vous détailler ci-après.

1. Le cas des spoilers


En réalité, il y a trois classes CSS pour les spoilers :
  • La classe .spoiler (appliquée à un tableau) désigne tout le bloc spoiler, titre et bloc caché compris.
  • La classe .spoiler_closed désigne la mise en forme du spoiler quand il est fermé (qui apparaît sous la forme d'un bloc "vide")
  • La classe .spoiler_content désigne la mise en forme du spoiler quand il est ouvert (un bloc avec le texte du spoiler)

A noter que ces deux dernières classes sont bien séparées, donc si vous définissez une apparence pour le spoiler fermé, elle ne sera pas appliquée au spoiler ouvert.

2. Le cas des codes


En plus de la classe .code, il existe aussi une classe .cont_code qui s'applique au conteneur du code. Utile en particulier pour y placer un ascenseur (bien qu'il soit désormais par défaut dans la feuille de styles de base de ForumActif)



Dernière édition par Faucon le Lun 10 Sep 2012, 06:56, édité 22 fois
MessageSujet: Personnalisation du BBCode sous PHPBB2   Dim 29 Avr 2012, 06:44
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


MessageSujet: Re: Personnalisation du BBCode sous PHPBB2   Mer 12 Déc 2012, 11:23
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



12-12-2012 - Tutoriel validé par CSSActif


MessageSujet: Re: Personnalisation du BBCode sous PHPBB2   Mer 12 Déc 2012, 11:24
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Personnalisation du BBCode sous PHPBB2   
Revenir en haut Aller en bas
 

Personnalisation du BBCode sous PHPBB2

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Personnalisation du BBCode sous PHPBB2
» [Topic Unique] Portail Déformé sous phpbb2
» Ajouter une barre de BBcode sous la chatbox
» barre de navigation sous PHPBB2: une image en fond?
» Comment dissimuler les sous-catégories? PhpBB2

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Les Messages-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit