26/09/10

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

03/06/10

Ayez 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.

16/05/10

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

06/05/10

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.

24/04/10

Les couleurs sont importantes dans un site, mais peut-être même plus importantes dans un blog. Qui a envie de lire des pavés si les horreurs pixelisées vous pourrissent la rétine ?
Bien sûr, on peut se contenter du gris, du blanc et du noir. Ca marche toujours. Mais si on veut mettre de la couleur, il faut savoir ce qui ira bien ensemble. Et bien sûr pour cela, j'ai un site pour vous.
Allez voir dans "Browse", puis "Palettes" et vous disposez littéralement de centaines de possibilités. Vous pouvez trier ces dernières par popularité, nouveauté.. Vous trouvez une palette qui vous plaît, cliquez dessus, et descendez plus bas dans la page. Vous trouvez la liste des couleurs utilisées avec leur code.http://cow-vault.cowblog.fr/images/ILLUS/colourlover-copie-1.pngBonus ! Vous surfez sur le web, et une couleur vous tape à l'oeil. Vous n'avez pas envie de faire une capture d'écran, de l'ouvrir dans photofiltre, d'extraire la couleur.. Vous pouvez "pipetter" la couleur directement dans la page web grâce à Colorzilla, une petite extension bien pratique sur Firefox.

<< < | 1 | > >>

Créer un podcast