[Réglé] BBCODE personnalisé et CSS

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.3

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] BBCODE personnalisé et CSS

Messagepar ninouee » 11 Oct 2020 à 13:13

Bonjour :D

Je travaille sur un projet de forum qui va permettre de regrouper plusieurs forum RPG indépendant pour que leurs créateurs puisse se regrouper et s'entre-aider.

Mon idée permet aux différents gestionnaires des sous forums RPG d'avoir leurs propre règles, structure mais aussi apparences.
Les styles hérités et la possibilité de dédier un style sur chaque forum de PHPBB3 est donc fortement pratique.

Je viens vous voir car il y a un élément que je n'arrive pas à régler au niveau de mes BBCODES.
En effet, comme nous ne pouvons pas utiliser le HTML j'ai créé des BBCODE qui permettent d'avoir des éléments pré formatés comme des Titres, des tableaux ou des flexboxes.
Pour cela j'ai du programmer du CSS et HTML dans les paramètres du BBCODE (Code HTML de remplacement).

Afin que la mise en forme généré par mes BBCODE corresponde à chaque sous forum RPG j'ai donc essayé de mettre ma mise en forme sur le CSS de mon style mais cela ne fonctionne pas.

Voila l'adresse du mon projet https://ddstv.fr/unys/index.php

Voila une mise en forme de BBCODE qui fonctionne :
Utilisation du BBCode
Code: Tout sélectionner
[T1]{TEXT}[/T1]

Code HTML de remplacement
Code: Tout sélectionner
<div style="
padding: 2px 0px 0px 0px ;
color: #00baff;
	text-shadow: 1px 1px 2px #000000 , 2px 2px 5px #000000 , 1px 1px 1px #000000,3px 3px 3px #000000 ,5px 5px 10px #000000 ,
			-1px 0 0 rgba(0, 0, 0, 0.8), 
             1px 0 0 rgba(0, 0, 0, 0.8),
             0 -1px 0 rgba(0, 0, 0, 0.8),
             0 1px 0 rgba(0, 0, 0, 0.8);
	font-size:40px;
font-style: italic;
text-align: center;
padding: 15px;
font-family:handleeregular, arial, cursive;">{TEXT}</div>


Ce que j'ai essayé de faire en passant par le CSS et qui ne marche pas:
Utilisation du BBCode
Code: Tout sélectionner
[T3]{TEXT}[/T3]


Code HTML de remplacement
Code: Tout sélectionner
<div class="formt1">{TEXT}</div>


Théoriquement le BBCODE T1 et T3 devraient donner le même résultat, mais pour T3 c'est comme si le CSS n'était pas pris ou que le programme ne savait pas où prendre le CSS.
Auriez-vous une piste à me donner pour que je trouve où j'ai commis une erreur?

Merci à vous.

Bon après-midi.
Modifié en dernier par ninouee le 12 Oct 2020 à 07:28, modifié 1 fois.
Avatar de l’utilisateur
ninouee
Maître-posteur
Maître-posteur
 
Messages: 412
Enregistré le: 22 Nov 2009 à 20:12

Re: BBCODE personnalisé et CSS

Messagepar Sylveretour » 11 Oct 2020 à 14:09

Bonjour,

Pour ne pas chercher dans tous les sens, donne nous alors des liens de sujets contenant ces bbcodes afin que l'on puisse constater par nous-même ce qui ne va pas.
Car là, on ne peut que supposer, pas apporter une réponse formelle...

Déjà, le chargement de la page donnée est trèèèèès long au premier chargement :shock: (images lourdes et certaines non en https)
Avatar de l’utilisateur
Sylveretour
Floodeur mature
Floodeur mature
 
Messages: 1617
Enregistré le: 21 Nov 2017 à 18:24
Localisation: West Coast

Re: BBCODE personnalisé et CSS

Messagepar ninouee » 11 Oct 2020 à 14:18

Bonjour Sylveretour

Je ne pensais pas que c'était long à charger chez vous aussi, je pensais que ça le faisait que chez moi à cause de ma petite connexion et d'Amazon prime Video.

Je corrigerais le problème sans doute la bannière temporaire qui est trop loudre et qui va être modifiée dans quelques jours.

Je vous ai fait un sujet de test avec les deux bbcodes https://ddstv.fr/unys/viewtopic.php?f=2&p=33#p33

Quand je fait "inspecter" sur mon navigateur, dans la partie qui fait apparaître les données de style utilisé, je ne vois rien de mon fichier CSS pour le titre 3. C'est pour ça que je parlais sans doute d'un problème de liaison entre la class et la feuille de style et je ne sais pas comment régler ça.

Merci
Avatar de l’utilisateur
ninouee
Maître-posteur
Maître-posteur
 
Messages: 412
Enregistré le: 22 Nov 2009 à 20:12

Re: BBCODE personnalisé et CSS

Messagepar Sylveretour » 11 Oct 2020 à 14:46

Ce que j'ai essayé de faire en passant par le CSS et qui ne marche pas:

Je vient de regarder ton fichier css et je découvre cela :
Code: Tout sélectionner
/***********Format des BBCODES**************/	
.formt1 {
	padding: 2px 0px 0px 0px ;
	color: #00baff;
	text-shadow: 1px 1px 2px #000000 , 2px 2px 5px #000000 , 1px 1px 1px #000000,3px 3px 3px #000000 ,5px 5px 10px #000000 ,
			-1px 0 0 rgba(0, 0, 0, 0.8), 
             1px 0 0 rgba(0, 0, 0, 0.8),
             0 -1px 0 rgba(0, 0, 0, 0.8),
             0 1px 0 rgba(0, 0, 0, 0.8);
	font-size:40px;
	font-style: italic;
	text-align: center;
	padding: 15px;
	font-family:handleeregular, arial, cursive;}


/***********FIN Format des BBCODES**************/	

A remplacer par :
Code: Tout sélectionner
/***********Format des BBCODES**************/	
div.formt1 {
	color: #00baff;
	text-shadow: 1px 1px 2px #000000, 2px 2px 5px #000000, 1px 1px 1px #000000, 3px 3px 3px #000000, 5px 5px 10px #000000,
		-1px 0 0 rgba(0, 0, 0, 0.8), 
        1px 0 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(0, 0, 0, 0.8),
        0 1px 0 rgba(0, 0, 0, 0.8);
	font-size: 40px;
	font-style: italic;
	text-align: center;
	padding: 15px;
	font-family: handleeregular, arial, cursive;
}	
/***********FIN Format des BBCODES**************/

Mais déjà, pour info, 2 lignes padding s'annulent et le text-shadow noir sur un fond noir ne sert à rien :mrgreen:

Édit ::
tu a mis du code non valide avant dans ton css qui annule tout code mis après :
Code: Tout sélectionner
::-webkit-scrollbar {
background-color: transparent;
width: 5px;
}

::-webkit-scrollbar-button{
background-color: transparent;
  height: 5px;
width: 5px;
}

::-webkit-scrollbar-track        {
background-color: transparent;
}
::-webkit-scrollbar-track-piece  {
background-color: transparent;
}

::-webkit-scrollbar-thumb        {
background-color: #396A78;
  border: transparent;
width:5px;
}

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
Avatar de l’utilisateur
Sylveretour
Floodeur mature
Floodeur mature
 
Messages: 1617
Enregistré le: 21 Nov 2017 à 18:24
Localisation: West Coast

Re: BBCODE personnalisé et CSS

Messagepar ninouee » 12 Oct 2020 à 06:41

Bonjour

Merci pour votre aide cela fonctionne.

Par contre je ne comprends pas pourquoi il fallait mettre div.formt1 et pas tout simplement formt1?

Merci à vous.
Avatar de l’utilisateur
ninouee
Maître-posteur
Maître-posteur
 
Messages: 412
Enregistré le: 22 Nov 2009 à 20:12

Re: BBCODE personnalisé et CSS

Messagepar cabot » 12 Oct 2020 à 12:26

Hello,

A moins que ce BBCode ne s'applique que sur les résos ≤ 700px, c'est normal que le texte ne soit pas modifié sur les résos supérieures.

En effet, tu n'as pas fermé la règle @media ligne 1659 :
Code: Tout sélectionner
@media (max-width: 700px) {

Ce qui fait que toutes les déclarations qui suivent, autrement dit jusqu'à la fin du fichier, sont considérées comme conditionnées par cette règle.

Sinon, il n'y a rien dans la cascade qui empêche .formt1 de faire le job, il ne devrait pas y avoir besoin de cibler div.formt1.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26875
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: BBCODE personnalisé et CSS

Messagepar ninouee » 12 Oct 2020 à 19:25

Merci

Pour vos explications et recherches.

Je n'avais vus ce problème de parenthèses que j'ai corrigé.

Je n'avais même pas vu ça.

Merci encore à vous.
Avatar de l’utilisateur
ninouee
Maître-posteur
Maître-posteur
 
Messages: 412
Enregistré le: 22 Nov 2009 à 20:12


Retourner vers [3.3.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité

cron