Template gratuit

[funnycat.jimdo.com]

Bonjour à tous.
Pour fêter l'ouverture de la boîte Webdesign sur le forum Jimdo et parce que je suis heureux d'avoir mis à jour le design d'un de mes sites, j'ai décidé de vous offrir un design pour vos sites Jimdo.

Démonstration
Le template offert est le même que celui disponible sur mon site Jimdo au moment où je poste ce commentaire: http://funnycat.jimdo.com
Il ressemble à ceci:


Télécharger le template
Le pack du template contient le code source HTML et CSS ainsi que les images associées au thème Jimdo. En dézippant le pack il y a ainsi la possibilité de mettre en place le template sur Jimdo:

• Pack du template (96,1ko)

Installation
L'installation est une étape pas très évidente pour les débutants, je vais essayer d'expliquer rapidement et efficacement.

• 1- Dézipper le pack sur votre ordinateur
• 2- Ouvrir votre navigateur internet, aller sur votre site Jimdo, dans les panels de l'administrateur
• 3- Ouvrir le fichier "layout-2009-07-15.html" et "style-2009-07-15.css" avec un éditeur de texte très simple. Le bloc-note windows peut suffire.
• 4- Copier les codes HTML et CSS comme un nouveau template personnalisé. Pour cela il faut se rendre dans "mise en page" > "mise en page personnelle" et copier le code "layout-2009-07-15.html" dans la partie HTML et le code "style-2009-07-15.css" dans la partie CSS
• 5- Dans le code CSS il y a des images qui permettent de faire un beau design. Il faut donc ajouter ces images à votre site Jimdo. Pour cela il faut cliquer sur "fichier" (en haut il y a plusieurs onglets "HTML", "CSS", "fichiers" et "aides/trucs") et ajouter chacune des images qui sont dans le pack.
  
  La capture d'écran ci-dessus sert juste d'exemple pour illustrer. Une fois que vous aurez ajouté chaque image, vous devrez avoir dans la parties "fichiers" des images telle que: effet-menu-normal.png , effet-menu-survol.png , fond-bas.png , header.png ...
• 6- Dans le code HTMl, il vous ai possible de modifier le titre. Pour cela il faut simplement modifier le titre "ici: votre titre" par le texte de votre choix (votre nom, votre marque, le nom de votre site ...)

Normalement s'il n'y a pas eu de soucis, le design est opérationnel. Si les images ne s'affichent pas, je vous suggère de vérifier qu'elles possède bien le même nom sur votre compte Jimdo et dans le CSS. Si malgré tout vos effort il y a toujours un soucis, je suggère d'héberger vos images sur un service externe (méthode qui a des failles si le service externe ferme ses portes), mais il faut bien attention ensuite à modifier le code pour que le code puisse savoir où sont les images. Exemple:

background-image:url("http://www.site-externe-heberge-image.com/utilisateur36/fond-haut.png");

Aide: N'oubliez pas que dans la partie "mise en page personnalisé" il y a un onglet intitulé "Aides / Trucs" qui explique en détail comment fonctionne cette partie. Et en prime, je vous donne le lien vers la vidéo (en anglais) qui explique la méthode pour faire un design personnalisé: http://www.youtube.com/watch?v=SDMvw6fNDR4

Licence d'utilisation
La seule chose que je vous demande en échange c'est de laisser le lien en bas de page. En effet, cette création est distribué sous les termes de la licence Creative Commons Paternité 2.0 France.
Dans le pire des cas, si vous ne souhaitez pas laisser le lien en bas de page, vous devez au minimum cité la source sur l'une de vos pages (page non orpheline).


Avant de se quitter, je souhaite préciser que je ne me sent pas avoir des excellents talents de webdesigner, mais j'invite tous les Jimdonautes qui ont des connaissances en HTML/CSS à offrir un template gratuitement à la communauté. J'espère que mon initiative sera poursuivie par d'autres membres.
Pour finir, n'hésitez pas à me donner un feedback sur ce design.

Merci d'avance pour vos réponses.

[pyrenees.jimdo.com]

Alala Tony un grand grand merci pour cette superbe initiative!!! C'est génial!!

[funnycat.jimdo.com]

Merci beaucoup y compris pour le ReTweet sur Twitter.
J'espère que d'autres template vont voir le jour, aussi bien sur cette partie de forum francophone que dans les autres communautés linguistique de Jimdo. Si de nombreux Jimdonautes y travaillent, ça pourrait pratiquement constituer une base de donnée de template gratuit supplémentaire pour Jimdo.

[pyrenees.jimdo.com]

Tiens en parlant de Twitter....


Pour ceux que ca intéresse: http://twitter.com/Amelie_Jimdo


@Tony, je vais essayer de mettre le template à mon site aujourd'hui (mais je ne suis pas très douée, je me demande ce que ca va donner )

[funnycat.jimdo.com]

Ça va être l'occasion de voir si j'ai bien expliqué. Le plus compliqué c'est pour les images, d'autant plus que je me souviens que j'avais eu des soucis une fois où je soupçonnais un petit bug pour un format d'image. Mais heureusement tu a les développeurs Jimdo à coter s'il le faut.

Sinon, je le trouve sympa ton logo Twitter (aussi bien sur ce forum que celui dans la sidebar de ton site).

[pyrenees.jimdo.com]

Alors c'est en cours...C'est super rigolo, merci beaucoup pour ce "cours à distance"

J'ai juste un p'tit problème, je n'arrive pas à placer mes images (téléchargées au préalable dans les fichiers) dans le code CSS. Je remplace tes images par les miennes (Je voudrais mettre un fond zèbre sur le fond!!), mais quand j'enregistre, rien ne change

[pyrenees.jimdo.com]

Voilà mon zèbre:

[pyrenees.jimdo.com]

Tiens au fait le lien où j'ai trouvé pleins de boutons "Follow me" pour Twitter:

http://www.twitip.com/181-twitter-butto ... followers/


Allez, c'est le week-end je file moi! A lundi!
Bon week-end à tous!

Bizzzzous!

PS: Et essayez le template de Tony, c'est vraiment cool pour apprendre!

[template-3d.jimdo.com]

(oups, je me suis trompé de compte Jimdo. Je suis bien "funnycat". Je suis en train de préparer un nouveau template gratuit à l'adresse http://template-3d.jimdo.com. Bien entendu, je vous tiendrais informé lorsque ce template sera dispo )

C'est bien ce qui me semblait, les images c'est le plus compliqué.
Pour simplifier les explications pour insérer ton zèbre, je vais utiliser directement l'adresse où il est hébergé (cf: http://pyrenees.jimdo.com/s/cc_images/c ... 1247843899 ). Avec un peu plus d'expérience tu pourra essayé plus tard en utilisant les URL relative, c'est à dire une URL qui commence sans protocol, tel que: cache_1319664614.jpg (exemple fictif).

Si tu veux voir ton zèbre dans en image de fond qui se répète (ça sera moche, mais c'est une première étape), essaie de remplacer dans le CSS, ce code:

Code: Select all

body{
background-color:#cdcdcd;
}

par ce code-ci:

Code: Select all

body{
background-image:url("http://pyrenees.jimdo.com/s/cc_images/cache_1319664614.jpg?t=1247843899");
}

Conseil:
Pour ceux qui souhaite travailler l'HTML et le CSS facilement, je suggère de télécharger l'éditeur Notepad++. Il permet de mettre en couleur le code dans le but de s'y retrouver plus facilement. C'est plus pratique que le bloc-note de Windows.
Pour l'utiliser facilement avec Windows, une fois qu'il est installé il suffit de faire un clique droit sur un fichier HTML ou un ficher CSS et de cliquer sur "Open in notepad++".

Je vais éditer mon petit tuto pour apporter des petites explications supplémentaire.

[pyrenees.jimdo.com]

J'ai réussi!!!

Tony, tu es génialissime!! Un énorme merci!!!