image background responsive

[herbet]

Re : image background responsive

Il y a qd même des petits réglages à faire.
- ton image est trop lourde, pres de 1 mo, et pourrait être moins large. De plis, cela ralentit le chargement de la page.
ton image, dimensions : 4896 × 3264
l'image du site de demo de ton template : 1922 × 1081
Tu peux te baser sur ces dimensions. }

Voilà qui est fait !!

Ceci fait, dans custom.css :
cherche cette ligne et rajoute max-width: 100%;

J'ai suivi la consigne, mais ça ne change rien...

Ou au pire, tu rajoute une règle en dessous de .jsn-homepage #jsn-header-top:
.jsn-homepage #jsn-header-top img {max-width: 100%;}

Même chose pour un iPad et/ou une tablette:

*Landscape

@media only screen and (max-width: 1024px), (max-device-width: 1024px){
{}
}

* Portrait

@media only screen and (max-width: 768px), (max-device-width: 768px){
{}
}

Ce qui est étrange dans mon template, c'est que .jsn-homepage #jsn-header-top:
ne se trouve pas dans le fichier custom.css
Pour régler cela, il faut que j'ouvre en Codemirror un module nommé demo.custom.css pour y trouver tout ça.
Mais si je rentre {max-width: 100%;}
ma photo d'accueil est remplacée par un écran blanc...

Pour les règles que tu me donnes, si je les tapes dans custom.css il faut que je crée d'abord un .jsn-homepage #jsn-header-top ???

[lomart]

Re : image background responsive

Bonjour,

Je reformule la demande:
tu veux avoir une image d'illustration (templates/jsn_yoyo_pro/images/bg-header.jpg) qui occupe toute la surface de l'écran d'accueil avec un texte (cuisine amoureuse mais pas que) qui soit lisible en entier.

Pour cela, il faut:
1 - retoucher l'image actuelle pour supprimer le texte. Il est inutile de toucher aux css concernant l'image, peut être la justifier à gauche pour une question esthétique
2 - ajouter du code HTML avec le texte dans le bloc <div id="jsn-header-top"> ICI </div>
Si le template (index.php) n'a pas de position a cet endroit, le plus simple est de la créer en remplaçant ICI par <jdoc:include type="modules" name="header-text" style="none">
3- créer un module personnalisé en position "header-text" (le taper directement dans le champ position) avec le code HTML qui va bien pour afficher le texte

[herbet]

Re : image background responsive

Argh ma réponse n'était pas partie!
Bon, alors j'ai ajouté dans l'index php du template la ligne
un bloc
<div id="jsn-header-top">
<jdoc:include type="modules" name="header-text" style="none">
</div>
je ne sais pas si c'est incorrect, en tout cas ça ne marche pas
)

et j'ai créé un module custom mod. dans cette position.
Ce qui m'ennuie, c'est que visiblement je n'aurais pas la même police de caractère pour mon titre...
Bon enfin déjà si j'arrive à faire apparaître le truc je paie ma tournée virtuelle de bulle

[lomart]

Re : image background responsive

Bon enfin déjà si j'arrive à faire apparaître le truc je paie ma tournée virtuelle de bulle

Tu peux sortir les bouteilles !!

Il faut juste ajouté du code dans le module
avec ça:
<div style="text-align:center; padding-top:60px; font-size:72px; color:#FFF;">EXEMPLE</div>
j'arrive à ça:

Pour les polices, on peut arriver à un truc sympa avec les google font
Et en prime pour le référencement, c'est mieux d'avoir un vrai texte

[herbet]

Re : image background responsive

Si tu as réussi cela c'est que déjà la position header text a bien été enregistrée ou ça n'a rien à voir ??
De mon côté, c'est encore long =) le module ne s'affiche dans aucune des positions. Je creuse pour comprendre !

[lomart]

Re : image background responsive

Est-il bien publié sur toutes les pages dans l'onglet assignation des menus ?

[herbet]

Re : image background responsive

Est-il bien publié sur toutes les pages dans l'onglet assignation des menus ?

Oui. Mais ça ne change rien. Je pensais l'affecter uniquement au menu d'accueil, d'ailleurs.
j'ai tapé ce code dans l'éditeur html :
<div style="text-align: center; padding-top: 60px; font-size: 72px; color: #ca0554;">Cuisine amoureuse</div>
<p>&nbsp;</p>
voilà C'est la première fois que j'ai un module fantôme, mais bon, je débute lentement ))

[herbet]

Re : image background responsive


Voilà à quoi ça ressemble, au cas où j'aurais raté un truc vraiment énorme

[lomart]

Re : image background responsive

Non tout me semble bien
le nom header-text est bien orthographié partout pareil

Tu peux tenter de remplacer dans index.php
<jdoc:include type="modules" name="header-text" style="none">
par
<?php if($this->countModules('header-text')) : ?>
<jdoc:include type="modules" name="header-text" style="none">
<?php endif; ?>

pour s'assurer que le module est vu.

[herbet]

Re : image background responsive

<div id="jsn-header">
<?php
if ($this->helper->countPositions('mainmenu', 'toolbar') || $this->colorSelector) {
?>
<div id="jsn-header-top">
<?php if($this->countModules('header-text')) : ?>
<jdoc:include type="modules" name="header-text" style="none">
<?php endif; ?>
<?php
/*====== Show modules in position "header-top" ======*/
if ($jsnutils->countModules('header-top') > 0) {
?>
<div id="jsn-pos-header-top">
<jdoc:include type="modules" name="header-top" style="jsnmodule" />
</div>
<?php
}
voilà ce que donne mon index.php

[herbet]

Re : image background responsive

Non là je vois pas quoi faire. J'arrive à paramétrer l'affichage du module en sticky-right position. C'est à peu près tout :/
Mais sinon, écran noir.
PAr ailleurs, j'ai mis une police google font par defaut pour les titres du template. Si je veux que le texte l'adopte, il faut que je lui applique un style préexistant.
Mais dès que je fais ça, le module re-disparait....

- - - Mise à jour - - -

PS : merci de ta patience !

[lomart]

Re : image background responsive

C'est de ma faute, j'ai oublié de fermer la balise
<jdoc:include type="modules" name="header-text" style="none" />
Ajoute le slash en fin

[herbet]

Re : image background responsive

Ça marche !!!!!

super ! Merci !
Mais je me pose la question suivante : dans un post précédent, tu suggérais d'aligner l'image à gauche. J'ai donc entré
background-position : left
dans le css. ça n'a pas l'air de bouger.
Le plus simple, pour ne pas que le texte chevauche trop l'image, ne serait-il pas de définir une marge pour l'empêcher de déborder d'un côté ou de l'autre ? Je ne sais pas du tout si ce que je dis a du sens... mais sait-on jamais !!
Dans le module, j'ai centré le texte, pour qu'il ne se retrouve pas aligné à gauche... mais les deux solutions ont un côté un peu trop brutal...

[lomart]

Re : image background responsive

Il faut modifier le css comme cela pour aligner à gauche
.jsn-homepage #jsn-header-top { url("templates/jsn_yoyo_pro/images/bg-header.jpg") no-repeat fixed left top / cover #060511 }

Ensuite pour fignoler, on peut régler l'alignement selon la taille de l'écran avec des mediaqueries. On le conserve centré en grand écran

@media screen and (max-width:640px) {
  .jsn-homepage #jsn-header-top { 
    background-position: left top;
    font-size:48px;  /* pour conserver le texte sur une ligne */
  }
}

[herbet]

Re : image background responsive

Donc tout ce code est à caser dans le custom css ?
Mais le html il doit se mettre ailleurs non ?

Bon le module a re-disparu. Je crois que c'est lié au fait que je l'ai désactivé de "toutes les pages" pour l'affecter uniquement au menu d'accueil ?
Comme c'est un one page si je le laisse sur toutes les pages ça me casse l'architecture du site, visuellement