Convertir un code dohtml en html

[Fuuz]

Salut ! J'ai trouvé récemment un code splendide mais qui ne marche pas du tous car il est en dohtml. On m'a dit qu'il fallait juste changer les balises hors je suis extrêmement nulle! Je voulais savoir si il y avait des astuces/convertisseurs ou autre pour changer en html.

Le code :

Code:

[dohtml]<center><link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<style type='text/css'>

.pirates { width: 350px; height: 550px;  background-color: #2c2d2b; padding: 50px; }
.madmen  {  opacity:0; width: 300px; height: 400px; padding:  25px; background-color: #272725; -webkit-transition: opacity .6s linear; -moz-transition: opacity .9s linear; -o-transition: opacity .9s linear;  z-index: 1; }
.madmen:hover { opacity: .99;  }
.charlatans::-webkit-scrollbar { width: 5px; height: 5px; }
.charlatans::-webkit-scrollbar-track { background-color: #2c2d2b; }
.charlatans::-webkit-scrollbar-thumb { background-color: #555555; }
</style>

<div class="pirates">
<div style=" font-family: 'playfair display'; font-size: 70px; color: #555; text-align: center; text-transform: uppercase;  font-style: italic; letter-spacing: -6px; line-height: 60%; ">white lies.</div>
<div style="font-family: calibri; font-size: 8px; color: #555; text-align: center; text-transform: uppercase;  letter-spacing: 4px; border-bottom: 1px solid #555555; border-top: 1px solid #555555; font-style: italic;">i ain't gonna sing the same old song again.</div>
<div style="margin-top: 2px; width: 350px; height: 450px; background-image:url(350X450 IMAGE HERE);  background-position: center;"><div class="madmen"><div style="padding: 10px;"><div style="height: 380px; font-family: calibri;  font-size: 11px; color: #666666; text-align: justify; line-height: 90%;  overflow: auto; padding-right:  3px;" class="charlatans">

your post business here! it will scroll at some point.

</div></div></div>
<div style="width: 350px; height: 32px; background-color: 272725; padding-top: 18px; font-family: calibri; font-size: 8px; color: #555; text-align: center; text-transform: uppercase;  letter-spacing: 2px;  font-style: italic;">[b]WORDS:[/b] ### | [b]TAG:[/b] name | [b]NOTES:[/b] notes</div></div></div>
[size=0]template by [url=http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=17840]act appalled[/url] of [url=http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/]a thousand fireflies[/url].[/size]
</center>[/dohtml]

Et voiçi ce qui s'affiche à mon écran : https://2img.net/r/hpimg11/pics/720181pfff.png ...

[Lixyr]

Bonjour.

Ce code, vous l'avez mis où exactement, dans votre panneau d'administration ?

[Fuuz]

C'est pour répondre à un RP sur un forum RPG! Je ne l'ai encore mis nul part vu qu'il ne marcher pas

[Lixyr]

Donc ça sera mis en tant que réponse d'un message, par conséquent en message ?

[Fuuz]

voilà

[Lixyr]

Vous êtes sensé obtenir ça ?

[Fuuz]

Voilà ! est à al place je n'obtiens que quelques mots comme dans mon screen donné

[demeter1]

Bonjour, il suffit de coller le css dans la feuille de style cad

Code:

.pirates { width: 350px; height: 550px;  background-color: #2c2d2b; padding: 50px; }
.madmen  {  opacity:0; width: 300px; height: 400px; padding:  25px; background-color: #272725; -webkit-transition: opacity .6s linear; -moz-transition: opacity .9s linear; -o-transition: opacity .9s linear;  z-index: 1; }
.madmen:hover { opacity: .99;  }
.charlatans::-webkit-scrollbar { width: 5px; height: 5px; }
.charlatans::-webkit-scrollbar-track { background-color: #2c2d2b; }
.charlatans::-webkit-scrollbar-thumb { background-color: #555555; }

et ce code dans le message

Code:

<center><link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>   
    <div class="pirates">
    <div style=" font-family: 'playfair display'; font-size: 70px; color: #555; text-align: center; text-transform: uppercase;  font-style: italic; letter-spacing: -6px; line-height: 60%; ">white lies.</div>
    <div style="font-family: calibri; font-size: 8px; color: #555; text-align: center; text-transform: uppercase;  letter-spacing: 4px; border-bottom: 1px solid #555555; border-top: 1px solid #555555; font-style: italic;">i ain't gonna sing the same old song again.</div>
    <div style="margin-top: 2px; width: 350px; height: 450px; background-image:url(350X450 IMAGE HERE);  background-position: center;"><div class="madmen"><div style="padding: 10px;"><div style="height: 380px; font-family: calibri;  font-size: 11px; color: #666666; text-align: justify; line-height: 90%;  overflow: auto; padding-right:  3px;" class="charlatans">

    your post business here! it will scroll at some point.

    </div></div></div>
    <div style="width: 350px; height: 32px; background-color: 272725; padding-top: 18px; font-family: calibri; font-size: 8px; color: #555; text-align: center; text-transform: uppercase;  letter-spacing: 2px;  font-style: italic;">[b]WORDS:[/b] ### | [b]TAG:[/b] name | [b]NOTES:[/b] notes</div></div></div>
    [size=0]template by [url=http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=17840]act appalled[/url] of [url=http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/]a thousand fireflies[/url].[/size]
    </center>


Bon, ceci dit, il serait préférable mettre l'ensemble du codage en BBcode , pour ne pas subir le retour à la ligne de l'HTML du au soucis du nouvel éditeur.

[Lixyr]

Oui. En page HTML ça fonctionne très bien. Lorsque je l'ai inséré dans un message, ça a marché au tout début après quelques modifications, mais dès que je l'ai posté, pouf, plus rien.. Je vais tâcher de comprendre pourquoi.

Merci Demeter, ça je le sais, mais ce code va être posté sur un forum qui n'est pas le sien, d'où l’intérêt du code avec css.

[demeter1]

Autant pour moi; à moins de passer par une iframe, je ne vois pas comment faire autrement. On peut tout convertir en bbcode mais la partie de coloration des scrollbar risque d'être impossible.

[Lixyr]

Ce n'est pas ça qui pêche, c'est l'affichage progressif sous hover. :X Il fait planter tout le CSS. Du coup, je tente de trouver pourquoi et de modifier ça de sorte que ça marche.

[Lixyr]

Désolée, je double-post. :X J'ai trouvé ce qui n'allait pas : des espaces et des retours à la ligne intempestifs dans le css. Je corrige ça, je mets tout le css entre les balises (parce que bon, avoir une balise css et mettre le css dans le html ça pique) et je vous envoie le code.


*edit *

Code:

<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'><style type="text/css"> .pirates{width:350px; height:550px; background-color:#2c2d2b; padding: 50px;} .white_lies{font-family: 'playfair display'; font-size:70px; color:#555; text-align:center; text-transform:uppercase; font-style:italic; letter-spacing:-6px; line-height:60%;} .cita{font-family:calibri; font-size:8px; color:#555; text-align:center; text-transform:uppercase; letter-spacing:4px; border-bottom:1px solid #555555; border-top:1px solid #555555; font-style: italic;} .contours {margin-top:2px; width:350px; height:450px; background-image:url(350X450 IMAGE HERE); background-position:center;} .madmen {opacity:0; width:300px; height:400px; padding:25px; background-color: #272725; -webkit-transition:opacity .6s linear; -moz-transition:opacity .9s linear; -o-transition:opacity .9s linear;  z-index: 1;} .madmen{width:350px; height:380px; font-family:calibri; font-size:11px; color: #666666; text-align: justify; line-height:90%; overflow:auto; padding-right:3px;} .madmen:hover {opacity: .99;}.charlatans::-webkit-scrollbar{width:5px; height:5px; }.charlatans::-webkit-scrollbar-track {background-color:#2c2d2b; }.charlatans::-webkit-scrollbar-thumb {background-color:#555555;} .bas_page {width:350px; height:32px; background-color:#272725; padding-top:18px; font-family:calibri; font-size:8px; color:#555; text-align:center; text-transform:uppercase; letter-spacing:2px; font-style:italic;}</style>


<center><div class="pirates"><div class="white_lies">white lies.</div><br /><div class="cita">i ain't gonna sing the same old song again.</div><div class="contours"><div class="madmen"><div style="padding:10px;"><div class="charlatans">your post business here! it will scroll at some point.</div></div></div><div class="bas_page">[b]WORDS:[/b] ### | [b]TAG:[/b] name | [b]NOTES:[/b] notes</div></div></div>[size=0]template by [url=http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=17840]act appalled[/url] of [url=http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/]a thousand fireflies[/url].[/size]</center>

Et voilà.

[Fuuz]

Comment avez vous fait au final ? Pour m’éviter de demander à chaque fois qu'un code de même type me plait et qu'il ne marche pas :/

[Lixyr]

Dans le code CSS, il y avait des retours à la ligne, et des espaces en trop. Quand on met ça dans une page HTML, ça ne dérange pas, puisque la page HTML n'interprète que le html, donc les retours à la ligne et les espaces en trop ne sont pas interprétés : le code est lu normalement, mais dans un message qui autorise le bbcode, les retours à la ligne et les espaces comptent, et donc ça fait planter le css. Il faut bien faire attention à ce qu'il n'y ait pas d'espace en trop, comme par exemple :

Code:

border:  1px solid #fff;

=> il y a deux espaces avant le 1, donc le code sera mal interprété, il n'en faut qu'un seul maximum. Idem avec les retours à la ligne : aucun retour à la ligne dans un code CSS posté dans un message !! Sinon il n'est interprété que jusqu'au retour à la ligne, pas plus.

Pour le reste, ce n'était que parce que c'est comme ça qu'on fait, mais ça ne changeait rien : j'ai retiré les attributs style (remplacés par des classes) qui contenaient du css, et ai mis ce css (en fonction des classes rajoutées) entre les deux balises accueillant le css. Pour que ça soit propre.

[Fuuz]

D'accord, merci de votre aide !