Images a la place des titre de categories

2 participants

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

Résolu Images a la place des titre de categories

Message par Tiburn Sam 28 Fév 2015 - 19:36

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 Wink



Dernière édition par Tiburn le Sam 28 Fév 2015 - 21:47, édité 1 fois
Tiburn

Tiburn
**

Masculin
Messages : 82
Inscrit(e) le : 09/08/2005

http://www.sports-ps4-hockey.com
Tiburn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images a la place des titre de categories

Message par MlleAlys Sam 28 Fév 2015 - 20:14

Bonjour,

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.
Entre 24h et 7 jours, il me semble qu'un juste milieu existe... ^^"



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" />
(c'est donc un titre en texte et une image qui n'est pas visible par défaut)

- 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*/
(je m'y connais moins dans cette version, vérifiez que ça s'affiche au bon endroit et pas ailleurs ^^")


Dernière édition par MlleAlys le Sam 28 Fév 2015 - 20:31, édité 1 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images a la place des titre de categories

Message par Tiburn Sam 28 Fév 2015 - 20:19

Merci de ta réponse je vais tester cela Wink

Ma version est phpbb3
Tiburn

Tiburn
**

Masculin
Messages : 82
Inscrit(e) le : 09/08/2005

http://www.sports-ps4-hockey.com
Tiburn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images a la place des titre de categories

Message par MlleAlys Sam 28 Fév 2015 - 20:25

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 Wink
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images a la place des titre de categories

Message par Tiburn Sam 28 Fév 2015 - 20:25

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
Tiburn

Tiburn
**

Masculin
Messages : 82
Inscrit(e) le : 09/08/2005

http://www.sports-ps4-hockey.com
Tiburn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images a la place des titre de categories

Message par MlleAlys Sam 28 Fév 2015 - 20:38

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 ? ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images a la place des titre de categories

Message par Tiburn Sam 28 Fév 2015 - 21:01

Oui désolé j avais pas remarqué qu il manquait ce symbole "{" au début et a la fin de votre code Wink

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*/
}
Tiburn

Tiburn
**

Masculin
Messages : 82
Inscrit(e) le : 09/08/2005

http://www.sports-ps4-hockey.com
Tiburn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images a la place des titre de categories

Message par MlleAlys Sam 28 Fév 2015 - 21:40

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 :
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

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images a la place des titre de categories

Message par Tiburn Sam 28 Fév 2015 - 21:46

YESSSSS!!!!! Enfin Wink

Merci BEAUCOUP !! Sujet reglé Wink

Je vous en dois une hihi Razz

Merci MlleAlys votre support est super.
Tiburn

Tiburn
**

Masculin
Messages : 82
Inscrit(e) le : 09/08/2005

http://www.sports-ps4-hockey.com
Tiburn a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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