Forum - GuppY 5.0 - Vos questions - Pb affichage 2014skin07v5

Nombre de membres 34 membres
Connectés : ( personne )
Snif !!!
 

actif  Sujet n° 405

le 18/11/2015 @ 04:16
par CycloFleurbaix

CycloFleurbaix



Bonjour Je teste guppy 5.01 avec skin 2014skin07v5 un peu modifié (j’ai mis un gif animé à la place de la photo du haut et la couleur de la police). Mon site de test :  jeanmichel.paprzycki.free.fr Mon problème est que l’affiche du haut et bas n’est pas constant. Par exemple sur mes pc portables (XP,7) avec Firefox et chrome pas de problème mais sous IE8 j’ai un grand rectangle en haut l’affichage commence avec la barre de menus. Sur IPAD et IPHONE, je n’ai ni le haut ni le bas alors que sur tablette samsung c’est ok. J’avoue ne pas comprendre le problème. Merci pour votre aide.
Site web CycloFleurbaix
Poster une réponse Haut  

Réponse n° 1
--------
le 18/11/2015 @ 11:01
par JeanDenis

JeanDenis



Bonsoir,

Sabine, je me permets d'avancer des éléments de réponses...s

@CycloFleurbaix, IE8 est très largement dépassé, il vaudrait mieux ne pas en tenir compte... et passer au minimum à IE11, voire EDGE pour win7...
En tout état de cause, tu peux quand même essayer de voir ici : désactiver l'affichage éventuel de compatibilité http://windows.microsoft.com/fr-fr/internet-explorer/use-compatibility-view#ie=ie-8

Sinon, en ce qui concerne les tablettes et smartphones, il faut travailler la mise en place des boîtes dans config boite mobile et config accueil mobile
Et pour affiner l'affichage pour les couleurs et autres suivant les capacités de chacun allez voir dans config style mobstyle.css (le volet RD mobile)
Voir ici : http://ghc.freeguppy.org/articles.php?lng=fr&pg=557&mnuid=463&tconfig=0
dans le menu de gauche vers le bas la partie Tuto config mobile

Cordialement,
Jean-Denis
Site web JeanDenis
Poster une réponse Haut  
Réponse n° 2
--------
le 18/11/2015 @ 12:41
par CycloFleurbaix

CycloFleurbaix



Bonsoir
1) j'ai mis et retirer la compatibilité sous IE8 rien ne change. Par contre mon site de production en guppy 4.6.11 fonctionne partout y compris ipad iphone
2) j'ai testé en mettant no_skin dans guppy le problème existe toujours sous IE.
3) je me demande si ce n'est pas guppy 5.01 qui génère le pb d'affichage.

Si tu as des idées.......

Cordialement
Site web CycloFleurbaix
Poster une réponse Haut  
Réponse n° 3
--------
le 18/11/2015 @ 15:51
par JeanDenis

JeanDenis



Re,

Que te dire ?...
J'ai vu ton site en production
http://cycloclubdefleurbaix.free.fr/
et la navigation sur un smartphone s'effectue en zig-zag d... ce n'est pas très agréable, sans parler d'images type 1275x1755px qui débordent largement même sur un ordinateur y...
L'option de développement prise par la GuppY Team a été de s'orienter vers une "double interface" :
Classique pour les ordinateurs et tablettes et une nouvelle interface "mobile friendly" pour les smartphones afin de rendre la navigation sur ceux-ci plus simple sans forcément y proposer tout le contenu du site web.

Je te renvoie aux divers documents publiés sur Freeguppy et ceux dont je t'ai passé le lien, lis-les...

Vérifie des sites qui ont adapté leur interface mobile (freeguppy bien sûr, mais de très nombreux autres...) et tu verras que GuppY 5.01.xx est tout à fait fonctionnel. C'est vrai qu'il faut y passer un peu de temps, surtout si la skin doit être complètement revue... et là ce sont les compétences de Sabine qui seront utiles e...
A toi de voir...
Mais ton site en version 4.6.11 risque, lui, à plus ou moins long terme de ne plus être fonctionnel.

Cordialement,
Jean-Denis
Site web JeanDenis
Poster une réponse Haut  
Réponse n° 4
--------
le 18/11/2015 @ 17:25
par Cyclofleurbaix

Anonyme

visiteur

Merci pour ton éclairage. Je vais continuer, ma crainte est que mon site ne s'affiche pas correctement au moins sur les pc.Cordialement 
Poster une réponse Haut  
Réponse n° 5
--------
le 26/11/2015 @ 12:41
par cyclofleurbaix

Anonyme

visiteur

Bonsoir

Est ce que 2014skin07v5 fonctionne bien avec guppy 5.01?
Après avoir lu les tutos j'ai modifié config_boite et accueil pour "mob" et j'ai allégé l'affichage pour mobile.
Sur ipad, j'ai un décalage des boites de  gauches et le titre de la boite est également décalé. cf copie ecran


Je ne sais pas ce qu'il faut modifier pour corriger le tir....
Merci pour votre aide.
Poster une réponse Haut  
Réponse n° 6
--------
le 27/11/2015 @ 18:38
par Sabine

Sabine



Bonjour
Quelle est l'adresse du site ?
Sabine
Site web Sabine
Poster une réponse Haut  
Réponse n° 7
--------
le 28/11/2015 @ 08:31
par JeanDenis

JeanDenis



Bonjour à tous,

Sabine, je me permets des tentatives de réponses mais c'est à prendre avec des pincettes, je ne suis pas sûr de l'orthodoxie de ces codes...s
L'adresse du site test de cyclofleurbaix est la suivante, il l'avait signalé plus haut dans ce fil... http://jeanmichel.paprzycki.free.fr/

Alors voilà, dans la skin de Sabine, des éléments sont fixés (le bouton contact et les icônes RSS et réseaux sociaux) du coup dans l'affichage mobile, ils se retrouvent figés...
J'ai essayé plusieurs solutions pour tenter d'améliorer l'affichage Mob.
Comme la skin de Sabine n'est pas compatible avec l'actuel config look, j'ai fait des modifications dans style.css et j'ai ajouté des règles dans styleplus.css
Je n'y suis pas arrivé autrement...

¤ Dans styleplus.css, afin que les images de fond occupent toute la largeur, les titres seront donc centrés
Tu peux essayer ceci, c'est sans danger et cela fonctionne...
 
Code : css
.tblbox {  /* Corps */
background: url(img/latbas.png) no-repeat bottom, url(img/latcentre.png) repeat-y;
background-size: 100% 100%;
}
#LeftBoxes .titrebox, #RightBoxes .titrebox, #BlogLeftBoxes .titrebox, #BlogRightBoxes .titrebox
{
background: url(img/lathaut.png) no-repeat;
background-size: 100% 100%;
}
 
¤ Par contre, c'est là où je suis moins sûr, donc fais une copie de style.css ou sois sûr de pouvoir revenir en arrière.
Tu cherches la partie à partir de la ligne 322
 
Code : css
div.menuIcons.MIT0 li.menu_contact {
position: absolute;
top: 212px;
left: 80px;
}
div.menuIcons.MIT0 li.menu_contact a span, div.menuIcons.MIT0 li.menu_contact a span.current, div.menuIcons.MIT0 li.menu_contact a:hover span
{
color: #fff;
background: transparent;
}
 
et tu transformes ainsi
 
Code : css
@media screen and (min-width: 800px), screen and (min-device-width: 800px) {
div.menuIcons.MIT0 li.menu_contact
{
position: absolute;
top: 212px;
left: 80px;
}
div.menuIcons.MIT0 li.menu_contact a span, div.menuIcons.MIT0 li.menu_contact a span.current, div.menuIcons.MIT0 li.menu_contact a:hover span
{
color: #fff;
background: transparent;
}
}
 
Puis tu cherches la partie (aux environs de la ligne 460...)
 
Code : css
.boxnet {
width: 100%;
margin: auto;
text-align: center;
background-color: transparent;
}
#TopBoxes .boxnet
{ /*reseaux sociaux dans entete*/
position: absolute;
top: 150px;
left: 80px;
}
 
et tu transformes ainsi
 
Code : css
.boxnet {
width: 100%;
margin: auto;
text-align: center;
background-color: #404040;
}
@media screen and (min-width: 800px), screen and (min-device-width: 800px)
{
#TopBoxes .boxnet
{ /*reseaux sociaux dans entete*/
position: absolute;
top: 150px;
left: 80px;
}
}
 
J'ai mis #404040 en background-color pour que tu puisses voir les icônes.
Si cela ne va pas, supprime ces ajouts.

Il y aura encore certainement d'autres réglages à faire...

Mille excuses pour ce bien trop long message y... mais comment faire autrement  d ? Sabine ou Papinou ou un autre spécialiste des skins saurait sans doute améliorer le code.

Cordialement,
Jean-Denis
Rectifié par JeanDenis le 28/11/2015 @ 08:33
Site web JeanDenis
Poster une réponse Haut  
Réponse n° 8
--------
le 28/11/2015 @ 09:36
par Sabine

Sabine



Bonjour,

Merci Jean-Denis pour ta réponse. Ça semble correct.

Mes skins ne sont plus adaptées, surtout celles qui ont des aspects figés comme celle-ci.

Il est devenu difficile (pour moi) de faire des skins qui aient un peu d'originalité tout en ayant suffisamment de souplesse pour s'adapter à tous les contenus.

Sabine
Site web Sabine
Poster une réponse Haut  
Réponse n° 9
--------
le 28/11/2015 @ 11:41
par JeanDenis

JeanDenis



Re...
Merci Sabine, de ton expertise.e

Je ne pense pas que la nouvelle organisation empêche de créer des skins originales comme les tiennes...
Peut-être faut-il créer une skin "de base" avec les polices, les couleurs... souhaitées... tout ce qu'il est possible de gérer avec le puissant outil qu'est devenu config look.
Puis, et c'est là que tout ton art irremplaçable s'exercera, dans styleplus.css, tu pourras y mettre tous les aménagements que tu souhaites en les réservant par exemple aux définitions supérieures à 800 (comme j'ai essayé de le faire). Les autres aménagements pour mobile se feront de la même manière dans mobstyle.css.

A ce propos,
Pour l'exemple ci-dessus, il est possible de supprimer les lignes de code citées dans style.css et de copier tous les aménagement dans styleplus.css, c'est peut-être plus cohérent ?

NB : une petite erreur de ma part, il vaut mieux ceci :
 
Code : css
.tblbox {  /* Corps */
background: url(img/latbas.png) no-repeat bottom, url(img/latcentre.png) repeat-y;
background-size: 100%;
}
 
que ce que j'avais proposé, c'est mieux, même si ce n'est pas parfait. s

Amicalement,
Jean-Denis
Site web JeanDenis
Poster une réponse Haut  
Réponse n° 10
--------
le 29/11/2015 @ 13:19
par cyclofleurbaix

Anonyme

visiteur

Bonsoir,

Merci à Sabine pour la skin magnifique à l'origine et que je peux adapter à mon club.
Merci à Jean-Denis pour les modifications qui améliorent sensiblement l'affichage sur ipad.
Deux questions:
1) faut-il également faire des modifications dans le style " RD mobile"?
2)Que dois-je regarder pour choisir une skin v5 fonctionnant parfaitement avec les Mobiles (si jamais je ne m'en sors pas avec cette superbe skin).

Bonne soiréee
Poster une réponse Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum  



Vous êtes ici :   Accueil » Forum » GuppY 5.0 » Vos questions » Pb affichage 2014skin07v5