Template Beez 3 - adapter logoheader sur écran smartphone

**Rajoz** · 17/11/2014, 12h52

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonjour Fabien,

"width : 100% height : auto" ne marche pas ici parce qu'il ne s'agit pas d'une image insérée par le html <img src="..."> mais par le css "background: url(...);".

Une méthode que j'ai déjà utilisée avec Beez3 c'est de mettre à la fin de personnal.css le code suivant :

Code:

#header {
	padding: 10px 10px 0 10px;
}
#header .logoheader {
	min-height: 0;
}
#header .logoheader,
#header .skiplinks,
#header .unseen,
#header #line {
	display: none;
	visibility: hidden;
}

Ce code va masquer tous les éléments du header de Beez3 sauf la position-1.
Dans cette position-1 tu peux créer un module de type Contenu personnalisé avec ton image de logo personnal2.png comme elle sera placée avec la balise <img> elle sera redimensionnée automatiquement comme les autres images du site.

Au fait, ton image fait 667 Ko, dans le zip attaché tu trouveras la même en jpg et surtout de 81 Ko (c'est toujours ça de gagné).

Amicalement,
Rajoz

Fichiers joints

personal2.zip (80,5 Ko, 140 affichage(s))

**carasse64** · 17/11/2014, 22h21

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Envoyé par Rajoz Voir le message

Bonjour Fabien,

"width : 100% height : auto" ne marche pas ici parce qu'il ne s'agit pas d'une image insérée par le html <img src="..."> mais par le css "background: url(...);".

Une méthode que j'ai déjà utilisée avec Beez3 c'est de mettre à la fin de personnal.css le code suivant :

Code:

#header {
	padding: 10px 10px 0 10px;
}
#header .logoheader {
	min-height: 0;
}
#header .logoheader,
#header .skiplinks,
#header .unseen,
#header #line {
	display: none;
	visibility: hidden;
}

Ce code va masquer tous les éléments du header de Beez3 sauf la position-1.
Dans cette position-1 tu peux créer un module de type Contenu personnalisé avec ton image de logo personnal2.png comme elle sera placée avec la balise <img> elle sera redimensionnée automatiquement comme les autres images du site.

Au fait, ton image fait 667 Ko, dans le zip attaché tu trouveras la même en jpg et surtout de 81 Ko (c'est toujours ça de gagné).

Amicalement,
Rajoz

Bonsoir Rajoz

Un grand merci pour ton aide. Je me doutais bien de l'explication concernant le css du background: url(...)...

Ta solution semble fonctionner à merveille !

Tu as vu le nom de mon site... Si tu souhaites un dossard pour venir courir ici au Pays Basque, fais-moi signe

Je profite de ton expertise pour te demander autre chose :
- une vidéo intégrée depuis Vimeo n'apparaît pas sur les mobiles alors que ceux hébergés chez Youtube apparaissent sans problème,
- également : comment faire en sorte que les vidéos qui apparaissent s'adaptent à la largeur de la page ?

Si besoin, j'ouvre un post dans une autre rubrique.

Merci encore.

Fabien

**manu93fr** · 17/11/2014, 23h25

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir,
si tu utilises un plugin comme allvideo, tu resoudras tes 2 problemes en meme temps

prends le temps de bien lire sa doc

**lefabdu51** · 18/11/2014, 09h15

Re : Template Beez 3 - adapter logoheader sur écran smartphone

le probleme de ton bandeau, c est que reduit à 400px de largeur, il est illisible.
met la a l echelle avec the gimp et tu verras de suite le soucis.
tu ferais mieux de creer un logo nommé personal3.png spécifique de 400px de large (en gardant juste le logo à gauche et le titre du site),
et ensuite dans la requete media: @media and max-width(480px)
tu insère la regle ci dessous :
.logoheader {
background: url(../images/personal/personal3.png) no-repeat right ;
min-height: xxx px ;/* xxx = la hauteur de ton entete */
}
si tu as deja fait des modifs sur cette regle css, modifies le contenu en conséquence ds la requete media.

cela serat largement mieux pour tes visiteurs et en optant pour le meme choix de couleurs, tu gardes l'unité graphique de ton site.

**carasse64** · 18/11/2014, 21h57

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir Rajoz

Suite à la manip que tu m'as indiqué et que j'ai fait sur mon site, j'ai voulu faire la même chose sur un autre site que je gère : http://www.dieteticienne-cotebasque.fr/

J'ai tenté la même "astuce" que tu m'as donné pour faire une bannière/header adaptable à l'écran d'un mobile mais après ça, mon menu n'apparaissait plus. A noter que ici le menu est horizontal alors que sur mon autre site pour lequel tu m'as aidé, il est vertical. Aurais-tu une solution?

Egalement, j'ai fait la mise à jour de Joomla ce qui m'a effacé les modifs .css que j'avais apporté.. aie !!! Dorénavant j'ai une colonne blanche à droite qui est très moche. Je voudrais la supprimer. Une idée ?

Les lignes de code à copier/coller que tu m'as donné sur ton précédent post étaient top. Si tu pouvais me donner les lignes à copier/coller dans le bon fichier (personal.css je suppose) pour mon nouveau problème, ça serait parfait !!!

Par avance merci.

Fabien

- - - Mise à jour - - -

Salut Manu

Je regarde ça en détail demain mais effectivement ça semble être une très bonne solution !

Merci

Fabien

**carasse64** · 18/11/2014, 22h00

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir Lefab

Pour l'instant je vais me satisfaire de la bannière qui apparaît sur les mobiles.

Je n'exclue pas de faire une version différente mais pas le temps pour le moment. J'ai un problème sur un autre site comme tu peux le voir dans mon autre post... Si d'ailleurs tu as une idée

Merci pour tes conseils.

Bonne soirée.

Fabien

**manu93fr** · 18/11/2014, 22h32

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir,
sur le 2eme site le menu disparait parce qu'il est DANS le header justement

tu peux faire exactement pareil mais tu devras créer 2 positions je pense
une pour l'image dans laquelle tu positionne un module personalisé avec l'image
une autre en dessous pour y positionner le menu

Par contre tu auras le meme soucis que sur ton site de course ... le texte de l'image sera ninuscule ...

**Rajoz** · 19/11/2014, 03h23

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir Fabien,

Suite à la manip que tu m'as indiqué et que j'ai fait sur mon site, j'ai voulu faire la même chose sur un autre site que je gère : http://www.dieteticienne-cotebasque.fr/

Le dicton du jour (de la nuit) : "Autre site, autre solution."

Sur ce site le menu est en position-1 dans le header. Si on ajoute le module avec le logo en position-1 comme dans la solution précédente, les deux modules se retrouvent en position-1 et l'un sur l'autre.
Je n'ai rien contre cette position (je parle de la position-1

) mais il va falloir adapter ça.

1) Modifier le personal.css du site

Ajouter à la fin :

Code:

/* ========== Mes modifications ========== */
/* suppression image de fond du logo (ligne 36) */
.logoheader {
    background: none;
}
/* position du module de menu en position-1 (ligne 56) */
#header ul.menu {
    top: 125px;
    z-index: 2;
}
/* ajout du module custom avec logo en position-1 */
#header .custom {
    position: absolute;
    top: 10px;
    margin: 0 10px;
    z-index: 1;
}

Notes :

Je suis parti du personal.css pris sur ce site (il est déjà modifié par rapport à celui d'origine de Beez3)
Ne pas ajouter le code que j'avais proposé pour l'autre site
Comme je n'aime pas avoir à chercher dans le code ce que j'ai modifié, je regroupe habituellement à la fin toutes mes modifications avec si besoin une référence à la ligne où se trouve le code initial.
Ici, par exemple, je préfère pour effacer l'image de fond mettre background: none; que d'aller modifier la ligne 36. C'est un peu plus lourd d'avoir deux fois background pour le même élément mais je trouve ça plus simple pour retrouver mes billes quand je dois revenir plus tard sur un site.

2) Créer un module de type contenu personnalisé

Le module doit être en position-1 (comme le menu) et contenir le code suivant :

Code HTML:

<img src="templates/beez3/images/personal/banniere_beez.png" alt="Lucie Darjo" />

Note : il faut utiliser un éditeur non wysiwyg (ex: CodeMirror) pour ne pas ajouter des <p></p>

+1 avec manu93fr, le texte devient illisible sur les petits écrans. Il faudrait créer un deuxième logo avec par exemple la fonction en dessous du nom pour être moins large et l'utiliser dans le @media pour les petits écrans.

Beez3 définit la largeur de la colonne du centre en fonction de l'existence ou pas de la colonne de droite, sans tenir compte de la colonne de gauche. Sur le site la largeur de la colonne du centre est réduite à 53% comme s'il y avait la colonne de droite ET la colonne de gauche.

Pour corriger, ajouter à la fin de personal.css :

Code:

/* largeur des articles quand colonne de droite seule (position.css ligne 159) */
#wrapper {
    width: 78%;
}

Si la colonne de droite passe sous les articles c'est que 78% est trop grand, le réduire jusqu'à ce que la colonne de droite revienne à sa place.

j'ai fait la mise à jour de Joomla ce qui m'a effacé les modifs .css que j'avais apporté.. aie !!!

Les solutions pour éviter les cactus (aie) :

sauvegarder avant et après les mises à jour et les modifs
tester les sauvegardes
travailler toujours avec une copie du template
et hop encore une petite sauvegarde pour la route !

Amicalement,
Rajoz

**carasse64** · 19/11/2014, 21h58

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir Rajoz

Tout d'abord encore un grand merci pour te conseils.

J'ai collé le code que tu m'as donné et créé le module pour y insérer la bannière.

Voici ce que je constate :
- sur un ordi "classique", le "bandeau" du site ne s'adapte pas à la largeur de l'écran. Quand je rétrécis la largeur de ma fenêtre, l'image ne s'adapte pas
- sur un mobile, l'image s'adapte par contre, j'ai un bandeau bleu foncé au-dessous et sur les côtés du bandeau. Berk....

Une idée chef?

Je suis tout à fait d'accord qu'il faudrait que je fasse un header spécial pour les mobiles... mais pas le temps pour le moment. Ce qui te prendrait 10 min à faire sur un site me prendrait 2 h !

Pour le problème de la colonne de droite, j'ai récupéré une sauvegarde des fichiers position.css et layout.css ce qui m'a permis de tout faire rentrer dans l'ordre.

Encore merci... et essaie de dormir la nuit

Des réponses à 3h du matin !!!!

A+

Fabien

**carasse64** · 19/11/2014, 22h00

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Salut Manu

Merci pour ton message. Tu avais effectivement raison pour le header.

Je suis les pistes données par Rajoz pour remédier à ça.

Je vais aussi me lancer dans l'extension dont tu m'as parlé pour les vidéos.

Bonne nuit.

Fabien

**carasse64** · 19/11/2014, 22h52

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Extension ajoutée. C'est au top !!!!
Tout comme je voulais !

Merci Manu

**Rajoz** · 20/11/2014, 14h06

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonjour Fabien,

Le dicton du jour : "Les navigateurs se suivent et ne se ressemblent pas".

- sur un ordi "classique", le "bandeau" du site ne s'adapte pas à la largeur de l'écran. Quand je rétrécis la largeur de ma fenêtre, l'image ne s'adapte pas

Sur Chrome ça marchait. Mais je n'avais pas vérifié avec IE et FF, sniffff !

- sur un mobile, l'image s'adapte par contre, j'ai un bandeau bleu foncé au-dessous et sur les côtés du bandeau. Berk....

On va essayer de corriger tout ça et de commencer à traiter l'aspect mobile.

Je reviens en arrière sur l'idée du module personnalisé car il est traité trop différemment entre les navigateurs quand il est associé au menu de Beez3 en position-1. On va utiliser le CSS3 qui adapte la taille de l'image du background : background-size : contain;

D'abord désactiver le module avec le logo.

Ensuite modifier personal.css, voilà le nouveau code à mettre à la fin du fichier à la place du précédent :

Code:

/* ========== Mes modifications ========== */
/* change image de fond du logo (ligne 36) */
#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}
/* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
}
/* largeur des articles quand colonne de droite seule (position.css ligne 159) */
#wrapper {
    width: 78%;
}
/* pour petits ecrans (maximum 480px) */
@media only screen and (max-width: 480px) {
    /* supprime espace au-dessus du logo */
    #all #header {
        padding-top: 0;
    }
    /* change image de fond du logo (ligne 427) */
    #header .logoheader {
        background-image: url(../images/personal/banniere_beez2.png);
    }
    /* positionne le menu mobile (a cause de firefox) */
    #header #mobile_select {
        margin-top: 17px;
    ]
}

Cette fois j'ai testé le code sur mon ordi avec IE 11, FF 31, Chrome 39, et sur mon smartphone avec Chrome et Android Internet. FF m'a causé qqs soucis à cause de la position du menu mobile en réduisant la largeur de la fenêtre, mais c'est maintenant corrigé.
A ton tour de tester...

L'image attachée est à mettre dans templates/beez3/images/personal/banniere_beez2.png. Cliquer sur l'image attachée pour l'agrandir et faire "Enregistrer l'image sous..." pour la copier sur ton PC.
L'image reste un peu trop grande (large de 640px pour un emplacement de 480px) mais je ne pouvais pas la réduire faute de connaître la police utilisée. J'ai juste joué sur la disposition du texte.

Amicalement,
Rajoz

Fichiers joints

**manu93fr** · 20/11/2014, 21h50

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Si ça c'est pas des soluces aux ptits oignons ....

**carasse64** · 21/11/2014, 19h49

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir Rajoz

Je continue mon apprentissage avec toi !!!

J'ai fait les modifs indiquées dans ton message.

Mon constat :
- la bannière s'adapte à mon écran. Yala !!!!
- disparition des vilaines grosses bandes bleues sur mon smartphone au niveau de la bannière
- j'ai rajouté un header perso pour les mobiles = plus lisible

Question bonus : Est-ce possible de faire en sorte que la bannière apparaisse sans marge blanche sur le mobile, c'est à dire qu'elle recouvre la totalité de la largeur de l'écran et qu'en bas elle soit collée au menu ?

Par contre (et oui je suis pinailleur) :
- sur le mobile, quand je clique sur "Afficher le menu", tout le menu n'apparaît pas. De plus, une fois ouvert, compliqué de le refermer. Crois-tu que c'est possible de faire apparaître un menu comme sur mon autre site (sans avoir à cliquer sur "Afficher le menu")?
- sur le mobile, en bas de page, les pieds de page avant étaient disposés les uns au dessous des autres. Maintenant, ils sont en "cascade". Possible de revenir à un affichage vertical plus "droit"?

Je radote mais encore un grand merci pour ton aide.

Sincèrement je suis épaté par l'aide que l'on peut trouver sur ce forum (et par toi en particulier). Ca fait plaisir un peu de solidarité !

Bonne soirée !

Fabien

- - - Mise à jour - - -

Le mot est faible !!!

C'est ma diététicienne qui est contente

Template Beez 3 - adapter logoheader sur écran smartphone

Template Beez 3 - adapter logoheader sur écran smartphone

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association