Images a la place des titre de categories
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
Images a la place des titre de categories
Bonjour, j'ai lu et testé ce tuto et rien n y fait.
https://forum.forumactif.com/t346338-placer-une-image-comme-titre-de-forum
J'ai aussi remarqué que dans la vidéo et dans les code proposé, il y a des divergences, alors je ne m y trouve plus.
J'ai des image a la place des titre de catégorie et je n arrive pas a faire afficher que le titre dans le file d arianne.
Merci d'avance
P.S. Attendez-vous a des "UP" régulièrement...vous ne me verrouillerai plus mes sujet sous prétexte de ne plus avoir de mes nouvelles quand je suis seulement PATIENT! Carrément insultant de se faire fermer un topic non résolu. Faites attention a vos membres payeurs. Car dans la catégorie "Quoi faire pour perdre de l'argent" vous êtes pas si mal
https://forum.forumactif.com/t346338-placer-une-image-comme-titre-de-forum
J'ai aussi remarqué que dans la vidéo et dans les code proposé, il y a des divergences, alors je ne m y trouve plus.
J'ai des image a la place des titre de catégorie et je n arrive pas a faire afficher que le titre dans le file d arianne.
Merci d'avance
P.S. Attendez-vous a des "UP" régulièrement...vous ne me verrouillerai plus mes sujet sous prétexte de ne plus avoir de mes nouvelles quand je suis seulement PATIENT! Carrément insultant de se faire fermer un topic non résolu. Faites attention a vos membres payeurs. Car dans la catégorie "Quoi faire pour perdre de l'argent" vous êtes pas si mal
Dernière édition par Tiburn le Sam 28 Fév 2015 - 21:47, édité 1 fois
Re: Images a la place des titre de categories
Bonjour,
Concernant votre titre en image, je vais essayer de remettre les codes avec des explications différentes, mais le problème vient peut être de la version de votre forum ?
- Le code suivant est celui qui doit être placé dans le titre de la catégorie :
- Puis dans votre css, vous devez mettre le code suivant :
Entre 24h et 7 jours, il me semble qu'un juste milieu existe... ^^"Règles générales et charte du forum a écrit:› Sachez vous montrer patient, un UP (message visant à remonter votre sujet) n'est permis qu'après 24 heures sans réponse.
› Un sujet sans relance de l'auteur pendant 7 jours sera déplacé à la Corbeille. Vous disposerez de 15 jours pour le récupérer auprès d'un membre de l'équipe.
Concernant votre titre en image, je vais essayer de remettre les codes avec des explications différentes, mais le problème vient peut être de la version de votre forum ?
- Le code suivant est celui qui doit être placé dans le titre de la catégorie :
- Code:
<span>TITRE TEXTE</span><img style="display:none" src="URL DE L'IMAGE" />
- Puis dans votre css, vous devez mettre le code suivant :
- Code:
/*catégories en image*/
.table-title h2 span {display:none;} /*on n'affiche pas le texte dans le titre de la catégorie*/
.table-title h2 img {display:inline!important;} /*on rend l'image visible dans le titre de la catégorie*/
Dernière édition par MlleAlys le Sam 28 Fév 2015 - 20:31, édité 1 fois
MlleAlys- Membre actif
- Messages : 5747
Inscrit(e) le : 12/09/2012
Re: Images a la place des titre de categories
Merci de ta réponse je vais tester cela
Ma version est phpbb3
Ma version est phpbb3
Re: Images a la place des titre de categories
Pardon, je me corrige, j'ai re-regardé le tutoriel entre deux beugs de navigateur, et les codes doivent bien fonctionner pour toute version, donc Phpbb3 ou autre ça ne devait pas venir des codes eux même mais de leur installation
MlleAlys- Membre actif
- Messages : 5747
Inscrit(e) le : 12/09/2012
Re: Images a la place des titre de categories
Ok, voila je l'ai testé avec ma premiere catégorie qui se nomme "GamerZqc"
Avec vos codes, l'image ne s'affichent-pas.
Voici le lien de mon forum : http://gamerzqc.forumsgratuits.com/
La premiere catégorie est fait avec votre code. Merci
Avec vos codes, l'image ne s'affichent-pas.
Voici le lien de mon forum : http://gamerzqc.forumsgratuits.com/
La premiere catégorie est fait avec votre code. Merci
Re: Images a la place des titre de categories
Quand j'inspecte votre forum, je ne vois aucune trace du code css donné, donc il n'est pas pris en compte et c'est pour ça que ça ne fonctionne pas.
- soit il a été mal installé :
Vérifiez qu'il est bien dans affichage > couleurs > onglet feuille de style, copié/collé à la fin de la feuille et bien séparé des codes précédents, par un ou deux sauts de ligne par exemple
- soit il y a des erreurs dans votre feuille de style css qui font qu'il n'est pas correctement interprété...
Si vous ne voyez pas, pourriez vous fournir votre feuille de style svp ? ^^
- soit il a été mal installé :
Vérifiez qu'il est bien dans affichage > couleurs > onglet feuille de style, copié/collé à la fin de la feuille et bien séparé des codes précédents, par un ou deux sauts de ligne par exemple
- soit il y a des erreurs dans votre feuille de style css qui font qu'il n'est pas correctement interprété...
Si vous ne voyez pas, pourriez vous fournir votre feuille de style svp ? ^^
MlleAlys- Membre actif
- Messages : 5747
Inscrit(e) le : 12/09/2012
Re: Images a la place des titre de categories
Oui désolé j avais pas remarqué qu il manquait ce symbole "{" au début et a la fin de votre code
Maintenant l image s affiche bien mais le texte aussi loll
Voici ma feuille de style
Maintenant l image s affiche bien mais le texte aussi loll
Voici ma feuille de style
- Code:
.fa_avatar {
width: 25px;
height: 25px;
position: relative;
top: -3px;
margin-right: 5px;
border-radius: 3px;
margin-bottom: -10px;
}
#av_quickreply img {
left: 15px;
position: relative;
top: 35px;
}
#av_quickreply {
float: left;
position : absolute;
}
.sceditor-container iframe, .sceditor-container textarea {
background:url(http://gamerzqc.com/images/banners/LogoGamerZqc.png)no-repeat center!important;
}
div#fa_search {display:none!important;}
@charset 'utf-8';
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.2
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
color: black;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.accordion .slide > h2 b {
display: inline-block;
position: absolute;
top: 13%;
left: 10%;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
/****************************************** Dark */
.accordion {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
background: #353535;
background: -moz-linear-gradient(left, #353535 0%, #555555 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);
background: -o-linear-gradient(left, #353535 0%,#555555 100%);
background: -ms-linear-gradient(left, #353535 0%,#555555 100%);
background: linear-gradient(left, #353535 0%,#555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
background: #383838;
background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: linear-gradient(top, #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
/* centrer l'accordéon */
.accordion { margin: auto; }
#search-box{
visibility:hidden;
}
#search-box{
height:1px;
visibility:hidden;
}
.navbar ul{
border-color:#000000;
}
a span[style="color:#1C4288"] strong {
background:url(http://gamerzqc.com/images/forum/icon-lhgmqz.png) no-repeat;
padding-left:60px;
}
a span[style="color:#DB2A2A"] strong {
background:url(http://gamerzqc.com/images/forum/icon-tbhl.png) no-repeat;
padding-left:44px;
}
a span[style="color:#00C4FF"] strong {
background:url(http://gamerzqc.com/images/forum/icon-z.png) no-repeat;
padding-left:26px;
}
/*catégories en image*/{
.table-title h2 span {display:none;} /*on n'affiche pas le texte dans le titre de la catégorie*/
.table-title h2 img{display:inline!important;} /*on rend l'image visible dans le titre de la catégorie*/
}
Re: Images a la place des titre de categories
Non mon code est bon, il n'est juste pas présenté de la même manière ^^"
les parties entre /*....*/ sont des commentaires qui n'ont aucune incidence sur le code, ils permettent juste de s'y retrouver et d'expliquer, sans les commentaire et avec des retour à la ligne, mon code est ainsi :
Essayez ainsi :
les parties entre /*....*/ sont des commentaires qui n'ont aucune incidence sur le code, ils permettent juste de s'y retrouver et d'expliquer, sans les commentaire et avec des retour à la ligne, mon code est ainsi :
- Code:
.table-title h2 span {
display:none;
}
.table-title h2 img {
display:inline!important;
}
Essayez ainsi :
- Code:
.fa_avatar {
width: 25px;
height: 25px;
position: relative;
top: -3px;
margin-right: 5px;
border-radius: 3px;
margin-bottom: -10px;
}
#av_quickreply img {
left: 15px;
position: relative;
top: 35px;
}
#av_quickreply {
float: left;
position : absolute;
}
.sceditor-container iframe, .sceditor-container textarea {
background:url(http://gamerzqc.com/images/banners/LogoGamerZqc.png)no-repeat center!important;
}
div#fa_search {
display:none!important;
}
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.2
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
/****************************************** Core */
.accordion {
text-align: left;
font:'Helvetica Neue', Verdana, Arial, sans-serif
}
.accordion > ol {
position: relative;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none
}
.accordion .slide > h2 {
color: black;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.accordion .slide > h2 b {
display: inline-block;
position: absolute;
top: 13%;
left: 10%;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover {
cursor: pointer
}
.accordion .slide > div {
height: 100%;
position: absolute;
top: 0;
z-index: 10;
overflow: hidden;
background: white
}
.accordion noscript p {
padding: 10px;
margin: 0;
background: white
}
/****************************************** Dark */
.accordion {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 {
background: #030303;
text-shadow: 0 -1px 0 #030303;
line-height: 265%
}
.accordion .slide > h2 span {
background: #353535;
color: white
}
.accordion .slide > h2 b {
background: #353535;
color: #030303;
text-shadow: -1px 1px 0 #5b5b5b
}
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
background: #353535;
background: -moz-linear-gradient(left, #353535 0%, #555555 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #353535), color-stop(100%, #555555));
background: -webkit-linear-gradient(left, #353535 0%, #555555 100%);
background: -o-linear-gradient(left, #353535 0%, #555555 100%);
background: -ms-linear-gradient(left, #353535 0%, #555555 100%);
background: linear-gradient(left, #353535 0%, #555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#555555', GradientType=1);
}
.accordion .slide > h2.selected b {
background: #383838;
background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a3a3a), color-stop(100%, #363636));
background: -webkit-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -o-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: linear-gradient(top, #3a3a3a 0%, #363636 100%);
}
.accordion .slide > div {
background: #030303;
margin-left: 5px
}
/*************************************** Rounded */
.rounded, .rounded > ol {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px
}
.rounded .slide > h2 span {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px
}
/******************************************** IE */
.ie .slide > h2 b {
top: 42%;
left: 5%
}
.ie9 .slide > h2 {
filter: none;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top
}
.ie.accordion .slide > h2 b {
top: 44%
}
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover {
filter: none
}
/******************************************** FA */
.accordion figure .full {
width: 100%;
height: 100%;
}
.accordion h2 {
border: none;
}
/* centrer l'accordéon */
.accordion {
margin: auto;
}
#search-box {
visibility:hidden;
}
#search-box {
height:1px;
visibility:hidden;
}
.navbar ul {
border-color:#000000;
}
a span[style="color:#1C4288"] strong {
background:url(http://gamerzqc.com/images/forum/icon-lhgmqz.png) no-repeat;
padding-left:60px;
}
a span[style="color:#DB2A2A"] strong {
background:url(http://gamerzqc.com/images/forum/icon-tbhl.png) no-repeat;
padding-left:44px;
}
a span[style="color:#00C4FF"] strong {
background:url(http://gamerzqc.com/images/forum/icon-z.png) no-repeat;
padding-left:26px;
}
/*titres des catégories en image*/
.table-title h2 span {
display:none;
}
.table-title h2 img {
display:inline!important;
}
MlleAlys- Membre actif
- Messages : 5747
Inscrit(e) le : 12/09/2012
Re: Images a la place des titre de categories
YESSSSS!!!!! Enfin
Merci BEAUCOUP !! Sujet reglé
Je vous en dois une hihi
Merci MlleAlys votre support est super.
Merci BEAUCOUP !! Sujet reglé
Je vous en dois une hihi
Merci MlleAlys votre support est super.
Sujets similaires
» Changer place titre catégories et forums
» Catégorie en onglet avec titre des catégories imagés =p
» Insérer des images à la place du texte dans le header des catégories.
» Titre de catégories en images.
» Remplacer le titre des catégories par des images
» Catégorie en onglet avec titre des catégories imagés =p
» Insérer des images à la place du texte dans le header des catégories.
» Titre de catégories en images.
» Remplacer le titre des catégories par des images
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