Modifier le titre des catégorie sur la version mobile

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

Résolu Modifier le titre des catégorie sur la version mobile

Message par horusbk le Ven 12 Juin 2015 - 12:10

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Images pour titres des catégories
Lien du forum : http://themazerunner-forum.fr/

Description du problème

Bonjour,

Mon problème est apparu depuis l'installation d'images en guise de titre pour mes catégories. Mon problème concerne la version mobile de mon forum.

Depuis l'installation de ces images, l'apparence des catégories sur la version mobile est :
- Catégorie 1
- Catégorie 2 ...
(voir capture d'écran).

Serait-il possible via du CSS de modifier le titre de ces catégories par un texte personnalisé ?
Il faudrait que la modification n'affecte pas la version standard.

Cordialement et merci,
1baptiste


Dernière édition par 1baptiste le Mer 17 Juin 2015 - 18:01, édité 1 fois

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par Neptunia le Ven 12 Juin 2015 - 17:10

Bonjour ^^

Spoiler:
Vos catégories n'ayant pas de nom, la version mobile ne peut pas les afficher.
L'utilisation de cette astuce devrait résoudre votre problème.

Astuce Placer une image comme titre de forum

Neptunia
+ Hyperactif +

Féminin
Messages : 10394
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par horusbk le Ven 12 Juin 2015 - 17:29

Bonjour Neptune- et merci pour ta réponse,

J'ai l'impression d'avoir correctement suivi les étapes de l'astuce, cependant, je n'obtiens pas l'apparence désirée. J'ai le retour des titres des catégories sur mon version classique au lieu de mes images. Voici où j'ai mis le code :

Spoiler:

Concernant le code CSS, j'ai mis tout ceci dans ma feuille de style :
Code:
/* ==IMAGE CATEGORIE + TITRE CATEGORIE VERSION MOBILE --- DEBUT== */
a.forumlink span, a.forumtitle span { display: none; }
a.forumlink img, a.forumtitle img { display: inline!important; }
a.cattitle span, .secondarytitle h2 span, .table-title h2 span, .maintitle h2 span, .page-title h2 span { display: none; }
a.cattitle img, .secondarytitle h2 img, .table-title h2 img, .maintitle h2 img, .page-title h2 img { display: inline!important; }
/* ==IMAGE CATEGORIE + TITRE CATEGORIE VERSION MOBILE --- FIN== */

Cordialement,
1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par Neptunia le Ven 12 Juin 2015 - 17:41

Du coup j'ai l'impression que l'astuce n'est pas compatible avec la version mobile. Le nom de catégorie étant considéré comme invalide, la version mobile remplace par un titre "standard"

Désolé de ne pouvoir aider davantage.

Neptunia
+ Hyperactif +

Féminin
Messages : 10394
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par R-max le Ven 12 Juin 2015 - 19:03

bonjour ,c'est marrant car le titre et l'image de la corbeille et présente en version mobile...
la corbeille et t'elle une categorie !!!!

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par horusbk le Ven 12 Juin 2015 - 19:09

Bonsoir R-Max,

Le cas de la corbeille est un peu particulier, en effet, ce n'est pas à proprement parlé une catégorie. Il a fallu passer un Java Script afin de modifier le titre par une image.

Le sujet en question est ici : http://forum.forumactif.com/t378860-remplacer-le-titre-de-la-categorie-corbeille-par-une-image

Cordialement,
1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par R-max le Ven 12 Juin 2015 - 19:18

ok ,tu peut faire un test avec un 2em js de milouze14 en modifiant le titre(corbeille par un autre titre) et le lien image pour voir si ça fonctionnerez ,ensuite il suffirer de combiné les js en 1 ,avec tous tes titres et liens image.

et d'appliqué une résolution pour adapter la taille au mobile!
cdl,

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par horusbk le Ven 12 Juin 2015 - 19:20

Bonjour R-Max,

C'est la seule chose que je ne sais pas faire :
et d'appliqué une résolution pour adapter la taille au mobile!

EDIT: Bizarre scratch cela marche pour la corbeille mais pas pour les autres catégories.
Voici le JS :
Code:
$(function(){
$('h2:contains("Se Souvenir")').replaceWith('<center><img src="http://i18.servimg.com/u/f18/19/03/94/82/se_sou10.png"/></center>');
})

$('h2:contains("L'Adaptation Cinéma")').replaceWith('<center><img src="http://i18.servimg.com/u/f18/19/03/94/82/adapta10.png"/> </center>');})


$(function(){
$('h2:contains("L'Epreuve  "Les Livres"")').replaceWith('<center><img src="http://i18.servimg.com/u/f18/19/03/94/82/epreuv10.png"/></center>');})


$(function(){
$('h2:contains("Le Bloc")').replaceWith('<center><img src="http://i18.servimg.com/u/f18/19/03/94/82/bloc10.png"/></center>');})


$(function(){
$('h2:contains("Corbeille")').replaceWith('<center><img src="https://www.filepicker.io/api/file/2EeA7jEFTHiX6gYmiBFt+corbeille.png"/></center>');})

Cordialement,
1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par R-max le Ven 12 Juin 2015 - 19:46

edit , je vient de voir tes script , il y a des erreurs dedans , et ne faut t'il pas mettre quelques chose entre 2 script !!!!!

re , tu peut tenter en ajoutant une class a tes liens images ,

ex >>
Code:
<img class="img_mobil" src="lien de l'image/>
et >>
Code:
img_mobil{background-size:100%auto;}

je ne sait pas si tu impose un target avec une redirection sur ces img !!!
sinon >>
Code:
<a href img class="img_mobil" src="lien de l'image"/>url de l'adresse</a>

je ne suis pas persuadé du résulta , je ne peut pas tester !

cdl,

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par horusbk le Ven 12 Juin 2015 - 19:55

Coucou R-Max,

Malheureusement ça ne marche pas.
Est-ce que l'on pourrait commencer par mettre les images des catégories en version classique et juste du texte en version mobile ?

Cordialement,
1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par R-max le Ven 12 Juin 2015 - 19:57

je ne sais pas !!

je t'avait dis de faire un essais avec une image pas plusieurs ,et ensuite si ça fonctionné de passé a un js complet , a tu essayer comme ceci !

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par horusbk le Ven 12 Juin 2015 - 19:59

Oui j'ai essayé ceci et ça fonctionne pour une seule image.
C'est en mettant plusieurs et le code pour la version mobile que ça ne fonctionne plus.

Cordialement,
1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par R-max le Ven 12 Juin 2015 - 20:03

c'est deja un début , pour couplé le js il va falloir un bon codeur ,perso en js ,je me traîne

je passe la main !

cdl,

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le titre des catégorie sur la version mobile

Message par horusbk le Sam 13 Juin 2015 - 7:28

Bonjour^^
J'ai réfléchis à mon problème pendant la nuit et j'ai trouvé pourquoi les images ne s'affichaient pas. En effet, j'avais une erreur de montage dans mon java script. De plus, le JS ne peut pas prendre en compte des titres du genre "L'Adaptation Cinéma". A cause de l'apostrophe après le "L".

Avec les modifications apportées par ce java script je réussi donc à avoir :
Right Une image pour les titres de mes catégories en version classique.
Right Le titre des mes catégories en version mobile.

Cependant, je n'arrive toujours pas à avoir :
Right Les titres des catégories de la version mobile remplacée par mes images.
Right Des images redimensionner pour la résolution en version mobile.

en effet, le script ne fonctionne plus quand j'ai essayé de mettre le code ci-dessous dans mon JS. Rien ne se passe non plus quand ce code est placé dans la feuille de style CSS. Sachant que j'ai donné une class à mes images :

Code:
<img class="img_mobil" src="lien de l'image/>

Code:
img_mobil{background-size:100%auto;}

Afin de poursuivre correctement l'entraide de ce sujet, je vous passe mon java script fonctionnel :

Code:
$(function(){$(function(){$('h2:contains("Se Souvenir")').replaceWith('<center><img  class="img_mobil" src="http://i18.servimg.com/u/f18/19/03/94/82/se_sou10.png"/></center>');$('h2:contains("L Adaptation Cinéma")').replaceWith('<center><img  class="img_mobil" src="http://i18.servimg.com/u/f18/19/03/94/82/adapta10.png"/> </center>');$('h2:contains("L Epreuve Les Livres")').replaceWith('<center><img  class="img_mobil" src="http://i18.servimg.com/u/f18/19/03/94/82/epreuv10.png"/></center>');$('h2:contains("Le Bloc")').replaceWith('<center><img  class="img_mobil" src="http://i18.servimg.com/u/f18/19/03/94/82/bloc10.png"/></center>');$('h2:contains("Corbeille")').replaceWith('<center><img  class="img_mobil" src="https://www.filepicker.io/api/file/2EeA7jEFTHiX6gYmiBFt+corbeille.png"/></center>')})});

Cordialement et bon weekend à tous,
1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk 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