Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

réduire le header avec le templat ROME

Aller en bas

réduire le header avec le templat ROME

Message par caro87000 le Dim 23 Sep 2018 - 12:53

Bonjour à tous

J'ai navigué sur le forum pour trouver des réponses mais je n'y connais rien en codage...
j'ai crée mon site avec le design ROME, mais actuellement le header prend trop de place, et mes clients ne s'y retrouvent plus. Aujourd'hui quand on ouvre une page, on ne voit que l'image de fond mais pas le début de la liste de produits vendus, j'aimerais juste diminuer le header pour qu'on voit un petit bout des produits proposés sur chaques pages et sous pages sans devoir de suite manipuler la souris pour descendre sur le site (je ne sais pas si je me fais bien comprendre... )
Peut on diminuer la hauteur du header?
Je suppose que oui, suite à tous les posts mais je ne sais pas coder. Y aurait il une âme charitable pour m'aider? Question
d'avance merci.

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par FredVig le Mar 25 Sep 2018 - 10:46

C'est effectivement un défaut d'ergonomie de Jimdo. Mais il est possible de le corriger avec du code placé dans "modifier le Head".

Cette manipulation demande d’acquérir une base de connaissance en html et css, car il faut pouvoir modifier le code selon vos objectifs et selon les évolutions régulières du code de Jimdo, ou de l'évolution des navigateurs.
La seule façon de vous aider est de vous renvoyer aux tutos du forum, où autre cours en ligne, destinés à comprendre un peu ce domaine.

Dans le cas de votre site, il faut modifier la valeur de height dans cette partie du code :
.jtpl-header--image {
height: 741px;
}
Et cela, uniquement pour les pages concernées.

Il faut aussi vérifier cette règle pour les diverses situations de largeur navigateurs qui sont incluses au code. A priori il n'y en a qu'une : @(min-width:768px)

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par caro87000 le Mar 25 Sep 2018 - 13:47

bonjour !
Merci pour la réponse !
Petite question, comme je n'y connais rien : le code que tu as mis dans ta réponse, je dois juste le coller dans le "modifier le head"?
ou je dois copier encore autre chose? je dois genre copier le code de la page et modifier la section précisée par ce code là et enregistrer? je comprends pas bien ...
et aujourd'hui le soucis est sur toutes les pages. c'est bien trop grand et cela empêche de voir la page, même les premiers articles...

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par FredVig le Mar 25 Sep 2018 - 14:25

La règle que j'ai indiquée est celle que vous devrez modifier lorsque vous aurez appris comment il faut s'y prendre dans les tutos. Effectivement, il faudra aller dans modifier le head, mais c'est juste une indication d'encouragement. Ce n'est pas du tout complet.
Par analogie, je peux vous indiquer la direction, mais pas vous apprendre à conduire.

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par caro87000 le Mar 25 Sep 2018 - 14:34

oui j'entends bien et je ne veux pas qu'on fasse pour moi
j'essaye de comprendre, pour une fois tous les tutos lus, que je saches comment intégrer le code et où. que je comprennes juste le minimum pour m'y retrouver Wink
en tout cas merci beaucoup

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par FredVig le Mar 25 Sep 2018 - 19:33

Dans modifier le head, vous pouvez choisir la page sur laquelle vous voulez voir la modification (en pro et buziness). Dans ce cas, vous devrez coller sur chaque partie la règle modifiée.
Sinon, il faudra spécifier, dans "modifier le head" pour tout le site, quelle page vous voulez affecter la règle
C'est un peu plus complexe à réussir, mais c'est possible.

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par caro87000 le Jeu 27 Sep 2018 - 11:49

re bonjour !
J'ai bien tout lu tous les tuto sur les codes html et css et j'ai réussi à modifier la taille de mon head.
par contre nouveau problème.... sur le pc c'est nikel mais sur le mobile le head ne se "réduit" pas à la taille de l'écran...
est--ce normal? est-ce que je dois faire autre chose ou autrement?
please help Exclamation Question Rolling Eyes

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par FredVig le Jeu 27 Sep 2018 - 13:43

Dans un premier temps : félicitations !
Ce n'est pas si simple de prendre le temps de s'informer et d'essayer la modification de code.

Dans un second temps : encouragements !
Sur portables, la fenêtre du navigateur est étroite.
Aussi Jimdo a prévu que votre site change d'aspect.
le code Jimdo spécifique aux fenêtres étroites indique une valeur de hauteur.
Ce code Jimdo prend le dessus sur votre règle : height: 450px;

Enlevez votre code temporairement.
Vous verrez que le site s'adapte (un peu) aux fenêtres étroites.

- Si cette disposition de Jimdo par défaut vous convient, il faut faire en sorte de neutraliser votre code lorsque la fenêtre est étroite.
Une solution simple consiste à changer la propriété que vous voulez modifier.
Au lieu de modifier la hauteur (height) vous modifier la hauteur maximale (max-height)
Comme Jimdo ne semble pas avoir prévu de valeur de max-height, votre code restera actif quelquesoit la largeur de fenêtre.

- Si la disposition de Jimdo ne vous convient pas, il faut - en plus - indiquer de nouvelles valeurs de votre code pour les fenêtres étroites
Cela fait appel aux media queries.
Votre règle :
Code:
.jtpl-header--image {max-height: 450px;}
Vous précisez dans quelle condition cette règle s'applique
@media(min-width:768px) { (ici vient la règle) }
Ensuite, il faut décrire la règle pour les autres largeurs de fenêtre
@media(max-width:767px) {nouvelle version de la règle}

Ce qui peut donner dans votre cas :

Code:
@media(min-width:769px)
{
.jtpl-header--image {
    max-height: 450px;
}
}
@media(max-width:767px)
{.jtpl-header--image {
    max-height: 100px;
}
}

Notez bien les accolades qui encadrent deux fois la propriété, puis la règle :
@media ( max-width:767px) > valeur de la condition
{ > on ouvre l'accolade
.jtpl-header--image  > la cible
   max-height: 100px; > la propriété et sa valeur
} > on referme l'accolade de la règle
} > on referme l'accolade de la condition media

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par caro87000 le Jeu 27 Sep 2018 - 13:48

ouah !
alors tout d'abord très honnêtement même si c'est assez compliqué e prime abrd j'ai trouvé l'apprentissage du "codage" très intéressant.
ensuite effectivement je ne saurais pas tout faire en laquant des doigts mais je persévère Very Happy
enfin dans toute l'explication (d'ailleurs merci merci), il faut que je refasse des essais avec l'inspecteur de google chrome? mais du coup je ne verrais pas sur le portable si je charge la page? si? et enfin, le code, je dois le créer ou bien je dois le trouver?
désolée, je suis encore bien novice...

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par FredVig le Jeu 27 Sep 2018 - 14:44

Pour "enlever le code temporairement" : il suffit de l'effacer et d'enregistrer (Conservez-le quelque part pour le remettre ensuite).
Vous pouvez prévisualiser le site portable en réduisant la largeur de fenêtre du navigateur, ou regarder la prévisualisation Jimdo en mode éditeur  (peites icônes en haut en forme de portable).

Le code que j'ai indiqué est destiné à remplacer le vôtre et le rendre responsive. Il vous restera à régler la hauteur désirée en version portable ( max-height: 100px; )

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par FredVig le Jeu 27 Sep 2018 - 15:06

Démonstration sur votre site :
J'ai réduit la fenêtre navigateur (à partir du coin en bas à droite).
Ici, j'inspecte (Chrome) pour retrouver votre modification de code
https://i.servimg.com/u/f78/14/64/54/63/dem110.jpg
Ici, je désactive la modification.
https://i.servimg.com/u/f78/14/64/54/63/dem10.jpg
Ici, je change la valeur de la propriété
https://i.servimg.com/u/f78/14/64/54/63/dem310.jpg
Tout ça n'est que temporaire, il faut encore copier le résultat et le placer dans modifier le Head

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par caro87000 le Jeu 27 Sep 2018 - 15:23

en fait.... je crois bien avoir tout compris.... truc de fou ...
merci pour les explications je visualise mieux quand je "vois"
je vais essayer on verra bien Wink sinon ma foi, ... j'essayerai encore Very Happy Very Happy

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par caro87000 le Jeu 27 Sep 2018 - 15:28

bon j'ai réussi à refaire de moi même avec l'inspecteur c'est nikel !
dernière question
si je colle le code dans "modifier le head" je le met à la suite du premier?

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par caro87000 le Jeu 27 Sep 2018 - 15:38

en fait c'est bon et en inspectant la page après modif je retrouve tout ce que tu m'as expliqué et sans me prendre trop la tête.
merci de m'avoir renvoyé vers les tutos ça m'a beaucoup aidé !
même si je comprends encore pas tout, au moins je comprends le langage et comment on l'écrit !

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par FredVig le Jeu 27 Sep 2018 - 17:52

Bien !
Mais ne collez pas à la suite du premier, c'est en remplacement de votre code. ça risque de faire des conflit.

Ce n'est pas possible de tout comprendre, mais ça n'empêche pas d'agir.

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par caro87000 le Ven 28 Sep 2018 - 16:33

en tout cas ça fonctionne nikel
encore merci pour l'apprentissage express

caro87000

Messages : 11
Date d'inscription : 23/09/2018

http://www.lecomptoirduthe.fr

Revenir en haut Aller en bas

Re: réduire le header avec le templat ROME

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum