réduire le header avec le templat ROME

[caro87000]

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?
d'avance merci.

[FredVig]

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)

[caro87000]

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...

[FredVig]

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.

[caro87000]

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
en tout cas merci beaucoup

[FredVig]

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.

[caro87000]

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

[FredVig]

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

[caro87000]

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
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...

[FredVig]

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; )

[FredVig]

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

[caro87000]

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 sinon ma foi, ... j'essayerai encore

[caro87000]

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]

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 !

[FredVig]

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.

[caro87000]

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

[chrisdenice]

Merci FredVig, votre explication vient de m'être utile pour un site que je suis en train de créer avec le template Rome. J'avais modifié le head (css) mais sur smartphone, ça coinçait. Encore merci. Chris.

[FredVig]

Tant mieux, mais c'est une chance incroyable que cela fonctionne encore deux ans plus tard.

[chrisdenice]

Ah oui j'avais vu septembre mais sans faire attention à l'année...2018 . Ceci-dit, j'ai laissé les lignes de codes que j'avais faites et rajouter les vôtres en modifiant quelque peu les dimensions. Que cela fonctionne encore ne m'étonne pas vu que Jimdo ne fait plus (ou guère) évoluer les templates de Creator. Tout pour Dolphin et c'est bien dommage. Je voulais une FAQ en menu accordéon (le genre de module qu'il serait simple de proposer en natif), j'ai dû la coder en HTML/CSS (sans une ligne de js), grâce à un tuto de youtube (de codeurs) et une petite mise au point final par son auteur anglais qui fait ses essais sur un outil en ligne extraordinnaire (codepen.io) que j'ai adopté depuis aussi. C'est tip top au final et les développeurs de Jimdo pourraient largement proposer ce genre de truc tout comme une sauvegarde (même payante) par exemple. J'ai l'impression que leur cible principale s'oriente vers les sites ludiques non professionnels. J'ai essayé Wix mais je n'aime pas leur interface, sinon leurs designs sont plus tendances. Depuis 2016 (4 ans c'est énorme pour internet), Jimdo n'a plus créé aucun template pour Creator ! Et n'en créera plus à mon avis.

[Contenu sponsorisé]