[Question] [css] Changer les paramètrees "code", "spoiler", "i".. etc

Date d'inscription: 25/06/2011

Bonjour

Si vous avez des questions concernant ce tutoriel, merci de les poser ici.

Date d'inscription: 03/08/2011

Sa se place dans la Feuille de style CSS ?
Je suis presque sur que oui, mes je pense que le préciser dans ton tutoriel pourrait être un petit plus Smile

Date d'inscription: 25/06/2011

Oui ça se place dans la feuille css ^^" Mais aussi dans le "head" si tu as une page html, donc non ce n'est pas utile de le préciser sur le tutoriel, il suffit de connaitre un minimum le css Voilà ^^. Par contre, j'ai un autre code (le quote) donc, je modifie quand même.

En espérant t'avoir aider.

Date d'inscription: 01/08/2010

Hello !
Sur xooit, quel template faut il modifié ? car j'ai trouvé le partie css quote & code sur plusieurs templates mais sur ce que j'ai modifié, ça n'as rien changé :/

Merci d'avance pour la réponses Very Happy

Bonne soirée

Coucou

Essaie en modifiant le template : "overall_header"

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 19/02/2011

Bonjour !

J'ai un petit problème... J'ai suivit le tuto, mais cela ne s'applique pas :/

Voici mon codage CSS

Code:

.code {
border: 3 px solid black
-moz-border-radius: 20px 20px 20px 20px; /*ceci est pour arrondir les coins sous mozilla si mes souvenirs sont bons.*\
-webkit-border-radius: 20px 20px 20px 20px; /* celui est sous IE, et d'autres mais je ne me souviens plus ^^', en tout cas il ne faut pas la supprimer*\
-border-radius: 20px 20px 20px 20px;/*pour aussi arrondir les angles, ne pas supprimer si vous voulez que votre code marche sur tous les navigateurs*\
padding : 5px;
color: #6d7a91; /* Couleur de la police*\
background: black; /* couleur de fond*\
box-shadow: black 1px 1px 1px;
}

.quote
{
border: 3 px solid black
-moz-border-radius: 20px 20px 20px 20px; /*ceci est pour arrondir les coins sous mozilla si mes souvenirs sont bons.*\
-webkit-border-radius: 20px 20px 20px 20px; /* celui est sous IE, et d'autres mais je ne me souviens plus ^^', en tout cas il ne faut pas la supprimer*\
-border-radius: 20px 20px 20px 20px;/*pour aussi arrondir les angles, ne pas supprimer si vous voulez que votre code marche sur tous les navigateurs*\
padding : 5px;
color: #6d7a91; /* Couleur de la police*\
background: black; /* couleur de fond*\
box-shadow: black 1px 1px 1px;
}

.spoiler_closed{ /*lorsque le spoiler est masqué*\
border: 3 px solid black
-moz-border-radius: 20px 20px 20px 20px; /*ceci est pour arrondir les coins sous mozilla si mes souvenirs sont bons.*\
-webkit-border-radius: 20px 20px 20px 20px; /* celui est sous IE, et d'autres mais je ne me souviens plus ^^', en tout cas il ne faut pas la supprimer*\
-border-radius: 20px 20px 20px 20px;/*pour aussi arrondir les angles, ne pas supprimer si vous voulez que votre code marche sur tous les navigateurs*\
padding : 5px;
color: #6d7a91; /* Couleur de la police*\
background: black; /* couleur de fond*\
box-shadow: black 1px 1px 1px;
}

.spoiler_content{/*lorsque le spoiler est ouvert*\
border: 3 px solid black
-moz-border-radius: 20px 20px 20px 20px; /*ceci est pour arrondir les coins sous mozilla si mes souvenirs sont bons.*\
-webkit-border-radius: 20px 20px 20px 20px; /* celui est sous IE, et d'autres mais je ne me souviens plus ^^', en tout cas il ne faut pas la supprimer*\
-border-radius: 20px 20px 20px 20px;/*pour aussi arrondir les angles, ne pas supprimer si vous voulez que votre code marche sur tous les navigateurs*\
padding : 5px;
color: #6d7a91; /* Couleur de la police*\
background: black; /* couleur de fond*\
box-shadow: black 1px 1px 1px;
}

.i
{
color: #6d7a91; /* pour que l'italique soit d'une couleur différente du reste du texte (pratique pour les forums rpg)*\
font-family: time new roman;
}

.b
{
color: #6d7a91;
border-bottom:2px solid black;
}

Date d'inscription: 28/09/2010

Coucou Raiponce,

Dans ton code, il y a un truc qui me semble bizarre
tout ce qui est /* *\ c'est du commentaire, donc jusque là pas de probleme (tu pourrais d'ailleurs l'enlever ca ne poserait pas de probleme, mais surtout, la bonne ecriture des balises de commentaires c'est : /* */
Ca doit etre pour ca que ca ne fonctionne pas, tout ton code doit être vu, actuellement, comme du commentaire.
J'ai corrigé, tente ca et vois ce que ca donne :

Code:

.code {
border: 3 px solid black
-moz-border-radius: 20px 20px 20px 20px; /*ceci est pour arrondir les coins sous mozilla si mes souvenirs sont bons.*/
-webkit-border-radius: 20px 20px 20px 20px; /* celui est sous IE, et d'autres mais je ne me souviens plus ^^', en tout cas il ne faut pas la supprimer*/
-border-radius: 20px 20px 20px 20px;/*pour aussi arrondir les angles, ne pas supprimer si vous voulez que votre code marche sur tous les navigateurs*/
padding : 5px;
color: #6d7a91; /* Couleur de la police*/
background: black; /* couleur de fond*/
box-shadow: black 1px 1px 1px;
}

.quote
{
border: 3 px solid black
-moz-border-radius: 20px 20px 20px 20px; /*ceci est pour arrondir les coins sous mozilla si mes souvenirs sont bons.*/
-webkit-border-radius: 20px 20px 20px 20px; /* celui est sous IE, et d'autres mais je ne me souviens plus ^^', en tout cas il ne faut pas la supprimer*/
-border-radius: 20px 20px 20px 20px;/*pour aussi arrondir les angles, ne pas supprimer si vous voulez que votre code marche sur tous les navigateurs*/
padding : 5px;
color: #6d7a91; /* Couleur de la police*/
background: black; /* couleur de fond*/
box-shadow: black 1px 1px 1px;
}

.spoiler_closed{ /*lorsque le spoiler est masqué*/
border: 3 px solid black
-moz-border-radius: 20px 20px 20px 20px; /*ceci est pour arrondir les coins sous mozilla si mes souvenirs sont bons.*/
-webkit-border-radius: 20px 20px 20px 20px; /* celui est sous IE, et d'autres mais je ne me souviens plus ^^', en tout cas il ne faut pas la supprimer*/
-border-radius: 20px 20px 20px 20px;/*pour aussi arrondir les angles, ne pas supprimer si vous voulez que votre code marche sur tous les navigateurs*/
padding : 5px;
color: #6d7a91; /* Couleur de la police*/
background: black; /* couleur de fond*/
box-shadow: black 1px 1px 1px;
}

.spoiler_content{/*lorsque le spoiler est ouvert*/
border: 3 px solid black
-moz-border-radius: 20px 20px 20px 20px; /*ceci est pour arrondir les coins sous mozilla si mes souvenirs sont bons.*/
-webkit-border-radius: 20px 20px 20px 20px; /* celui est sous IE, et d'autres mais je ne me souviens plus ^^', en tout cas il ne faut pas la supprimer*/
-border-radius: 20px 20px 20px 20px;/*pour aussi arrondir les angles, ne pas supprimer si vous voulez que votre code marche sur tous les navigateurs*/
padding : 5px;
color: #6d7a91; /* Couleur de la police*/
background: black; /* couleur de fond*/
box-shadow: black 1px 1px 1px;
}

.i
{
color: #6d7a91; /* pour que l'italique soit d'une couleur différente du reste du texte (pratique pour les forums rpg)*/
font-family: time new roman;
}

.b
{
color: #6d7a91;
border-bottom:2px solid black;
}

_________________

Spoiler:

Date d'inscription: 19/02/2011

Effectivement, cela marche maintenant, merci Very Happy

Date d'inscription: 25/06/2011

Oui, j'ai mal noté le commentaire sur le tutoriel, je m'en vais de ce pas corriger ^^ merci raiponce de me l'avoir fait remarqué x)!

Date d'inscription: 27/02/2011

Bonjour,

J'ai une question, est-ce que quelqu'un pourrait m'expliquer comment enlever le mot "citation" des quotes et les deux points ( : ) ?

Je veux dire, n'avoir que les cadres Smile

Merci d'avance Smile

_________________

Coucou Miss Smile

Pour un forum sous fa ou xooit ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 27/02/2011

Coucou Miettes (je travaillais mon exo :=):

)

C'est pour FA s'il te plaît. Sur Xooit, j'avais réussi à l'enlever donc je voulais le faire aussi pour FA.

Merci Smile

_________________

Ok d'acc ^^ ça va donc se passait dans le css. Dans ton message, une citation se présente comme ça

Code:

<div class="postbody">
<table width="90%" cellspacing="1" cellpadding="0" border="0" align="center">
   <tr>
      <td>
         <span class="genmed"><b>Citation:</b></span>
      </td>
   </tr>
   <tr>
      <td class="quote">blablabla - citation</td>
   </tr>
</table>
</div>

et le code comme ça (je le mets car c'est important pour la suite Smile

)

Code:

<div class="postbody">
<table width="90%" style="table-layout:fixed;" cellspacing="1" cellpadding="0" border="0" align="center">
   <tr>
      <td>
         <span class="genmed"><b>Code:</b></span>
      </td>
   </tr>
   <tr>
      <td class="code">
         <div class="cont_code" curpos="0" maxpos="0" pageincrement="480" increment="10" collapsed="true">blablabla - code</div>
      </td>
   </tr>
</table>
</div>

Dans le css, on va devoir dire : "je veux cacher le contenu du premier tr du tableau". Evidemment, pour bien repérer de quel tableau il s'agit, il va falloir être précis. Pour le moment, on aurait :

Code:

div.postbody table tbody tr:first-child span{
visibility:hidden;
}

qui veut dire : "dans la div qui a pour class "postbody", je vais dans le tableau puis dans la balise tbody, puis dans le tout premier tr (tr:first-child) je cache le span".

Problème : ça va appliquer ce style à tous les tableaux. Or, nous on le veut uniquement pour le citation. On va donc devoir cibler le code. Pour cela, on va mettre chaque attribue du tableau entre [] dans le css
-> html

Code:

-> css

Code:

div.postbody table[width="90%"][cellspacing="1"][cellpadding="0"][border="0"][align="center"] tbody tr:first-child span{
visibility:hidden;
}

Tu comprends le truc ?

Bon, ici, encore un problème : ça cache tout : le texte aussi du spoiler et du code. Zioup ! On règle ça

Code:

div.postbody table[width="90%"][style="table-layout:fixed;"][cellspacing="1"][cellpadding="0"][border="0"][align="center"] tbody tr:first-child span, div.postbody table.spoiler tbody tr:first-child span{
visibility:visible !important;
}

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 27/02/2011

Oulalala... j'arrive plus ou moins à tout comprendre mais je suis perdue... à cette étape :

Citation:

Problème : ça va appliquer ce style à tous les tableaux. Or, nous on le veut uniquement pour le citation. On va donc devoir cibler le code. Pour cela, on va mettre chaque attribue du tableau entre [] dans le css

Et puis, je voudrais ça :

citation simple : aucune phrase au-dessus, juste le cadre
citation d'une personne : ne rien changer "XXXX a dit :" me va très bien
spoiler : je veux que la balise "spoiler" mais pas les : pour pouvoir mettre :
Code:
[spoiler=<div class="bidule">Voir le texte</div>]texte[/spoiler]

qui donnera ça :
Voir le texte

au lieu de ça (où les deux petits points me gêne >.<) :

Voir le texte
:
texte

_________________

Coucou

Bon ! J'ai un premier point de fait : le citation ^^

1/ On va modifier le template "viewtopic_body" pour ajouter un id au bloc message. Pour cela, repère ceci

Code:

<div class="postbody">

<div>{postrow.displayed.MESSAGE}</div>

et remplace le par

Code:

<div class="postbody" id="contenu_msg">

<div>{postrow.displayed.MESSAGE}</div>

2/ Crée un nouveau javascript (qu'on va uniquement afficher dans les sujets) et colles-y ça

Code:

jQuery().ready(function(){
document.getElementById('contenu_msg').innerHTML=document.getElementById('contenu_msg').innerHTML.replace(/Citation:/g,"");
});

NB: pour que ça fonctionne, la bibliothéque jquery doit être appelé dans le overall_header de ton forum.

Pour le spoiler, je cherche encore Smile

_________________

SoP Story :: 2ème votes éliminatoires