Elargir un template Jimdo

Un des petits défauts des templates de Jimdo est qu'ils sont fort étroits, ce qui leur donne parfois un look "désuet". Une bonne largeur standard, aujourd'hui, est de 950 px.

Voyons comment élargir la taille des templates standards de Jimdo, qu'ils contiennent ou pas une image (attention, avec une image, c'est plus compliqué !).

Le site en largeur 850 px

Le site en largeur 950 px


Voici un exemple de code modifié :

Comme lorsque l'on souhaite modifier les couleurs d'un template Jimdo, vous pouvez appliquer des changements pour élargir la taille de votre zone de contenu en modifiant la balise "head" (via les paramètres).   

 

<style type="text/css">

/*<![CDATA[*/

 

div#container {

text-align: left;

width: 950px;

}

 

div#emotion-header {

line-height: 0;

width: 950px !important;

}

 

div#nav_top {

width: 950px;

}

 

div#content .gutter {

width: 600px !important;

}

 

div#footer .gutter {

width: 600px !important;

}

 

/*]]>*/

</style>

 

Si le header contient une image

On va remplacer l'image actuelle par une image de 950 px. Mais si on ne fait rien, l'image reste "calée" sur 850 pixels.

 

Il faut donc ajouter dans le Head le code suivant :

 

div#emotion-header a {

display:block !important;

width:950px !important;

height:190px !important;

background-image:url('http://u.jimdo.com/www54/o/s537277c03524230c/emotion/orig/header.jpg?t=1389362818') !important;

}

 

div#emotion-header img {

display:none !important;

}

 

Ce code permet de :

- Cacher l’image de div#emotion-header ;

- Définir l’original de votre image, donc le format auquel vous l’avez mis en ligne comme image de fond pour div#emotion-header ;

- Faire en sorte que le lien dans le header, qui dirige vers l’accueil, fonctionne tout de même.

 

Dans l’URL de l’image utilisée dans le code que nous avons inséré, nous avons remplacé l’un des paramètres : crop est devenu orig .
 
URL originale utilisée par le système pour le Header :
URL utilisée dans notre code :
 
Cela permet de faire en sorte que l’image affichée soit l’originale (orig), et non la version rognée (crop), et qu’elle soit donc de la même taille que le fichier image chargé précédemment.
 
Attention, il vous faudra maintenant toujours utiliser des images de taille 950px par 190px pour le header de ce site.

Partagez cet article

Cet article vous a été utile ? N'hésitez pas à le partager !