AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -21%
LEGO® Icons 10329 Les Plantes Miniatures, ...
Voir le deal
39.59 €

    Personnalisation de la fiche Steampunk de Shaneliae

    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Jeu 14 Avr 2016 - 16:44

    Bien le bonjour ou le bonsoir,

    Je me permets de poster ce message parce que j'ai un petit soucis. Je me débrouille en code mais je ne suis pas un foudre de guerre non plus ^^" hors, il s'avère que je suis sous le charme de la fiche de présentation style Steampunk de Shaneliae (ICI) et que de ce fait, après l'avoir installée sur mon forum en pleine construction (ICI), j'ai voulu la modifier pour en faire une fiche de description de groupes. Malheureusement, j'ai beau tout faire, chaque fois que je change l'image de couverture, cette image change dans toutes les autres fiches déjà faites dans le sujet pour prendre l'apparence de la dernière ou de la première image utilisée, ce qui n'est pas fort pratique puisque chaque couverture change en fonction du groupe présenté... Pourriez-vous m'aider, s'il vous plait, à régler ce petit soucis ? Parce que je n'arrive pas à trouver d'où vient le problème ^^"

    En vous remerciant d'avance pour votre aide, voici donc le code tel que je l'ai modifié pour correspondre à mes besoins :

    Code:
    <style>.couverture_livre {background-image: url('http://i63.tinypic.com/2rcr042.jpg'); width: 300px; height: 500px; margin: auto; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; position: relative;} .couverture_livre:hover {transform: all; -webkit-transform: all; transition: 2s; -webkit-transition: 2s; z-index: 5;} .page_livre {color: #1F140B; font-family: courier new; text-align: justify; background-image: url('http://i65.tinypic.com/dyxgk2.jpg'); width: 300px; height: 500px; margin: auto; position: relative; display: block; opacity: 0; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; z-index: 1;} .page_livre:hover {opacity: 1; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s;} .tableau_steam {margin: auto;} .page_livre a{color: #6D2A0C !important; font-family: impact; transition: 1s; webkit-transition: 1s;} .page_livre a:hover{color: #D17923 !important; letter-spacing: 3px; text-shadow: 0px 0px 3px #1F140B;} .autre_cadre {font-family: courier new; text-align: left; width: 270px; height: 300px; overflow: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px; font-size: 14px;} .police_autre {font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: 15px;} .grand_cadre {border-radius: 10px; width: 270px; overflow: auto; margin: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px;} .petit_cadre{height: 10px; opacity: 0; overflow: auto; -webkit-transition: all 1s; transition: all 1s; margin: auto;} .cadre_cache:hover .petit_cadre{height: 180px; width: 270px; opacity:1;} .police_titres {font-family: 'Aldrich', sans-serif; font-size: 18px; font-weight: bold; display: block; text-align: center;} .info_importante {font-family: 'Impact'; color: #49270D; letter-spacing: 2px;}</style>

    <div class="couverture_livre"><div class="page_livre">
    <table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 10px 10px 10px;"><span class="police_autre">Nom</span> : Réponse

    <span class="info_importante">Information à mettre en évidence</span>

    <a href="LIEN DE L'URL">Titre de l'url</a>
    </div></td></tr></table>

    <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
    Sous-Groupes</span><div class="petit_cadre">

    • Sous-groupe 1
    • Sous-groupe 2
    • Sous-groupe 3
    • Sous-groupe 4

    </div></div></div>

    <a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©Shaneliae | Never Utopia</a>

    </div></div>
    <link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css'>

    Bonne journée, soirée, nuit, P'tit Loup



    Personnalisation de la fiche Steampunk de Shaneliae 30xivrd
    Elenthil
    Elenthil
    FémininAge : 36Messages : 2184

    Jeu 14 Avr 2016 - 19:19

    Hello =)

    Alors je pense que c'est la div class de la couverture qui pose problème. Pour faire simple, si tu postes plusieurs fois la même fiche portant la class .couverture_livre, l'image utilisée sera la même (puisque tu utilises la même class).

    Donc il te faut créer des titres de class différents pour chaque groupe.

       
    Code:
    <style>.couverture_livre_G1 {background-image: url('http://i86.servimg.com/u/f86/13/86/95/47/couver12.jpg'); width: 300px; height: 500px; margin: auto; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; position: relative;} .couverture_livre:hover {transform: all; -webkit-transform: all; transition: 2s; -webkit-transition: 2s; z-index: 5;} .page_livre {color: #1F140B; font-family: courier new; text-align: justify; background-image: url('http://i65.tinypic.com/dyxgk2.jpg'); width: 300px; height: 500px; margin: auto; position: relative; display: block; opacity: 0; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; z-index: 1;} .page_livre:hover {opacity: 1; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s;} .tableau_steam {margin: auto;} .page_livre a{color: #6D2A0C !important; font-family: impact; transition: 1s; webkit-transition: 1s;} .page_livre a:hover{color: #D17923 !important; letter-spacing: 3px; text-shadow: 0px 0px 3px #1F140B;} .autre_cadre {font-family: courier new; text-align: left; width: 270px; height: 300px; overflow: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px; font-size: 14px;} .police_autre {font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: 15px;} .grand_cadre {border-radius: 10px; width: 270px; overflow: auto; margin: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px;} .petit_cadre{height: 10px; opacity: 0; overflow: auto; -webkit-transition: all 1s; transition: all 1s; margin: auto;} .cadre_cache:hover .petit_cadre{height: 180px; width: 270px; opacity:1;} .police_titres {font-family: 'Aldrich', sans-serif; font-size: 18px; font-weight: bold; display: block; text-align: center;} .info_importante {font-family: 'Impact'; color: #49270D; letter-spacing: 2px;}</style>

       <div class="couverture_livre_G1"><div class="page_livre">
       <table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 10px 10px 10px;"><span class="police_autre">Nom</span> : Réponse

       <span class="info_importante">Information à mettre en évidence</span>

       <a href="LIEN DE L'URL">Titre de l'url</a>
       </div></td></tr></table>

       <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
       Sous-Groupes</span><div class="petit_cadre">

       • Sous-groupe 1
       • Sous-groupe 2
       • Sous-groupe 3
       • Sous-groupe 4

       </div></div></div>

       <a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©Shaneliae | Never Utopia</a>

       </div></div>
       <link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css'>

    _____________



     
    Code:
    <style>.couverture_livre_G2 {background-image: url('http://i86.servimg.com/u/f86/13/86/95/47/couver10.jpg'); width: 300px; height: 500px; margin: auto; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; position: relative;} .couverture_livre:hover {transform: all; -webkit-transform: all; transition: 2s; -webkit-transition: 2s; z-index: 5;} .page_livre {color: #1F140B; font-family: courier new; text-align: justify; background-image: url('http://i65.tinypic.com/dyxgk2.jpg'); width: 300px; height: 500px; margin: auto; position: relative; display: block; opacity: 0; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; z-index: 1;} .page_livre:hover {opacity: 1; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s;} .tableau_steam {margin: auto;} .page_livre a{color: #6D2A0C !important; font-family: impact; transition: 1s; webkit-transition: 1s;} .page_livre a:hover{color: #D17923 !important; letter-spacing: 3px; text-shadow: 0px 0px 3px #1F140B;} .autre_cadre {font-family: courier new; text-align: left; width: 270px; height: 300px; overflow: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px; font-size: 14px;} .police_autre {font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: 15px;} .grand_cadre {border-radius: 10px; width: 270px; overflow: auto; margin: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px;} .petit_cadre{height: 10px; opacity: 0; overflow: auto; -webkit-transition: all 1s; transition: all 1s; margin: auto;} .cadre_cache:hover .petit_cadre{height: 180px; width: 270px; opacity:1;} .police_titres {font-family: 'Aldrich', sans-serif; font-size: 18px; font-weight: bold; display: block; text-align: center;} .info_importante {font-family: 'Impact'; color: #49270D; letter-spacing: 2px;}</style>

      <div class="couverture_livre_G2"><div class="page_livre">
      <table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 10px 10px 10px;"><span class="police_autre">Nom</span> : Réponse

      <span class="info_importante">Information à mettre en évidence</span>

      <a href="LIEN DE L'URL">Titre de l'url</a>
      </div></td></tr></table>

      <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
      Sous-Groupes</span><div class="petit_cadre">

      • Sous-groupe 1
      • Sous-groupe 2
      • Sous-groupe 3
      • Sous-groupe 4

      </div></div></div>

      <a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©Shaneliae | Never Utopia</a>

      </div></div>
      <link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css'>
    _____________


     
    Code:
    <style>.couverture_livre_G3 {background-image: url('http://i86.servimg.com/u/f86/13/86/95/47/couver11.jpg'); width: 300px; height: 500px; margin: auto; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; position: relative;} .couverture_livre:hover {transform: all; -webkit-transform: all; transition: 2s; -webkit-transition: 2s; z-index: 5;} .page_livre {color: #1F140B; font-family: courier new; text-align: justify; background-image: url('http://i65.tinypic.com/dyxgk2.jpg'); width: 300px; height: 500px; margin: auto; position: relative; display: block; opacity: 0; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; z-index: 1;} .page_livre:hover {opacity: 1; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s;} .tableau_steam {margin: auto;} .page_livre a{color: #6D2A0C !important; font-family: impact; transition: 1s; webkit-transition: 1s;} .page_livre a:hover{color: #D17923 !important; letter-spacing: 3px; text-shadow: 0px 0px 3px #1F140B;} .autre_cadre {font-family: courier new; text-align: left; width: 270px; height: 300px; overflow: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px; font-size: 14px;} .police_autre {font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: 15px;} .grand_cadre {border-radius: 10px; width: 270px; overflow: auto; margin: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px;} .petit_cadre{height: 10px; opacity: 0; overflow: auto; -webkit-transition: all 1s; transition: all 1s; margin: auto;} .cadre_cache:hover .petit_cadre{height: 180px; width: 270px; opacity:1;} .police_titres {font-family: 'Aldrich', sans-serif; font-size: 18px; font-weight: bold; display: block; text-align: center;} .info_importante {font-family: 'Impact'; color: #49270D; letter-spacing: 2px;}</style>

      <div class="couverture_livre_G3"><div class="page_livre">
      <table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 10px 10px 10px;"><span class="police_autre">Nom</span> : Réponse

      <span class="info_importante">Information à mettre en évidence</span>

      <a href="LIEN DE L'URL">Titre de l'url</a>
      </div></td></tr></table>

      <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
      Sous-Groupes</span><div class="petit_cadre">

      • Sous-groupe 1
      • Sous-groupe 2
      • Sous-groupe 3
      • Sous-groupe 4

      </div></div></div>

      <a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©Shaneliae | Never Utopia</a>

      </div></div>
      <link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css'>

    Voilà j'ai fais les modifications en te prenant la même image avec un texte différent (pour voir juste le changement) pour te montrer. Essaie d'installer pour voir le rendu de mes 3 images de couverture et ensuite remplaces par tes images si c'est ok =)


    Dernière édition par Elenthil le Jeu 14 Avr 2016 - 19:26, édité 1 fois




    Merci Rozenbrez :lovebomb:
    Personnalisation de la fiche Steampunk de Shaneliae 472020userbarfanclubdelenthil
    Merci Shoki pour la signature et Nihil pour l'avatar :lovebomb:
    Personnalisation de la fiche Steampunk de Shaneliae I2j8



    Cadeaux




    Personnalisation de la fiche Steampunk de Shaneliae 1473781108-sans-titre-8 Personnalisation de la fiche Steampunk de Shaneliae V0l8Personnalisation de la fiche Steampunk de Shaneliae GzdQlGO
    Personnalisation de la fiche Steampunk de Shaneliae 1465961928-sans-titre-15
    Personnalisation de la fiche Steampunk de Shaneliae 189449RoseElen
    Personnalisation de la fiche Steampunk de Shaneliae 1461692697-000
    Personnalisation de la fiche Steampunk de Shaneliae 160702090212814935




    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 14 Avr 2016 - 19:23

    Salut!

    Quand tu changes l'image, tu la change où exactement? Dans la partie "style" en haut? Ou directement dans la partie HTML en bas?

    Parce que la partie "style", cela sert à gérer le CSS. Or, disons que tu as une image de background pour la class "machin", si tu as plusieurs messages avec la class "machin", l'image de background dans le CSS va s'appliquer pour toutes les classes "machins" de la page.

    C'est la même chose que si tu avais mis la partie CSS directement dans ta feuille de CSS, les attributs et valeurs du CSS se seraient appliqués à tous les éléments avec la class "machin" du forum.

    Du coup, si tu veux que chaque groupe ait une image différente, tu vas devoir le changer dans la partie HTML. En effet, le CSS intégré dans le HTML est toujours "plus fort" que le CSS mis dans une feuille de CSS ou entre balises "style" au début d'un message (à moins d'utiliser un "!important").

    Cela veut dire que tu vas devoir repérer ce bout de code :
    Code:
    <div class="couverture_livre"><div class="page_livre">

    Et le remplacer par ceci :
    Code:
    <div class="couverture_livre" style="background-image: url('http://i63.tinypic.com/2rcr042.jpg');"><div class="page_livre">

    Puis, pour chaque groupe, tu vas pouvoir changer l'image à cet endroit là. Même que si tu fais ça, tu peux même enlever le background-image dans le CSS.

    Au final, cela te donne ce code :
    Code:
    <style>.couverture_livre {width: 300px; height: 500px; margin: auto; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; position: relative;} .couverture_livre:hover {transform: all; -webkit-transform: all; transition: 2s; -webkit-transition: 2s; z-index: 5;} .page_livre {color: #1F140B; font-family: courier new; text-align: justify; background-image: url('http://i65.tinypic.com/dyxgk2.jpg'); width: 300px; height: 500px; margin: auto; position: relative; display: block; opacity: 0; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; z-index: 1;} .page_livre:hover {opacity: 1; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s;} .tableau_steam {margin: auto;} .page_livre a{color: #6D2A0C !important; font-family: impact; transition: 1s; webkit-transition: 1s;} .page_livre a:hover{color: #D17923 !important; letter-spacing: 3px; text-shadow: 0px 0px 3px #1F140B;} .autre_cadre {font-family: courier new; text-align: left; width: 270px; height: 300px; overflow: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px; font-size: 14px;} .police_autre {font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: 15px;} .grand_cadre {border-radius: 10px; width: 270px; overflow: auto; margin: auto; background-color: rgba(255, 255, 255, 0.6); padding: 10px;} .petit_cadre{height: 10px; opacity: 0; overflow: auto; -webkit-transition: all 1s; transition: all 1s; margin: auto;} .cadre_cache:hover .petit_cadre{height: 180px; width: 270px; opacity:1;} .police_titres {font-family: 'Aldrich', sans-serif; font-size: 18px; font-weight: bold; display: block; text-align: center;} .info_importante {font-family: 'Impact'; color: #49270D; letter-spacing: 2px;}</style><link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css' />

    <div class="couverture_livre" style="background-image: url('http://i63.tinypic.com/2rcr042.jpg');"><div class="page_livre">
    <table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 10px 10px 10px;"><span class="police_autre">Nom</span> : Réponse

    <span class="info_importante">Information à mettre en évidence</span>

    <a href="LIEN DE L'URL">Titre de l'url</a>
    </div></td></tr></table>

    <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
    Sous-Groupes</span><div class="petit_cadre">

    • Sous-groupe 1
    • Sous-groupe 2
    • Sous-groupe 3
    • Sous-groupe 4

    </div></div></div>

    <a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©️Shaneliae | Never Utopia</a>

    </div></div>




    Edit : J'ai été trop tard, oups XD
    En même temps, nos solutions sont différentes et aussi bonne l'une que l'autre de ce que j'ai lu, alors choisi ce que tu préfères P'tit Loup Wink



    Elenthil
    Elenthil
    FémininAge : 36Messages : 2184

    Jeu 14 Avr 2016 - 19:32

    Ouf Onyx tu me rassures, j'ai eu peur de poster une bêtise affraid

    Sinon je préfère quand même ta solution qui demande moins de manipulation. Pour la mienne il faut à chaque fois changer deux bouts de code, ça reste moins pratique ^^

    Merci en tout cas j'ai appris quelque chose =)




    Merci Rozenbrez :lovebomb:
    Personnalisation de la fiche Steampunk de Shaneliae 472020userbarfanclubdelenthil
    Merci Shoki pour la signature et Nihil pour l'avatar :lovebomb:
    Personnalisation de la fiche Steampunk de Shaneliae I2j8



    Cadeaux




    Personnalisation de la fiche Steampunk de Shaneliae 1473781108-sans-titre-8 Personnalisation de la fiche Steampunk de Shaneliae V0l8Personnalisation de la fiche Steampunk de Shaneliae GzdQlGO
    Personnalisation de la fiche Steampunk de Shaneliae 1465961928-sans-titre-15
    Personnalisation de la fiche Steampunk de Shaneliae 189449RoseElen
    Personnalisation de la fiche Steampunk de Shaneliae 1461692697-000
    Personnalisation de la fiche Steampunk de Shaneliae 160702090212814935




    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Jeu 14 Avr 2016 - 19:50

    Ca marche ! Merci beaucoup à tous les deux, c'est parfait ^^



    Personnalisation de la fiche Steampunk de Shaneliae 30xivrd
    Contenu sponsorisé


      La date/heure actuelle est Mar 7 Mai 2024 - 13:10