Personnalisation du BBCode sous PHPBB2 Bouton_activePersonnalisation du BBCode sous PHPBB2 Bouton_hoverPersonnalisation du BBCode sous PHPBB2 Fb-hoverPersonnalisation du BBCode sous PHPBB2 Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Personnalisation du BBCode sous PHPBB2 EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Personnalisation du BBCode sous PHPBB2 EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Personnalisation du BBCode sous PHPBB2 EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Personnalisation du BBCode sous PHPBB2 EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Personnalisation du BBCode sous PHPBB2 EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Personnalisation du BBCode sous PHPBB2 EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Personnalisation du BBCode sous PHPBB2 EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Personnalisation du BBCode sous PHPBB2 EmptyVen 03 Fév 2023, 17:22 par Krager

Le Deal du moment : -29%
PC portable Gamer ERAZER DEPUTY P60 – ...
Voir le deal
999.99 €

Partagez
 

Personnalisation du BBCode sous PHPBB2

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Faucon
Faucon
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 1757



Personnalisation du BBCode sous PHPBB2 Empty

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 : Personnalisation du BBCode sous PHPBB2 67persoBBCode

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   Personnalisation du BBCode sous PHPBB2 EmptyDim 29 Avr 2012, 06:44
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Personnalisation du BBCode sous PHPBB2 Empty
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   Personnalisation du BBCode sous PHPBB2 EmptyMer 12 Déc 2012, 11:23
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Personnalisation du BBCode sous PHPBB2 Empty
12-12-2012 - Tutoriel validé par CSSActif
MessageSujet: Re: Personnalisation du BBCode sous PHPBB2   Personnalisation du BBCode sous PHPBB2 EmptyMer 12 Déc 2012, 11:24
Revenir en haut Aller en bas
Contenu sponsorisé




Personnalisation du BBCode sous PHPBB2 Empty
MessageSujet: Re: Personnalisation du BBCode sous PHPBB2   Personnalisation du BBCode sous PHPBB2 Empty
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

-
» Un cadre autour des codes sous PHPBB2
» Problème de script pour l'affichage des sous catégories et forums dans un système de catégories en onglet. ( forum en phpBB2)
» [Résolu !] Les sous-forums sous les sujets plutôt qu'au-dessus ?
» Barres sous catègories + liens sous forums
» PHPBB2 - Général - Overall_footer_begin

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