Styler vos citations dans Jimdo

Je vous propose dans ce tutoriel d'habiller les citations que vous pourriez insérer dans Jimdo. Pour cela, je vous montre comment insérer une citation et je vous offre une douzaine de styles de citations complètement paramétrables à vos couleurs !

Installation dans Jimdo

L'installation de ce système de citations stylées dans Jimdo se fait en deux étapes très simples.

Etape 1 : insertion de la feuille de style

Rendez-vous dans la barre d'admin de votre site, puis cliquez sur Paramètres > Modifier le Head. C'est dans la fenêtre de saisie qui apparaît que vous copiez-collez un des styles de citations proposés ci-dessous.

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

Pour valider vos changements, n'oubliez pas de cliquer sur le bouton 

Etape 2 : écrire une citation

Pour écrire une citation, ajoutez à l'endroit désiré un élément Widget/HTML :

Screenshot : ajouter un widget/HTML

Dans le cadre de saisie qui apparaît, copiez-collez ce code en prenant soin d'écrire votre citation :

<blockquote>Ici écrivez votre citation.</blockquote>

Le colorpicker : un outil bien pratique pour trouver les couleurs

Utilisez le colorpicker pour trouver les couleurs que vous voulez et récupérer leur traduction hexadécimale.

Flèche vers le haut

Styles de citations simples (avec effet d'animation)

Voici 5 modèles de citations plutôt simples. J'ai ajouté pour chaque code une variante qui crée un effet d'animation au passage de la souris sur la citation.

Style de citation n°1

Code basique

Citations dans Jimdo : style n°1
<style type="text/css">
/*<![CDATA[*/

/* Style de citation n°1 */

blockquote {
margin: 1em 2em;
border-left: 2px solid #ccc; /* Couleur du trait à gauche */
padding-left: 1em;
color: #888; /* Couleur du texte : remplacez #888 par une autre couleur */
}

/*]]>*/
</style>

Variante avec effet d'animation au survol de la souris

Voici un exemple de ce style de citation, avec un autre choix de couleurs et avec l'effet d'animation :

C'est ici que j'écris la citation que je veux : elle s'anime quand je passe le curseur dessus.
Voir le code

Style de citation n°2

Code basique

Citations dans Jimdo : style n°2
<style type="text/css">
/*<![CDATA[*/

/* Style de citation n°2 */

blockquote {
margin: 1em 2em;
border-left: 1px dashed orange; /* Couleur du trait en pointillés */
padding-left: 1em;
font-style: italic;
color: #bbb; /* Couleur du texte : remplacez #bbb par une autre couleur */
}

/*]]>*/
</style>

Variante avec effet d'animation au survol de la souris

Voici un exemple de ce style de citation, avec un autre choix de couleurs et avec l'effet d'animation :

C'est ici que j'écris la citation que je veux : elle s'anime quand je passe la souris dessus.
Voir le code

Style de citation n°3

Code basique

Citations dans Jimdo : style n°3
<style type="text/css">
/*<![CDATA[*/

/* Style de citation n°3 */

blockquote {
margin: 1em 3em;
padding: .5em 1em;
color: #232323; /* Couleur du texte de la citation */
border-left: 5px solid #fce27c; /* Couleur de la bordure gauche */
background-color: #f6ebc1; /* Couleur de fond de la citation */
}

/*]]>*/
</style>

Variante avec effet d'animation au survol de la souris

Voici un exemple de ce style de citation, avec un autre choix de couleurs et avec l'effet d'animation :

C'est ici que j'écris la citation que je veux : elle change au passage de la souris.
Voir le code

Style de citation n°4

Code basique

Citations dans Jimdo : style n°4
<style type="text/css">
/*<![CDATA[*/

/* Style de citation n°4 */

blockquote {
background-color: transparent;
border-top: 3px double #DC143C; /* Couleur de la bordure du haut */
border-bottom: 3px double #DC143C; /* Couleur de la bordure du bas */
color: #232323; /* Couleur du texte de la citation */
padding: 10px 15px;
font-style: oblique;
margin: 10px 5%;
}

/*]]>*/
</style>

Variante avec effet d'animation au survol de la souris

Voici un exemple de ce style de citation, avec un autre choix de couleurs et avec l'effet d'animation :

C'est ici que j'écris la citation que je veux : elle s'anime quand au passage de la souris.
Voir le code

Style de citation n°5

Code basique

Citations dans Jimdo : style n°5
<style type="text/css">
/*<![CDATA[*/

/* Style de citation n°5 */

blockquote {
background-color: #777; /* Couleur de fond de la citation */
color: #fff;  /* Couleur du texte de la citation */
font-weight: bold;
padding: 10px;
margin: 10px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

/*]]>*/
</style>

Variante avec effet d'animation au survol de la souris

Voici un exemple de ce style de citation, avec un autre choix de couleurs et avec l'effet d'animation :

C'est ici que j'écris la citation que je veux : elle s'anime au passage de la souris.
Voir le code
Flèche vers le haut

Styles de citations avec une image en arrière-plan

Voici 3 modèles de citations qui utilisent une image en arrière-plan.

Style de citation n°6

Citations dans Jimdo : style n°6
<style type="text/css">
/*<![CDATA[*/

/* Style de citation n°6 */

blockquote {
background: #F3F3F1 url('http://sd-1.archive-host.com/membres/images/3347790973941088/comma-side-orange1.gif'); /* Vous pouvez changer la couleur de fond en remplaçant #F3F3F1 */
background-repeat: repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 45px;
font: italic 1em Georgia, "Times New Roman", Times, serif;
}

/*]]>*/
</style>

Style de citation n°7

Citations dans Jimdo : style n°7
<style type="text/css">
/*<![CDATA[*/

/* Style de citation n°7 */

blockquote {
background: #484B52 url('http://sd-1.archive-host.com/membres/images/3347790973941088/green-black-side.gif');
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF; /* Changez la couleuur du texte ici */
font: normal 0.9em Helvetica, verdana, sans-serif;
} 

/*]]>*/
</style>

Style de citation n°8

Citations dans Jimdo : style n°8
<style type="text/css">
/*<![CDATA[*/

/* Style de citation n°8 */

blockquote {
background-position: -10px -7px;
margin: 20px 10px;
padding: 10px 20px 10px 50px;
background: url("http://sd-1.archive-host.com/membres/images/3347790973941088/quote.png") 5% no-repeat #FFF8DD;
color: #232323; /* Changez la couleur du texte */
}

/*]]>*/
</style>
Flèche vers le haut

Styles de citations avec guillemets mais sans images

Voici 4 modèles de citations qui affichent des guillemets, mais sans faire appel à une image, en utilisant les CSS3 :

Style de citation n°9

Citations dans Jimdo : style n°9
Voir le code

Voici un exemple de ce style de citation, mais avec un autre choix de couleurs :

C'est ici que j'écris la citation que je veux.

Style de citation n°10

Citations dans Jimdo : style n°10
Voir le code

Style de citation n°11

Citations dans Jimdo : style n°11
Voir le code

Voici un exemple de ce style de citation, mais avec un autre choix de couleurs :

C'est ici que j'écris la citation que je veux.

Style de citation n°12

Citations dans Jimdo : style n°12
Voir le code

Voici un exemple de ce style de citation, mais avec un autre choix de couleurs :

C'est ici que j'écris la citation que je veux.

Hey ? Happy quoting now ! :D

Un truc à déclarer ?

Écrire commentaire

Commentaires : 2
  • #1

    carteducieltest (lundi, 23 septembre 2013 17:56)

    Bonjour,
    Petite question comment fait-on pour insérer le bouton "Voir le code" sur mon site?

    Merci
    Françoise Gourde

  • #2

    Isabelle (vendredi, 04 octobre 2013 22:13)

    @carteducieltest : c'est difficile mais ce bouton est basé sur le même code que celui de la FAQ (voir tuto sur le sujet). J'écris un code différent pour chaque bouton, donc c'est assez fastidieux à expliquer et à mettre en place... Voici le code d'un bouton :

    <a href="javascript:Toggle(1)" class="qcode">Voir le code</a><br/>
    <div id="ans1" class="rcode" style="display: none;">
    blablabla
    </div>

    A bientôt !

Ruban