THELIA Forum

Bonjour,

J'aimerai avoir de l'aide avec cette histoire de responsive design.
Sous Thelia 1, mon site était identique que ce soit sur portable que sur navigateur.
Les éléments étaient juste mis en ligne sur les iphone et téléphones à faible résolution et par paquet de 3 par ligne sur le navigateur d'un pc. (tout était géré avec les grid 1-12)

Sous Thelia 2 de base, il y a un joli logo Thelia sur le template basique lorsque la navigation se fait sur une résolution de 1024*768 et plus.
Lorsque le visionnage se fait sur un portable l'en tête HOME devient le nom du site donné et le logo n'est tout simplement plus là.

Avez vous des pistes pour que le logo présent dans layout.tpl h1 class="logo" soit visible même sur un écran de faible résolution ?

Merci de votre aide.

Edit : Le carrousel situé juste en dessous du logo est lui bien redimensionné et est fonctionnel. étrange ce Thelia2

Edit 2 : En utilisant Firebug et en réduisant la résolution horizontale je vois que d'un coup mon logo disparait et mon code devient grisé, Quel plugin fait cette modification de code et comment on peux le faire réagir différemment ?

Last edited by JuliaMad (24-04-2014 21:50:45)

AH mais merci Roadster 31,
Je regardais dans templates/backOffice/default/assets/less/header.less où il y avait déjà un .hidden-xs,
Cependant, il était toujours visible ce .hidden-xs dans mon firebug car il était dans un .less généré avant, le responsive dont tu me parle.

Merci d'avance je vais pouvoir avancer.

edit : Après un avoir jeter un petit oeil sur responsive-utilities.less je n'ai pas trouvé de .logo.
J'en ai bien un dans header.less, J'ai supprimé la ligne .hidden-xs; mais sans succès.
Mon image disparait lorsque le redimensionnement passe sous la barre des 768px (comme indiqué dans le lien sur CSS Bootstrap).

Au final mon CSS généré ça donne ça :

header .header .logo {
    display: block !important;
    margin-top: 0;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
@media (min-width: 992px) {
header .header .logo {
    float: left;
    width: 33.3333%;
}
}
trheader .header .logo {
    display: table-row !important;
}
thheader .header .logo, tdheader .header .logo {
    display: table-cell !important;
}
@media (max-width: 767px) {
header .header .logo {
    display: none !important;
}
trheader .header .logo {
    display: none !important;
}
thheader .header .logo, tdheader .header .logo {
    display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
header .header .logo.hidden-sm {
    display: none !important;
}
trheader .header .logo.hidden-sm {
    display: none !important;
}
thheader .header .logo.hidden-sm, tdheader .header .logo.hidden-sm {
    display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
header .header .logo.hidden-md {
    display: none !important;
}
trheader .header .logo.hidden-md {
    display: none !important;
}
thheader .header .logo.hidden-md, tdheader .header .logo.hidden-md {
    display: none !important;
}
}
@media (min-width: 1200px) {
header .header .logo.hidden-lg {
    display: none !important;
}
trheader .header .logo.hidden-lg {
    display: none !important;
}
thheader .header .logo.hidden-lg, tdheader .header .logo.hidden-lg {
    display: none !important;
}
}
header .header .logo a {
    text-decoration: none;
}

Si je remplace le display: none !important par un inline par exemple pour max-width : 767px (sous firebug) mon logo ne disparait pas lorsque je réduit la fenetre.
C'est empirique comme raisonnement mais j'arrive pas à comprendre pourquoi même avec le .hidden-xs enlevé mon logo disparait quand même.

Last edited by JuliaMad (25-04-2014 17:19:07)

Réponse rapide, merci. Il me manquait ce détail.

J'utilisais Crunch d'adobe pour modifier mes .less, mais rien pour les compiler....

Bon Weekend.

EDIT :

Après avoir fait mes tests, ça fonctionne merci.
J'ai eu aussi un problème le logo ne se redimensionnait pas.
J'ai rajouté à mon <img> la classe img-responsive ainsi qu'un style margin:auto et c'est parfait, mon logo est affiché même sur mobile et c'est mignon comme tout.
(Mon logo est en faite plutôt une bannière donc ça colle bien avec le carrousel et le reste en bas du site.)

Merci

Last edited by JuliaMad (26-04-2014 00:39:30)

J'ai un soucis : j'ai bien changer    {stylesheets file='assets/less/styles.less' filters="less"}
dans layout.tpl
j'ai également mis 1 à Configuration -> Variables et mettre "process_assets"

Malgré cela en / ou /index_dev le style n'est pas pris en compte (page sans css)

Roadster, que veux-tu dire par :

1) Tu utilises lessc, ou tout autre moyen de compiler les fichiers LESS pour régénérer le fichier style.css, utilisé de base par Thelia.

Merci je vais voir cela

En, 2.2, le compilateur a été changé pour résoudre ce problème.

Bonjour,

J'ai le même problème de compilation lessphp.
Je n'arrive pas à résoudre le problème.

De quoi parlez vous quand vous mentionnez la version 2.2 ?

Merci pour le lien !