Integrer l'image des forums dans un code déjà modifié

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Integrer l'image des forums dans un code déjà modifié

Message par Hayari le Mar 5 Aoû 2014 - 17:10

Bonjour a toute et à tous ! Alors voilà. J'ai récupérer un code sur Never Utopia et je voudrais le modifier pour que l'image des sous forum apparaisse. ça ressemble actuellement à ça.

http://i.imgur.com/Sao47MU.png

J'ai essayer en plaçant l'image dans Forum ►Catégories et forums ►Modifier un forum ► adresse de l'image
Mais ça donne ça:
http://i.imgur.com/Fj7q0Tt.png

Ce n'est pas du tout ce que je voudrais et c'est à partir de là que ça me bloque.
Je pense qu'il faudrais le faire en apportant une modification via le template et css mais là je suis paumée >< Moi je voudrais qu'elle apparaisse de cette façon:

http://i.imgur.com/IVu1puc.png

Par la suite je voudrais qu'elle disparaisse au survol de la souris, mais encore faut-il qu'elle soit bien placée.

Qui pourrais m'aider s'il vous plait? Je vous remercie d'avance.




Index_box

Code:



Dernière édition par Hayari le Lun 11 Aoû 2014 - 12:52, édité 2 fois

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par [Nihil] le Mar 5 Aoû 2014 - 22:26

Bonsoir Hayari,

Si je comprends bien tu souhaiterais mettre une image à la place de la description. Au survol, cette image disparaitrait pour laisser apparaitre le texte ?

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par Hayari le Mar 5 Aoû 2014 - 22:36

Bonsoir ! Oui effectivement c'est ça !

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par [Nihil] le Mer 6 Aoû 2014 - 13:26

Pourrais tu fournir ton CSS (ou bien le lien de ton forum ?) ?

En attendant je te passe un code générique que j'utilise souvent. Tu peux le regarder ici.
Le HTML est à mettre à la place de ta description (: et le CSS... dans le CSS o/ (j'ai juste mis un couleur de fond au body dont tu n'as pas besoin)
Tu peux essayer de l'installer et l'adapter, mais sinon ne t'inquiète pas je t'aiderai (^_^)

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par Hayari le Mer 6 Aoû 2014 - 13:59

Re ,Merci pour ton aide !
Alors j'arrive pas du tout à l'adapter , je suis complémentent paumée ! J'ai du remettre le css originel ! le voila , c'est toute la partie qui concerne la mise ne forme des catégorie >< :

css:
Code:

merci d'avance


Dernière édition par Hayari le Mer 6 Aoû 2014 - 18:11, édité 1 fois

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par [Nihil] le Mer 6 Aoû 2014 - 15:06

Je te fais un premier jet normalement :
Code:
/* --------------------------------- CATEGORIES --------------------------------- */

.imgforum {
  border-radius: 100%;
  border: 2px solid #ffffff;
}

.bloc1 {
  background-color: #3D2A33;
  width: 500px;
  height: 150px;
  position: relative;
left: 3em;
  box-shadow: 2px 2px 15px black;
-moz-box-shadow: 2px 2px 15px black;
  -webkit-box-shadow: 2px 2px 15px black;
}


/*** FONDS GENERAUX ***/

/* Contenu de l'ensembre des forum */
.categorie {
  width: 700px;
  height: 200px;
  padding: 10px;
}

/* Fond des forum */
.sous-forum {
  width: 300px;
  height: 50px;
  overflow: auto;
  top: -10em;
}

/* Fond titre catégorie */
.cate_titre {
  width: 800px;
  margin: auto;
  padding: 5px;
  background-color: #3D2A33;
  box-shadow: 2px 2px 15px black;
-moz-box-shadow: 2px 2px 15px black;
  -webkit-box-shadow: 2px 2px 15px black;
}

/* Mise en forme nom de catégorie */
h2 {
  font-size: 20px;
  font-family: 'Carrois Gothic SC', sans-serif;
  color: #C2A7B4;
  text-align: center;
}




/*** MISE EN FORME DES FORUM ***/

/* Mise en forme du texte des titres de forum */
.forumlink {
  color: #A47B8E !important;
  font-family: 'Vampiro One', cursive;
  font-size: 25px !important;
  font-weight: none !important;
  position: relative;
  top: 0.5em;
  left: -2em;
  z-index: 1;
}

.forumlink:hover {
  color: #F1EBEE !important;
  text-decoration: none !important;
}

.forumlink a {
  font-size: 16px;
  width: 500px;
}

/* Mise en forme de la description */
.description {
  width: 400px;
  height: 90px;
  font-size: 11px;
  text-align: justify;
  color: #CBC0C6;
  background-color: #392F34;
  border: 2px solid #2D2227;
  border-radius: 5px;
  position: relative;
  top: 1em;
  left: 3em;
  padding: 15px;
}

/* Ajout descriptions*/

.description {
    height: 50px;
    overflow: hidden;
}

.description_illustration,
.description_content {
    position: absolute;
    top: 0; left: 0;
    right: 0; bottom: 0;
}

.description_content {
    overflow: auto;
    padding: 15px;
}

.description_illustration {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.description_illustration img {
    width: 100%;
}

.description .description_illustration {
    opacity: 0;
    visibility: hidden;
}

/* Fin ajout descriptions */

.imagedesc {
  position: relative;
  right: -6em;
  top: -2em;
-moz-transform:rotate(8deg);
  -webkit-transform:rotate(8deg);
  transform:rotate(8deg);
}




/*** SOUS-FORUM ***/

.lienssf {
  width: 490px;
  max-height: 15px;
  overflow: auto;
  background-color: #2C1D24;
  padding: 5px;
  position: relative;
}

.lienssf a {
  color: #A47B8E !important;
  text-decoration: none !important;
}

.lienssf a:hover {
  color: #CBC0C6 !important;
text-decoration : none !important;
}




/*** DERNIERS MESSAGES ***/

.last_mess {
  width: 120px;
  position: relative;
  left: 6em;
  top: 1.5em;
  background-color: #2C1D24;
  color: #C9AFBB;
  padding: 10px;
  font-size: 11px;
  border-radius: 5px;
}

.last_mess a {
  color: black !important;
  text-decoration: none !important;
}

.last_mess a:hover {
  color: #CAC9C7 !important;
text-decoration : none !important;
}


/*--------------------------------- FIN CATEGORIES --------------------------------- */

Au niveau du code dans la description :
Code:
<div class="description">
    <div class="description_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit magnam soluta ipsa error alias adipisci ullam earum rerum maiores necessitatibus sequi dolorem repellat quaerat eos odio asperiores animi distinctio aliquid! ipsum dolor sit amet, consectetur adipisicing elit. Labore quibusdam laudantium doloremque possimus necessitatibus facere deleniti laborum ratione assumenda veritatis culpa animi officiis vero eos nihil id dolorum molestias cupiditate.</div>
    <div class="description_illustration"><img src="http://placekitten.com/g/450/150" /></div>
</div>

Je l'ai pas testé car je peux pas là mais en théorie ça devrait aller (:
Si cela ne fonctionne pas, peut tu me prendre une screnshot du problème s'il te plait ?
Le mieux serait que s'il y a un problème tu donnes le lien du forum pour que je regarde directement ^___^

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par Hayari le Mer 6 Aoû 2014 - 15:17

J'ai installer les code, ... Mais rien ne ce passe o_o L'image apparaît tout simplement pas du tout Il n'y a pas de différence. Regarde:


Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par [Nihil] le Mer 6 Aoû 2014 - 17:12

J'suis bête j'avais fait une modification pour vérifier un truc et ça masquait par défaut l'image XDDD

Code:
        /* --------------------------------- CATEGORIES --------------------------------- */
       
        .imgforum {
          border-radius: 100%;
          border: 2px solid #ffffff;
        }
       
        .bloc1 {
          background-color: #3D2A33;
          width: 500px;
          height: 150px;
          position: relative;
        left: 3em;
          box-shadow: 2px 2px 15px black;
        -moz-box-shadow: 2px 2px 15px black;
          -webkit-box-shadow: 2px 2px 15px black;
        }
       
       
        /*** FONDS GENERAUX ***/
       
        /* Contenu de l'ensembre des forum */
        .categorie {
          width: 700px;
          height: 200px;
          padding: 10px;
        }
       
        /* Fond des forum */
        .sous-forum {
          width: 300px;
          height: 50px;
          overflow: auto;
          top: -10em;
        }
       
        /* Fond titre catégorie */
        .cate_titre {
          width: 800px;
          margin: auto;
          padding: 5px;
          background-color: #3D2A33;
          box-shadow: 2px 2px 15px black;
        -moz-box-shadow: 2px 2px 15px black;
          -webkit-box-shadow: 2px 2px 15px black;
        }
       
        /* Mise en forme nom de catégorie */
        h2 {
          font-size: 20px;
          font-family: 'Carrois Gothic SC', sans-serif;
          color: #C2A7B4;
          text-align: center;
        }
       
       
       
       
        /*** MISE EN FORME DES FORUM ***/
       
        /* Mise en forme du texte des titres de forum */
        .forumlink {
          color: #A47B8E !important;
          font-family: 'Vampiro One', cursive;
          font-size: 25px !important;
          font-weight: none !important;
          position: relative;
          top: 0.5em;
          left: -2em;
          z-index: 1;
        }
       
        .forumlink:hover {
          color: #F1EBEE !important;
          text-decoration: none !important;
        }
       
        .forumlink a {
          font-size: 16px;
          width: 500px;
        }
       
        /* Mise en forme de la description */
        .description {
          width: 400px;
          height: 90px;
          font-size: 11px;
          text-align: justify;
          color: #CBC0C6;
          background-color: #392F34;
          border: 2px solid #2D2227;
          border-radius: 5px;
          position: relative;
          top: 1em;
          left: 3em;
          padding: 15px;
        }
       
        /* Ajout descriptions*/
       
        .description {
            height: 50px;
            overflow: hidden;
        }
       
        .description_illustration,
        .description_content {
            position: absolute;
            top: 0; left: 0;
            right: 0; bottom: 0;
        }
       
        .description_content {
            overflow: auto;
            padding: 15px;
        }
       
        .description_illustration {
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -ms-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;
        }
       
        .description_illustration img {
            width: 100%;
        }
       
        .description:hover .description_illustration {
            opacity: 0;
            visibility: hidden;
        }
       
        /* Fin ajout descriptions */
       
        .imagedesc {
          position: relative;
          right: -6em;
          top: -2em;
        -moz-transform:rotate(8deg);
          -webkit-transform:rotate(8deg);
          transform:rotate(8deg);
        }
       
       
       
       
        /*** SOUS-FORUM ***/
       
        .lienssf {
          width: 490px;
          max-height: 15px;
          overflow: auto;
          background-color: #2C1D24;
          padding: 5px;
          position: relative;
        }
       
        .lienssf a {
          color: #A47B8E !important;
          text-decoration: none !important;
        }
       
        .lienssf a:hover {
          color: #CBC0C6 !important;
        text-decoration : none !important;
        }
       
       
       
       
        /*** DERNIERS MESSAGES ***/
       
        .last_mess {
          width: 120px;
          position: relative;
          left: 6em;
          top: 1.5em;
          background-color: #2C1D24;
          color: #C9AFBB;
          padding: 10px;
          font-size: 11px;
          border-radius: 5px;
        }
       
        .last_mess a {
          color: black !important;
          text-decoration: none !important;
        }
       
        .last_mess a:hover {
          color: #CAC9C7 !important;
        text-decoration : none !important;
        }
       
       
        /*--------------------------------- FIN CATEGORIES --------------------------------- */

Le nouveau CSS (:

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par Hayari le Mer 6 Aoû 2014 - 17:21

Un chaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat *-* *-* *-* Ha hum pardon ... *Toussote* XD
ça marche niquel, c'est tout a fait ce que je voulait , tu gère, vraiment. ~
As-tu encore un tout petit moment pour m'expliquer le tout, afin que je puisse comprendre cet effet? =)

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Integrer l'image des forums dans un code déjà modifié

Message par Hayari le Lun 11 Aoû 2014 - 12:51

Finalement j'ai étudier le code et je l'ai compris X) Merci encore pour ton aide ! J'ai remercier ton message precedent =) Sujet resolut !

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum