Soucis concernant le visuel (design)

[Patou68]

Bonsoir,

Nouvelle utilisatrice de Jimdo (free pour le moment, mais possible abonnement du pack Pro), je souhaite modifier quelques points au niveau visuel.J'ai un peu parcouru le forum, mais pas vraiment trouvé de réponse adéquate  

• En 1er lieu j'aimerais réduire l'espace entre le haut du site et l'espace entre le logo/bannière et la barre de navigation (et pourquoi pas supprimer le cadre du nom du site)
  

• J'aimerais savoir s'il est possible de faire en sorte que tout ce qui est en blanc soit arrondi a la place des coins: Navigation-Content-Sidebar et Footer ?
  

Ma dernier petite question est, est ce qu'il y a plus de possibilité de modification sous JimdoPro par rapport à JimdoFree ?

Merci pour votre aide,

Patou

[FredVig]

Bonjour
Tout cela est possible et assez simple dès lors que l'on se penche sur les tutos les bases de la modif…
Bien sûr, on peut vous donner les codes nécessaires, mais cela ne vous fera pas découvrir comment ça fonctionne.
Par exemple, la marge haute vient -dans le cas de votre site, ça ne sera pas forcément le cas dans un autre design-
des valeurs :

Code:

.tpl-logo-header {
    margin-top: 2.7rem;}

Allez dans paramètres>modifier le design et collez ces codes :

Code:

  <style type="text/css">
    /*<![CDATA[*/
    .tpl-logo-header {margin-top: 0rem!important;}
    /*]]>*/
    </style>

[FredVig]

Pour les bords arrondis, c'est le m^me principe, la valeur à rajouter est

Code:

border:none 0px #FFF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

Il faut l'indiquer pour les class qui pilotent chaque élément que vous voulez modifier
notamment :
.content-options, .sidebar-content et .navigation-colors
ce qui donne pour votre code au complet :

Code:

<style type="text/css">
    /*<![CDATA[*/
    .tpl-logo-header {margin-top: 0rem!important;}
.content-options, .sidebar-content, .navigation-colors
{border:none 0px #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px;border-radius: 10px;}
    /*]]>*/
    </style>

Pour changer l'arrondi, modifiez les valeurs 10px en plus ou en moins

[Patou68]

Bonjour FredVig,

Merci beaucoup pour votre aide, en fait je découvre le coté création de site..
D'où mon ignorance pour ne pas dire, mon incompréhension... et comme mon
projet me tient à coeur, j'aimerais faire quelque chose de sympa.

[FredVig]

Nous sommes tous passés par là.
Tout semble compliqué… tant qu'on n'a pas essayé soit-même !
Les tutoriels sont bien faits, même s'ils semblent un peu long.
Quelques jours de lecture et un peu de pratique suffisent à comprendre et devenir autonome.

Note : sur votre site, ce sera une question peu particulière si vous voulez adapter aussi les contours arrondis à vos menus (boutons verts)

[Patou68]

Bonjour,

Effectivement j'ai vu cela hier soir... A la lecture de votre note, je n'ai pas compris si cela peut être arrangé ou pas

[FredVig]

Oui, c'est possible, et de différente façon.
Comme chaque méthode a des implications secondaires, il vous faudra faire des choix.
Cela fait partie des raisons qui obligent à comprendre la technique de modification du design.

[Patou68]

Bonjour,

Malheureusement, je n'ai pas trouvé de solution pour le menu.

[FredVig]

essayez d'ajouter
overflow:hidden;
après la première {

Code:

<style type="text/css">
    /*<![CDATA[*/
    .tpl-logo-header {margin-top: 0rem!important;}
.content-options, .sidebar-content, .navigation-colors
{overflow:hidden;border:none 0px #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px;border-radius: 10px;}
    /*]]>*/
    </style>

[Patou68]

Cela n'a rien changé, j'ai ré activé le menu pour que vous puissiez voir.

J'ai enlever le morceau de code que vous m'indiquiez.

Voici ce que j'ai en ce moment (j'ai réussi à faire quelques autres modifs)

Code:

<style type="text/css">
    /*<![CDATA[*/
    .tpl-logo-header {margin-top: 0rem!important;}
.content-options, .sidebar-content, .navigation-colors, .e-logo
{border:none 0px #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px;border-radius: 10px; box-shadow: 6px 6px 6px 6px black;}
    /*]]>*/
</style>

[Patou68]

Bonsoir,

Après quelques essais et suite à l'ajout de votre suggestion. il se peut que j'ai enfin trouvé...mais il y a un hic au niveau du bas du menu (celui de droite)  

Code:

<style type="text/css">
    /*<![CDATA[*/
    .tpl-logo-header {margin-top: 0rem!important;}
.sidebar-content, .sidebar-options {margin-top: 20px;}
.content-options, .sidebar-content, .navigation-colors, .sidebar-nav, .e-logo
{overflow:hidden; border:none 0px #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; box-shadow: 6px 6px 6px 6px black;}
    /*]]>*/
</style>

[FredVig]

Oui, ça marche aussi.
L'ombre, par contre, je ne suis pas très fan, mais c'est bien d'essayer des variantes.
Continuez d'expérimenter, et vous finirez par trouver un style unique.

[FredVig]

Votre soucis d'ombre et de dimensions imprévue sur le sous-menu, c'est le genre d'inconvénient qu'il faut s'attendre à rencontrer quand on modifie les CSS.
Une modification, en particulier sur les class, aura des conséquences indésirables, qu'il faudra contrer, en provoquant d'autres effets indésirables etc.
D'où la nécessité de comprendre comment cela fonctionne si vous voulez être autonome.
Où alors de faire appel à un expert jimdo rémunéré
Essayez d'ajouter .sidebar-nav{background:white;}
mais vous aurez toujours l'ombre fantôme sur la page d'accueil

[Contenu sponsorisé]