Cow-Vault - Ali Baba de l'InterWeb.http://cow-vault.cowblog.frRessources graphiques, astuces CSS, HTML, Jquery.. Tout ça pour les cowblogueurs et cowblogueuses.CowblogfrTue, 26 Oct 2010 10:26:05 +0200180http://cow-vault.cowblog.fr/tooltips-3052344.htmlTooltips.
C'est très simple en html de mettre une petite bulle sur un mot pour apporter une information supplémentaire (passer la souris sur le mot). Mais est-ce que ceci n'a pas franchement plus de classe ?

Les tutoriels pour créer ce genre de tooltips comme on les appelle sont très nombreux sur Internet, et ils peuvent prendre toutes les formes possibles et imaginables. Cela dit je crois que j'avais quand même créé ce blog à la base pour les gens qui galèrent un petit peu en javascript et en css, c'est donc pas la peine de vous surcharger de codes et de blablas. Je voulais un code simple et pratique pour donner un petit cachet à votre blog et briller en société ! 

Voilà comme ça marche. Déjà, rendons à César ce qui appartient à César, voici où j'ai trouvé le code : http://dev.mariusilie.net/content/simple-tooltip-jquery-plugin.

Il vous suffit de télécharger le plugin. Dézippez-le. Ouvrez le fichier "jquery.tooltip.v.1.1.js" dans le bloc-note et réenregistrez-le sous format .txt. Uploadez-le ensuite dans vos fichiers Cowblog.
Insérez ce code dans un module HTML libre :

<script type="text/javascript" src="http://votreblog.cowblog.fr/files/jquerytooltipv11.txt">
</script>

Collez ce petit bout de code à la suite :

<script type="text/javascript"> $(document).ready(function(){ $(".with-tooltip").simpletooltip(); }); </script>

Votre texte (dans l'article) devra prendre cette forme : 

<span class="with-tooltip" title="Texte dans le tooltip">Texte/Lien sur lequel passer la souris</span>

En ce qui concerne le CSS, voici ce qui vous est donné dans le fichier zip :

#simpleTooltip {
padding: 7px;
border: 1px solid #A6A7AB;
background: #F2F3F5;
}

Ce que j'ai utilisé dans mon exemple :

#simpleTooltip {
padding: 7px;
border: 1px solid #A6A7AB;
background: #333333;
font-size:9pt;
font-family:helvetica;
font-variant:small-caps;
color:#ffffff;
}

C'est bien sûr personnalisable, et vous pouvez rajouter un peu tout ce que vous voulez.
Et voilà !

(si vous remarquez que ça ne marche pas, signalez-le moi dans les commentaires, Google Chrome fait des trucs étranges quand je copie colle les codes donc ça se peut qu'un soit mal passé. Merci.)

Edit (je sais que j'avais oublié quelque chose) : On peut aussi personnaliser le texte sur lequel passer la souris, histoire qu'il ressorte et qu'on n'ait pas à modifier ses caractéristiques à chaque fois. Il suffit d'utiliser cette balise dans le CSS :

.with-tooltip { }

Dans mon exemple :

.with-tooltip {
text-decoration:underline;
color:#808080;
font-weight:bold;
background:#f7fdfd;
}

]]>http://cow-vault.cowblog.fr/commentaires-3052344.htmlTue, 26 Oct 2010 10:26:00 +0200http://cow-vault.cowblog.fr/tooltips-3052344.htmlhttp://cow-vault.cowblog.fr/police-personnalisee-et-visible-par-tous-3042249.htmlPolice personnalisée et visible par tous.Encore un article en coup de vent. Je n'ai pas le temps de faire de recherches, donc pas le temps de trouver une solution appropriée à ce post, toutefois j'ai trouvé sur ce blog une ressource concoctée par Google qui va en ravir plus d'un. Allez sur ce site. Choisissez la police qui vous plaît. Cliquez dessus puis sur "Get the code".
http://cow-vault.cowblog.fr/images/ICONS/warning16.png La méthode "simple" ne fonctionne pas avec Cowblog. Cliquez sur "Advanced techniques". Copiez et coller le code fourni (javascript) dans un module HTML par exemple.

Puis insérez le texte que vous voulez personnaliser avec la police entre deux balises reconnaissables. Exemple :

<span class="nom_de_la_police">blabla</span>

Il suffit ensuite d'insérez dans votre feuille de style CSS :

.nom_de_la_police {
font-family:nom_de_la_police;
}

 Si vous voulez personnaliser encore plus la police, il suffit de cliquer sur "Preview this font" où vous pouvez configurer l'espacement entre les lettres, la décoration, la taille, les ombres etc.

 Exemple - Mon texte dans la police Lobster

Questions ? Remarques ? http://cow-vault.cowblog.fr/images/ICONS/arrowdown.png]]>http://cow-vault.cowblog.fr/commentaires-3042249.htmlSun, 26 Sep 2010 14:00:00 +0200http://cow-vault.cowblog.fr/police-personnalisee-et-visible-par-tous-3042249.htmlhttp://cow-vault.cowblog.fr/back-to-basics-3-3042174.htmlBack to basics #3Voilà un petit montage vite fait et assez moche, en complément du "Back to basics #1" :
http://cow-vault.cowblog.fr/images/ILLUS/comments2.png

Voilà un zoom sur la structure des commentaires :

http://cow-vault.cowblog.fr/images/ILLUS/commentsdetail2.png
Si vous avez des questions, ou si vous avez trouvé des erreurs, n'hésitez pas à vous exprimer dans les commentaires.

Ps. Je vous rappelle qu'il y a plusieurs ".article-top", ".article-body".. parce qu'ils sont différents selon l'élément. Il faudra donc intégrer dans le css :

#comments .article-top { }

ou

#post .article-top { }

...]]>http://cow-vault.cowblog.fr/commentaires-3042174.htmlSun, 26 Sep 2010 11:04:00 +0200http://cow-vault.cowblog.fr/back-to-basics-3-3042174.htmlhttp://cow-vault.cowblog.fr/mapper-une-image-3018199.htmlMapper Une Image.Allez, je retrousse mes manches et j'écris l'article qui m'attend depuis quelques semaines.. 
Je voulais vous apprendre à mapper une image. Mais durant ma recherche sur Google d'une définition adéquate du fameux "mappage", je suis tombée sur un site qui va économiser à la fois mon temps et le votre.
Mais c'est quoi mapper une image ? Eh bien, c'est définir une ou plusieurs zone(s) sensible(s) à votre image afin de rendre ces zones cliquables.
Exemple sur cette image immonde :
Image Map
Pour ceci rendez-vous sur ce site :

http://www.image-maps.com/images/logo_319x106.png

Là, vous pouvez uploader une image ou utiliser une adresse url (je vous conseille d'uploader votre image sur votre blog, et ensuite d'utiliser son adresse pour le mappage car il vous sera dit plus tard que le site ne stocke pas les images, et que l'image que vous aurez uploadé sera effacée deux jours après).
Appuyez sur "Start mapping your image" et "Continue to next step". Ensuite plein d'options s'offrent à vous, vous pourrez les découvrir par vous même, mais il suffit de se servir du basique pour obtenir un résultat décent.
Ce site vous sera surtout utile pour mapper des rectangles et des polygones. Je vous expliquerai plus tard comment faire un rond plus facilement.

http://cow-vault.cowblog.fr/images/ILLUS/sitemapentieretape1.png
Donc si on veut mapper un rectangle, on appuye sur "Rectangle". Un rectangle apparaît, déplaçable et redimensionnable, qu'il suffit d'adapter au rectangle de son image.

http://cow-vault.cowblog.fr/images/ILLUS/sitemapetape2.png
Ensuite on appuye sur "Save", et le tour est joué.

Pour notre polygone, on va cette fois appuyer sur "Custom shape" et on clique sur chaque pointe, de cette façon (regarder les points verts) :

http://cow-vault.cowblog.fr/images/ILLUS/sitemapetape3.png
Ensuite, "Save". Vu qu'on laisse tomber le rond pour le moment, on va appuyer sur "Get your code".
Ensuite il suffit d'appuyer sur "HTML Code" situé en haut, le copier et le coller. Si vous avez uploadé votre image sur le site, n'oubliez pas de la déposer sur un autre site, et de changer l'adresse dans le code fourni.

Pour le rond. Je ne vais pas faire une explication détaillée, et si vous ne la comprenez pas vous pourrez toujours vous servir de l'outil "Custom shape" du site.
On va se servir d'un code de ce type :

<map id="" name="map">
<area shape="circle" coords="X,Y,Z" href="#" alt="" title=""    />
</map>
<img src="http://adresse_de_l'image" alt="" width=XX height=XX usemap="#map">  

Attention ! Si comme le mien votre rond fait partie d'une image avec d'autres formes, il suffit d'insérer la ligne en bleu en dessous des autres "<area shape=.../>".

X, Y et Z sont des valeurs en pixels. Et pour savoir ce qu'ils représentent, rien ne vaut une image :

http://cow-vault.cowblog.fr/images/ILLUS/exemplemaprond.png

On obtient ceci :


Et voilà le travail. Comme d'habitude, je vous souhaite bonne chance !]]>http://cow-vault.cowblog.fr/commentaires-3018199.htmlTue, 13 Jul 2010 20:31:00 +0200http://cow-vault.cowblog.fr/mapper-une-image-3018199.htmlhttp://cow-vault.cowblog.fr/img-hover-3011440.htmlImg Hover.A peu près tout le monde connaît ce mot, "hover", qui permet de donner des propriétés différentes à un élément selon si on le survole de la souris ou non. Il peut s'insérer aussi bien dans le css qu'en HTML.
Justement, en HTML, il existe un code bien simple pour changer les propriétés d'une image au passage de la souris, sans utiliser de codes css ou de background-image :

<img border="0" onmouseout="this.src='adresse de la première image'" onmouseover="this.src='adresse de l'image au survol'" alt="" src="adresse de la première image" />

Voici un petit exemple :



Oui, mais. Dès que l'image devient un tout petit peu "lourde", on remarque un décalage entre le moment où on passe la souris et l'affichage de l'image. Ce retard n'apparaît que la première fois qu'on survole l'image, puisqu'ensuite elle est chargée. C'est tout de même un peu fâcheux. Exemple :


C'est pourquoi on préfèrera une autre technique (il en existe sûrement d'autres), légèrement plus contraignante que la précédente, mais plus efficace. Pas de chargement supplémentaire puisque les deux images n'en font en fait qu'une.
Voici les deux images sur lesquelles nous allons travailler :

http://cow-vault.cowblog.fr/images/DEMOS/imghover7.pnghttp://cow-vault.cowblog.fr/images/DEMOS/imghover8.png

Nous les assemblons pour n'en faire qu'une, avec l'image apparente en haut, et l'image "survol" en bas :

http://cow-vault.cowblog.fr/images/DEMOS/imghover6.png
On insèrera l'image de cette façon :

<div id="exemple"><img src="adresse de l'image" alt="" /></div>

Le nom de la balise (donc ici "exemple") peut être changé, il faudra juste choisir quelque chose d'inutilisé jusqu'à présent et d'assez explicite pour ne pas s'emmêler les pinceaux dans son css.

Justement, dans son css, on insérera ce code :

#exemple {
width:200px;
height:200px;
overflow: hidden;
}
#exemple img {
border: none;
}
#exemple:hover img {
margin-top: -200px;
}

200 et 200 sont bien sûr à adapter. Ils correspondent à la largeur (width) de l'image apparente, et à la hauteur (height) de cette même image (donc techniquement la moitié de l'image regroupant les deux).

Résultat :


Traduit, modifié et adapté d'ici.
]]>http://cow-vault.cowblog.fr/commentaires-3011440.htmlWed, 23 Jun 2010 16:17:00 +0200http://cow-vault.cowblog.fr/img-hover-3011440.htmlhttp://cow-vault.cowblog.fr/back-to-basics-2-3003849.htmlBack To Basics #2Ayez encore foi en ce blog, il n'est pas mort, j'ai juste eu une paire de semaines bigrement chargées.
Donc j'ai déjà lu sur ce forum, quand quelqu'un avait un problème de placement, "Joue avec le margin ou le padding". Mais c'est quoi le padding ? Et c'est quoi le margin ? Et les deux sont-ils équivalents ? Une image valant mieux que de grands discours..
http://cow-vault.cowblog.fr/images/ILLUS/paddingmargin.png

Si on veut "jouer" avec les deux, il faut donc d'abord savoir de quoi on parle. Prenons un exemple :

http://cow-vault.cowblog.fr/images/ILLUS/exemplemarginpadding.png
On veut bouger .contenu dans #module-lambda.
Pour celà nous aurons deux moyens :

#module-lambda {
padding-left:XXpx;
}

ou

.contenu {
margin-left:XXpx;
}

Après tout dépend des besoins, c'est pour celà que parfois il est utile de savoir jongler entre les deux.
]]>http://cow-vault.cowblog.fr/commentaires-3003849.htmlThu, 03 Jun 2010 09:45:00 +0200http://cow-vault.cowblog.fr/back-to-basics-2-3003849.htmlhttp://cow-vault.cowblog.fr/tutoriel-site-du-zero-et-bourdes-2997347.htmlTutoriel Site du Zéro et bourdes.Je vais quand même consacrer un article à un tutoriel que vous avez probablement déjà vu au moins une fois dans votre vie puisqu'il a été affiché 2 126 073 326 de fois (enfin.. la toute première page, les vues baissent exponentiellement au fil des pages puisqu'on sait bien que dès que quelque chose dépasse 3 mots d'affilée, c'est dur à supporter pour des gens qui veulent tout, tout de suite, maintenant.. mais là n'est pas le sujet).
Je veux bien sûr parler du tutoriel "Apprenez à créer votre site web" du Site du Zéro ! Et ce tutoriel mérite bien son succès. Toutes les bases sont expliquées, avec des couleurs, des schémas et des QCMs.

http://cow-vault.cowblog.fr/images/ILLUS/siteduzero.png

Alors vous allez me dire "Oui mais nous on fait un blog, on fait pas un site !". Et là je vous dirai qu'avec 5 modules HTML libre (en premium) et une feuille de style totalement personnalisable, des possibilités y'en a un paquet. Mais pour ça faut s'intéresser un peu au CSS, et par défaut sur quoi il s'appuye : l'HTML1. La boucle est bouclée.

Et maintenant je vais partir sur une petite tangente, histoire qu'on apprenne de mes boulettes. J'étais en train de peaufiner un nouvel habillage sur mon autre blog2, et tout à coup voilà ce qui s'affiche :

http://cow-vault.cowblog.fr/images/ILLUS/probleme.png
Je ne comprend pas ce qui se passe, je passe peut-être une demi-heure à éplucher mon code CSS, je commence à désespérer.. et je me suis rendu compte qu'à cause de mon pavé tactile légèrement défaillant, lorsque j'étais en train d'effacer une ligne j'avais sauté jusqu'en haut du document, et j'avais effacé par erreur un / du titre. Afin qu'ils n'apparaissent pas sur le blog, les titres et toutes les notes qu'on peut apporter à un CSS sont insérés entre /* et */. Ayant effacé le dernier /, j'avais totalement foutu en l'air mon CSS. La morale de l'histoire, après cette extrêmement longue intro, c'est que tout est important dans une feuille de style. Chaque accolade doit être fermée, chaque ligne doit finir par un point virgule, prenez ça à la légère et vous risquez d'avoir des surprises.

1 ou risquer de crier longtemps dans le vide sur le forum.
2 Advertisement time

]]>http://cow-vault.cowblog.fr/commentaires-2997347.htmlSun, 16 May 2010 09:28:00 +0200http://cow-vault.cowblog.fr/tutoriel-site-du-zero-et-bourdes-2997347.htmlhttp://cow-vault.cowblog.fr/back-to-basics-1-2995510.htmlBack to basics #1http://cow-vault.cowblog.fr/images/ILLUS/basics5-copie-1.png
Ne sera pas utile à grand monde, mais peut-être aux gens qui tombent sur la feuille de style CSS de Cowblog pour la première fois.]]>http://cow-vault.cowblog.fr/commentaires-2995510.htmlTue, 11 May 2010 16:18:00 +0200http://cow-vault.cowblog.fr/back-to-basics-1-2995510.htmlhttp://cow-vault.cowblog.fr/tjpzoom-une-loupe-facile-a-installer-2994477.htmlTjpZoom, une loupe facile à installer.http://cow-vault.cowblog.fr/images/ICONS/zoom.pngUn autre script trouvé sur AjaxDaddy qui ravira les dessineux et les photographes de cette plate-forme : Une loupe. Mais pas n'importe quelle loupe. La démo est plus explicite.

Téléchargez ce fichier (clic droit / enregistrer la cible du lien sous) et déposez le fichier "tjpzoom.js" sur un site d'hébergement de fichiers.
Collez ensuite ce code (en l'adaptant) dans un module HTML libre :

<script type="text/javascript" src="http://adresse/tjpzoom.js"></script>

Ensuite il suffit d'insérer une image sur ce modèle :

<img alt="" src="adresse_de_votre_image" style="width: 450px; height: 300px;" onmouseover="TJPzoom(this, 'adresse_de_votre_image');" />

"width" et "height" sont paramétrables, c'est la taille qu'aura votre image dans l'article.

Edit : Prenez une image d'assez grande résolution pour avoir un bon résultat.

Crédit : http://valid.tjp.hu/tjpzoom
]]>http://cow-vault.cowblog.fr/commentaires-2994477.htmlSun, 09 May 2010 10:19:00 +0200http://cow-vault.cowblog.fr/tjpzoom-une-loupe-facile-a-installer-2994477.htmlhttp://cow-vault.cowblog.fr/deux-astuces-sous-gimp-2993533.htmlDeux astuces sous Gimp.http://cow-vault.cowblog.fr/images/ILLUS/gimp.png
Vous êtes pauvres, mais vous n'avez pas le coeur de pirater une copie de Photoshop, Gimp peut vous changer la vie.. et vous la briser en buguant en plein milieu d'une manip'. Mais là n'est pas le problème. Gimp regorge de ressources, mais il y en a deux que je trouve particulièrement utiles pour personnaliser l'habillage de son blog.

1. Création d'un fond semi-transparent

http://cow-vault.cowblog.fr/images/ILLUS/gimp2.pngOuvrir une nouvelle image. Elle n'a pas besoin d'être énorme, on peut lui attribuer une taille 50x50.
Cliquer sur "Options avancées" et choisir dans "Remplir Avec" l'option transparence.
Valider.

Cliquez sur "Calque" --> "Nouveau calque" et choisissez blanc dans "Type de remplissage de calque" si vous voulez que la couleur dominante soit blanche, sinon choisissez une couleur en cliquant sur le carré du premier plan (1) et cliquez alors sur "Couleur de premier plan" dans "Type de remplissage de calque".

Si vous ne voyez pas la gestion des calques, cliquez sur "Fenêtres" --> "Fenêtres ancrables" --> "Calques". Ici, modifiez l'opacité à votre guise.

Cliquez sur "Enregistrer-sous", rajoutez .png à la fin du nom de votre fichier, cliquez "Enregistrer" puis "Exporter". Dans la fenêtre qui s'ouvre choisissez 0 de niveau de compression.

Le fond est prêt.





2. Installer des brosses
 
Les brosses pour Photoshop sont compatibles avec Gimp. Vous pouvez en trouver des tonnes sur Internet, vous pouvez par exemple utiliser Deviantart (chemin direct) à condition de respecter les règles d'utilisation. Téléchargez le fichier .zip ou .rar, et extrayez simplement le fichier .abr dans le dossier "brushes" qui est dans votre dossier Gimp. En général ce dossier Gimp s'installe dans votre dossier "Utilisateur". Ces brosses sont alors normalement visibles. Vous pouvez actualiser la liste (2)

On peut ensuite se servir des brosses grâce au pinceau.]]>http://cow-vault.cowblog.fr/commentaires-2993533.htmlThu, 06 May 2010 11:26:00 +0200http://cow-vault.cowblog.fr/deux-astuces-sous-gimp-2993533.html