Integrer l'image des forums dans un code déjà modifié
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Integrer l'image des forums dans un code déjà modifié
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.
https://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:
https://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:
https://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
https://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:
https://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:
https://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
Re: Integrer l'image des forums dans un code déjà modifié
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 ?
Si je comprends bien tu souhaiterais mettre une image à la place de la description. Au survol, cette image disparaitrait pour laisser apparaitre le texte ?
Re: Integrer l'image des forums dans un code déjà modifié
Bonsoir ! Oui effectivement c'est ça !
Re: Integrer l'image des forums dans un code déjà modifié
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 (^_^)
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 (^_^)
Re: Integrer l'image des forums dans un code déjà modifié
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:
merci d'avance
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
Re: Integrer l'image des forums dans un code déjà modifié
Je te fais un premier jet normalement :
Au niveau du code dans la description :
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 ^___^
- 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 ^___^
Re: Integrer l'image des forums dans un code déjà modifié
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:
Re: Integrer l'image des forums dans un code déjà modifié
J'suis bête j'avais fait une modification pour vérifier un truc et ça masquait par défaut l'image XDDD
Le nouveau CSS (:
- 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 (:
Re: Integrer l'image des forums dans un code déjà modifié
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? =)
ç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? =)
Re: Integrer l'image des forums dans un code déjà modifié
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 !
Sujets similaires
» Template déjà modifié, système de j'aime
» Mise en forme des catégories avec un template déjà modifié
» Modifié l'affichage utilisant les balises BBCODE [code][/code]
» Modifié la description des forums
» code intégration modifié
» Mise en forme des catégories avec un template déjà modifié
» Modifié l'affichage utilisant les balises BBCODE [code][/code]
» Modifié la description des forums
» code intégration modifié
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum