Personnaliser GayAttitude !

[Goran] Demande d'un gayen : faire tomber de la neige sur un post

Goran — 2007-11-28T16:41:00+01:00

Au d�part le gayen en question souhaitait voir de la neige tomber sur son blog entier (mais je sais pas comment ins�rer un code Javascript dans le bloc CSS pour qu'il soit pris en compte...)

faire tomber de la neige sur un post

Comme pr�c�demment avec le calendrier, nous allons utiliser une iFrame, c'est � dire que nous allons demander au navigateur d'ouvrir une page internet dans un cadre.

1) Exemple

D�sol� vous z'avez pas IE5 !

2) Code de la page appel�e par l'iFrame

Pour cr�er votre page internet, cr�ez un nouveau fichier .txt, collez le code suivant en y modifiant ce que vous jugerez n�cessaire et sauvegardez. Modifiez ensuite l'extension .txt en .html pour en faire une page web.

Ici, collez ce que vous voulez. Vous pouvez utiliser les balises html habituelles, mais n'oubliez pas d'ajouter le code
pour chaque retour � la ligne.

=> en violet : balises encadrant le code HTML, permettant de pr�ciser que c'est ce langage que nous allons utiliser
=> en vert : balises encadrant le corps de la page
=> en rouge : le script javascript faisant appel � une animation h�berg�e sur un site ext�rieur (c'est �a qui permet d'obtenir l'effet "neige"
=> en bleu : une petite pub pour le site en question (et c'est bien naturel)

3) Code de l'iFrame

Sauvegardez votre page internet, h�bergez-la sur un site perso, et copiez-en l'adresse. Une fois dans votre post, collez ce code l� o� vous souhaitez faire apparaitre l'iFrame, en prenant soin de modifier l'adresse de votre page internet.

http://votresiteperso/neige.html" WIDTH=516 HEIGHT=370 scrolling=no frameborder="0">
Désolé vous z'avez pas IE5 !

http://votresiteperso/calendrier.html : Indiquez ici l'adresse de votre page de calendrier upload�e sur votre site perso

WIDTH=516 HEIGHT=370 : Indiquez la largeur (width) et la hauteur (height) de votre cadre. Je vous conseille d'avoir des images de m�me dimension et d'ajouter "16" � la mesure de la largeur et "20" � la mesure de la hauteur de vos images pour qu'elles ne soient pas "rogn�es"

scrolling=no : Cette partie de code �vite d'afficher des barres de d�filement vertical et horizontal � votre cadre. Si vous jugez que ces barres de d�filement sont n�cessaires, vous pouvez supprimer cette partie de code.

frameborder="0" : cette partie permet d'�viter d'afficher la d�limitation de votre cadre, comme �a on a l'impression que votre calendrier "est" directement sur la page, et c'est plus joli quand m�me ;)

Désolé vous z'avez pas IE5 ! : Ce texte s'affiche si la personne qui lit votre blog n'a pas au moins Internet Explorer 5 => elle ne pourra dans ce cas pas voir votre joli calendrier :'(

[Goran] Un image avec un lien dessus

Goran — 2007-11-27T18:56:24+01:00

Un image avec un lien dessus

Ce post a �t� �crit en r�ponse � une question d'un gayen (que je salue au passage).

1) Exemple

Pour l'exemple : voici la photo perso actuelle d'ame, avec un lien vers son blog dessus (un ptit peu de pub, �a faisait longtemps lol)

Le Blog D'Ame !!

2) Le code

Je n'ai tenu compte que de la partie concernant l'image et le lien dessus...

3) Explication du code

en rouge, la partie concernant le lien vers lequel le visiteur doit �tre redirig�. target="new" signifie que le lien s'ouvrira dans une autre page.

en vert, la partie concernant l'adresse de l'image que vous souhaitez afficher. border="0" signifie qu'il n'y aura pas de bordure suppl�mentaire autour de l'image.

Pour adapter ce code � votre cas, changez simplement les adresses du lien et de l'image ^^

c'�tait bien �a la question j'esp�re lol

[Goran] Code des couleurs hexad�cimal

Goran — 2007-11-17T16:25:38+01:00

Code des couleurs hexad�cimal

Mettez un peu de couleur dans vos scripts !! :D

#000000	#000033	#000066	#000099	#0000cc	#0000ff
#330000	#330033	#330066	#330099	#3300cc	#3300ff
#660000	#660033	#660066	#660099	#6600cc	#6600ff
#990000	#990033	#990066	#990099	#9900cc	#9900ff
#cc0000	#cc0033	#cc0066	#cc0099	#cc00cc	#cc00ff
#ff0000	#ff0033	#ff0066	#ff0099	#ff00cc	#ff00ff

#003300	#003333	#003366	#003399	#0033cc	#0033ff
#333300	#333333	#333366	#333399	#3333cc	#3333ff
#663300	#663333	#663366	#663399	#6633cc	#6633ff
#993300	#993333	#993366	#993399	#9933cc	#9933ff
#cc3300	#cc3333	#cc3366	#cc3399	#cc33cc	#cc33ff
#ff3300	#ff3333	#ff3366	#ff3399	#ff33cc	#ff33ff

#006600	#006633	#006666	#006699	#0066cc	#0066ff
#336600	#336633	#336666	#336699	#3366cc	#3366ff
#666600	#666633	#666666	#666699	#6666cc	#6666ff
#996600	#996633	#996666	#996699	#9966cc	#9966ff
#cc6600	#cc6633	#cc6666	#cc6699	#cc66cc	#cc66ff
#ff6600	#ff6633	#ff6666	#ff6699	#ff66cc	#ff66ff

#009900	#009933	#009966	#009999	#0099cc	#0099ff
#339900	#339933	#339966	#339999	#3399cc	#3399ff
#669900	#669933	#669966	#669999	#6699cc	#6699ff
#999900	#999933	#999966	#999999	#9999cc	#9999ff
#cc9900	#cc9933	#cc9966	#cc9999	#cc99cc	#cc99ff
#ff9900	#ff9933	#ff9966	#ff9999	#ff99cc	#ff99ff

#00cc00	#00cc33	#00cc66	#00cc99	#00cccc	#00ccff
#33cc00	#33cc33	#33cc66	#33cc99	#33cccc	#33ccff
#66cc00	#66cc33	#66cc66	#66cc99	#66cccc	#66ccff
#99cc00	#99cc33	#99cc66	#99cc99	#99cccc	#99ccff
#cccc00	#cccc33	#cccc66	#cccc99	#cccccc	#ccccff
#ffcc00	#ffcc33	#ffcc66	#ffcc99	#ffcccc	#ffccff

#00ff00	#00ff33	#00ff66	#00ff99	#00ffcc	#00ffff
#33ff00	#33ff33	#33ff66	#33ff99	#33ffcc	#33ffff
#66ff00	#66ff33	#66ff66	#66ff99	#66ffcc	#66ffff
#99ff00	#99ff33	#99ff66	#99ff99	#99ffcc	#99ffff
#ccff00	#ccff33	#ccff66	#ccff99	#ccffcc	#ccffff
#ffff00	#ffff33	#ffff66	#ffff99	#ffffcc	#ffffff

Source : www.aidenet.com

[Goran] R�ponse � un gayen : identifier les diff�rentes parties du blog

Goran — 2007-11-17T16:03:30+01:00

Identifier les diff�rentes parties d'un blog

Note : Cliquez sur l'image pour l'agrandir...

div.bloc.blocjournal => bloc de journal, il s'agit de vos post
div.bloc.bloccomment => commentaires des gayens
div.bloc.bloccomment.commentvisiteur => commentaire des visiteurs non enregistr�s
#BLOCINFO => bloc avec : votre nom, liens vers votre portrait, vos derniers post, votre abonnement rss
#BLOCARCHIVES => bloc avec : vos archives par mois
#BLOCBLOGOLIST => bloc avec : les blogs de votre blogolist
#BLOC0 => bloc permanent au dessus de votre journal
#BLOC1, #BLOC2, #BLOC3, #BLOC4, #BLOC5 => blocs permanents � droite de votre journal
#NAV => petit bloc en bas de votre journal, vous permettant d'aller vers vos post les plus r�cents / les plus anciens
#COMMENTFORM => bloc apparaissant au moment de poster un nouveau commentaire
#COLONNEGAUCHE => bloc passant en dessous de toute la partie gauche de votre journal
#COLONNEDROITE => bloc passant en dessous de toute la partie droite de votre journal

Le cas du gayen en question

voici ton code :

#CONTENU #COMMENTS
div.bloc.blocjournal, div.bloc.bloccomment, div.bloc.bloccomment.commentvisiteur, #BLOCINFO, #BLOCARCHIVES, #BLOCBLOGOLIST, #BLOC1, #BLOC2, #BLOC3, #BLOC4, #BLOC5, #NAV, #COMMENTFORM #COLONNEGAUCHE
{
background: url('http://otello1999.free.fr/blanc.png');
border: solid 0px;
}

#COLONNEGAUCHE
{
background: url('http://otello1999.free.fr/blanc.png');
border: solid 0px;
}

et voici le mien :

div.bloc.blocjournal, div.bloc.bloccomment, div.bloc.bloccomment.commentvisiteur, #BLOCINFO, #BLOCARCHIVES, #BLOCBLOGOLIST, #BLOC0, #BLOC1, #BLOC2, #BLOC3, #BLOC4, #BLOC5, #NAV, #COMMENTFORM {
background: url('http://gwalap.free.fr/forum/images/divers/blanc.png');
border: solid 0px;
}
#COLONNEGAUCHE, #COLONNEDROITE { background: none}

Ta question : pourquoi le r�sultat est-il diff�rent ?

=> D�j�, on peut enlever #CONTENU #COMMENTS parce que �a sert � rien (il n'y a pas de modifications directement � la suite de ces deux parties)
=> Ensuite, tu fais apparaitre deux fois #COLONNEGAUCHE dans ton code pour lui affecter deux fois les m�mes modifications => on peut enlever le premier
=> Enfin, l� o� j'enl�ve le fonde de #COLONNEGAUCHE et #COLONNEDROITE, tu ajoutes au contraire un fond � #COLONNEGAUCHE... Donc en fait � la place de background: url('http://otello1999.free.fr/blanc.png');, il te faudra �crire background: none;

Donc pour r�sumer, voici le code que tu obtiendras apr�s de telles modifications :

div.bloc.blocjournal, div.bloc.bloccomment, div.bloc.bloccomment.commentvisiteur, #BLOCINFO, #BLOCARCHIVES, #BLOCBLOGOLIST, #BLOC1, #BLOC2, #BLOC3, #BLOC4, #BLOC5, #NAV, #COMMENTFORM
{
background: url('http://otello1999.free.fr/blanc.png');
border: solid 0px;
}

#COLONNEGAUCHE
{
background: none;
border: solid 0px;
}

[Goran] Ajouter des ptits symboles rigolos :D

Goran — 2007-11-16T21:50:12+01:00

Voici quelques symboles que j'ai d�couverts sur le profil de gil30paris

pour faire apparaitre ces symboles, il suffit de taper un petit code � chaque fois. voici un tableau r�capitulatif des quelques codes que j'ai pu rassembler... le tableau n'est pas tr�s align� mais c'est parce que j'utilise un document texte en iFrame sinon le r�sultat s'affiche directement et je peux po donner le code :p => mais il suffit de voir quel signe correspond � quel code via sa description...

D�sol� vous z'avez pas IE5 !

♠ => pique
♥ => coeur
♦ => carreau
♣ => tr�fle
♡ => coeur
♢ => carreau
♧ => pique
♨ => ?
♩ => noire
♪ => croche
♫ => deux croche
♬ => double croche
♭ => b�mol
♯ => di�se

Bien s�r il est possible de faire changer ces signes de couleur de la m�me mani�re qu'on change le texte de couleur...

Un ptit exemple pour la forme : ♩ ♪ ♬ ♪

[Goran] Demande d'un gayen : de la transparence sur son profil

Goran — 2007-11-16T21:19:52+01:00

Voici ton code

#PORTRAITCONTENU, #PORTRAITCONTACT, #PORTRAITPHOTO , #PORTRAITHEADER { background: {background-image: http://www.gayattitude.com/image.jpg; opacity:50;}; }

�a c'est ton code (r�cup�r� directement dans ton CSS, j'ai juste modifi� l'adresse et le nom de l'image � laquelle tu fais appel)

Les erreurs de r�daction du code

#PARTIEAMODIFIER { o� "{" dit "les modifications qu'on va faire porter sur #PARTIEAMODIFIER commencent ici
background: o� "background:" dit "on va modifier l'arri�re plan, et ce qui suit le ":" dit ce qu'on va faire
{o� "{" ouvre les modifications sur les modifications => c'est impossible
background-image: http://www.gayattitude.com/image.jpg; donc ici les modifications sur les modifications, qu'il ne prend pas en compte (logique)
} tu clos les modifications sur les modifications
} tu clos les modifications sur #PARTIEAMODIFIER

=> tu l'auras compris : dans le code il ne faut pas placer des accolades dans les accolades, car �a n'a pas de sens pour l'ordinateur

Ensuite, il n'est pas possible d'avoir ;}; parce que �a voudrait dire :

#PARTIEAMODIFIER { o� "{" dit "les modifications qu'on va faire porter sur tel aspect de #PARTIEAMODIFIER commencent ici => le probl�me : tu ne pr�cise pas quel aspect
(ta ligne de code) ; o� ";" clos une ligne
} o� "}" dit "les modifications qu'on va faire porter sur #PARTIEAMODIFIER finissent ici
; o� ";" clos une ligne

donc en fait le probl�me d�j� c'est que le deuxi�me ";" clos du vent et n'a rien � faire ici => on va supprimer ce truc qui sert � rien

Enfin, tu as oubli� de pr�ciser url( (adresse de ton image) ) quand tu as donn� l'adresse de ton image (�a sp�cifie qu'il s'agit d'une url)

nous �crirons donc : {background-image: url(http://www.gayattitude.com/image.jpg); opacity:50;} � la place de { background: {background-image: http://www.gayattitude.com/image.jpg; opacity:50;}; }

Les erreurs dans les commandes du code

D�j�, ce qui est bon :
#PORTRAITCONTENU, #PORTRAITCONTACT, #PORTRAITPHOTO , #PORTRAITHEADER { (ton code) }

apr�s par contre tu �cris : "background-image: http://www.gayattitude.com/image.jpg;" => �tant donn� que tu avais mal r�dig� ton code, il n'a pas pris en compte ces modifications, sinon il aurait mis ton petit carr� gris opaque � 100% (donc pas du tout transparent) comme fond pour les parties pr�c�demment cit�es.

"opacity:50;" => �a, c'est pour rendre tout opaque � 50% (�a joue pas que sur la transparence du fond)

si tu avais voulu avoir seulement un fond opaque � 50% et le reste normal il faudrait �crire :

#PORTRAITCONTENU, #PORTRAITCONTACT, #PORTRAITPHOTO , #PORTRAITHEADER { background-image: url(http://gwalap.free.fr/temp/blanc.png); }

=> "http://gwalap.free.fr/temp/blanc.png" est l'adresse d'un petit carr� blanc transparent � 50%

si avais consciemment mis ton petit carr� gris opaque en fond et que tout aie soit transparent � 50%, il faudrait �crire :

#PORTRAITCONTENU, #PORTRAITCONTACT, #PORTRAITPHOTO , #PORTRAITHEADER { background-image: url(http://tonimage.png); opacity:50 ;}

voil� !! j'esp�re que j'ai moi-m�me pas fait trop d'erreurs lol !!

[Goran] CSS : jouer sur l'opacit� dans votre journal

Goran — 2007-11-09T21:02:06+01:00

Je me contenterai de mettre les codes sans les expliquer, mais ils sont faciles � comprendre avec quelques tests et en lisant l'article sur la modification du profil.

Modifier l'opacit� de votre journal

Ce premier code vous permettra de rendre vos articles un peu moins opaques, de sorte que le fond de votre journal s'en trouvera visible par transparence. Cela affectera �galement le texte et les images, ainsi que tout ce que vous posterez.

table
{
filter:alpha(opacity=85); ..-opacity:0.85; opacity:0.85; -khtml-opacity:0.85;
}

Vous pouvez modifier la valeur de l'opacit� � votre convenance...
exemple : le blog d'ame

Un fond � l'opacit� modifi�e pour les cadres de votre journal

Ce code ajoute une image de fond � l'opacit� modifi�e (vous pouvez en cr�er une et la mettre � la place si vous le souhaitez), sans modifier l'opacit� des �l�ments textuels ou iconographiques des messages. De plus tous les cadres du journal sont affect�s.

div.bloc.blocjournal, div.bloc.bloccomment, div.bloc.bloccomment.commentvisiteur, #BLOCINFO, #BLOCARCHIVES, #BLOCBLOGOLIST, #BLOC0, #BLOC1, #BLOC2, #BLOC3, #BLOC4, #BLOC5, #NAV, #COMMENTFORM {
background: url('http://img.ga.dendrocom2.com/white90.png');
border: solid 0px;
}
#COLONNEGAUCHE, #COLONNEDROITE { background: none}

exemple : mon blog (sauf que mon image de fond a une opacit� de 50%, contre 90% pour l'image propos�e ici)

Je pense peut-�tre faire un post plus tard d�taillant les diff�rentes parties du journal comme je l'ai fait dans mon post sur la personnalisation du profil � l'�tape 1.

[Goran] CSS : Personnaliser le fonds, les cadres et le texte votre profil

Goran — 2007-11-06T19:52:15+01:00

Le but de ce tutoriel sera de vous proposer toute une gamme de codes pour personnaliser votre profil.

Etape 1 : situer les diff�rents �l�ments du portrait

Il s'agit ici de vous permettre de situer les �l�ments auxquels nous feront appel dans ce tutoriel.

D'apr�s l'image ci-dessous, chaque portrait est compos� :

A) d'un corps de page sur lequel tous les autres �l�ments sont dispos�s (en rouge) appel� body

B) d'un header (cadre en haut cern� de vert clair, au fond transparent par d�faut) appel� #PORTRAITHEADER
Ce header contient :
1) votre avatar (la petite fleur) appel� #PORTRAITHEADER IMG
2) votre pseudo qui correspond au code #PORTRAITHEADER H1
3) Une br�ve description avec votre nom, votre sexe, votre orientation sexuelle, votre �ge et si vous �tes ou non actuellement connect� qui correspond au code #PORTRAITHEADER P

C) d'un cadre contenant votre pr�sentation (en rose avec des bordures bleues) appel� #PORTRAITCONTENU
Votre pr�sentation contient :
1) une s�rie de t�te de rubriques (qualit�s, d�fauts, en ce moment, j'aime, j'aime pas, sexe, recherche, contact, interview,groupes, friendlist r�ciproque, guestbook, participer au guestbook) qui correspondent au code #PORTRAITCONTENU H2
2) des liens (contact / historique / blog / r�ponses pr�c�dentes) qui correspondent au code #PORTRAITCONTENU A
3) des indications par d�faut en italique (par exemple dans la rubrique "en ce moment" : j'�coute, je regarde, je lis, je joue ext... => on en retrouve aussi dans la rubrique "sexe" et "interview") qui correspondent au code EM
4) des fl�ches (devant "contact", "historique", "blog sur gayattitude", "si j'�tais..." et "questionnaire de proust") qui correspondent au code .link1
5) des photos persos qui correspondent au code #PORTRAITCONTENU IMG
6) du texte (le texte en noir = ce que vous remplissez dans les rubriques) qui correspond au code #PORTRAITCONTENU P

Etape 2 : Comprendre les �l�ments de base du CSS

Prenons l'exemple du body

Si vous souhaitez modifier l'arri�re plan de votre, page, vous devrez :
1) indiquez que vous voulez modifier cette partie de votre page, en annon�ant votre code par body
2) introduire les modifications que vous souhaitez affecter � l'arri�re plan par une accolade {, et les clore en fermant l'accolade }
3) pour signifier la fin d'une ligne de code � l'int�rieur de cette accolade, vous devrez ajouter un point-virgule ; � la fin. Ainsi, vous pouvez organiser la mise en page de votre code librement.

exemple :

Ainsi ce code :

body
{
ligne de code pour affecter un effet � l'arri�re plan ;
ligne de code pour affecter un effet � l'arri�re plan ;
ligne de code pour affecter un effet � l'arri�re plan ;
}

aura le m�me effet que ce code :

body{ ligne de code pour affecter un effet � l'arri�re plan ;ligne de code pour affecter un effet � l'arri�re plan ;ligne de code pour affecter un effet � l'arri�re plan ; }

Pour modifier n'importe quel �l�ment de votre profil dont la liste non exhaustive a �t� d�termin�e � l'�tape 1, remplacez simplement body par l'�l�ment qui vous int�resse

Ainsi, pour modifier les liens du cadre #PORTRAITCONTENU, qui correspondent au code #PORTRAITCONTENU A, le code prendra la forme suivante :

#PORTRAITCONTENU A
{
ligne de code pour affecter un effet aux liens;
ligne de code pour affecter un effet aux liens;
ligne de code pour affecter un effet aux liens;
}

Etape 3 : Modifier les fonds

A) Le fond du body

Si vous souhaitez ajouter un fond color� uni, ajoutez simplement le code suivant en rempla�ant couleur par la couleur de votre choix :
body { background-color: couleur; }

Si vous souhaitez afficher une image � l'arri�re plan, consultez ce post qui vous donnera les principales modifications possibles pour jouer sur une image d'arri�re plan.

B) Le fond du #PORTRAITHEADER et du #PORTRAITCONTENU

Pour ajouter une couleur ou une image d'arri�re plan � votre fond, remplacez simplement body par #PORTRAITHEADER ou #PORTRAITCONTENU selon la partie que vous souhaitez modifier.

C) Il peut cependant �tre int�ressant de jouer sur la transparence de ces fonds :

1) rendre le fond totalement transparent
Si vous faites cela, le fond du ou des �l�ments que vous choisirez sera transparent, de sorte que le fond du body apparaitra directement dans ces cadres. Par exemple, d'apr�s l'image propos�e pr�c�demment, le fond du #PORTRAITHEADER est compl�tement transparent, ce qui fait apparaitre le fond rouge du body.

la ligne de code : background: transparent;

Par exemple, pour un #PORTRAITCONTENU transparent sans aucune autre modification, le code sera : #PORTRAITCONTENU { transparent; }

2) jouer sur l'opacit� d'un cadre entier

Il est �galement possible de jouer sur l'opacit� d'un de de ces deux cadres, cependant cette modification affectera non seulement le fond, mais �galement tout ce qui se trouvera dans le cadre (ce qui peut poser des probl�mes de lisibilit�)...

la ligne de code : opacity:value; o� value est la valeur de l'opacit� de l'�l�ment. Z�ro correspondrait � un cadre totalement transparent, et 100 � un cadre totalement opaque.

Par exemple, pour un #PORTRAITCONTENU d'une opacit� de 50% sans aucune autre modification, le code sera : #PORTRAITCONTENU { opacity:50 ; }

3) jouer sur l'opacit� du fond du cadre uniquement

Pour cela, nul besoin de code pour g�rer la transparence, mais d'une image de fond (blanc par exemple) plus ou moins transparent. Par d�faut, votre profil utilise un carr� blanc d'une opacit� de 90% au format png. J'ai pour ma part utilis� dans mon profil un carr� blanc d'une opacit� de 50%, que voici :

Pour r�aliser une image en jouant sur son opacit�, je vous conseiller d'utiliser le logiciel gratuit Gimp. Voici pour vous aider une image figurant l'endroit � partir duquel l'opacit� d'un calque est g�r�e :

D) Le fond d'un texte

Vous pouvez �galement modifier la couleur de fond d'un texte, qui correspondra � une sorte de surlignage de votre texte. Pour cela, remplacez body par l'�l�ment textuel dont vous souhaitez modifier le fond (par exemple #PORTRAITCONTENU P) dans le code qui vous a �t� propos� dans le A) de cette �tape.

Par exemple : #PORTRAITCONTENU P { background-color: purple; }

Etape 4 : Modifier les bordures des cadres

Vous pouvez modifier les bordures d'� peu pr�s tous les �l�ments d�taill�s dans l'�tape 1. Par exemple, la bordure du #PORTRAITHEADER a �t� ajout�e, grossie et color�e pour donner cette bordure verte.

le code : border: solid valuepx color;
solid => cr�� la bordure si elle est inexistante
valuepx => grosseur de la bordure o� "value" est une valeur chiffr�e en pixels (si la valeur est z�ro, la bordure sera inexistante)
color => couleur de la bordure o� "color" est remplac�e par la couleur de votre choix

Par exemple, pour cr�� un cadre vert de 3 pixels autour du #PORTRAITHEADER sans aucune autre modification, le code sera : #PORTRAITCONTENU { border: solid 3px green; }

Etape 5 : Modifier les textes

A) Modifier la police

code : font-family : police ; o� police est remplac�e par la police de caract�re de votre choix

B) Modifier la taille de la police

code : font-size: largeur ; o� largeur est remplac�e par la taille d�sir�e. Il existe des valeurs pr�d�termin�es : xx-small, x-small, small, medium, large, x-large, xx-large

C) Modifier l'�paisseur de la police

code : font-weight: bold ; o� bold vous permet d'obtenir un texte �crit en gras.

D) Modifier la couleur de la police

code : color: couleur ; o� couleur est remplac� par la couleur de votre choix.

[Goran] CSS : personnalisez les commentaires en fonction de vos visiteurs

Goran — 2007-11-04T18:29:42+01:00

Ce tutoriel vous expliquera comment modifier le fond et la police d'�criture des commentaires de vos visiteurs...

Exemple

=> J'ai modifi� mes commentaires et ceux d'ame sur mon blog : pour l'exemple cliquez ici.

Comme vous pouvez le voir j'ai mis pour les commentaires d'ame :

=>le fond suivant (mix entre l'ange au sourire de Reims et d'un ciel �toil� issu des Tr�s Riches Heures du duc de Berry) :

=>Une police d'�criture large utilisant cette couleur : #80FFBF

Pour mes propres commentaires :

=>le fond suivant (issu des Tr�s Riches Heures du duc de Berry) :

=>Une police d'�criture large utilisant cette couleur : green

Etape 1 : r�aliser / s�lectionner une image de fond

Je vous conseille d'utiliser une image au format gif ou jpg, d'une largeur de 494 pixels, d'une hauteur pas trop importante (sinon on ne verra pas assez l'image). Il est pr�f�rable que votre image ne soit pas trop color�e, plut�t dans des tons unis, pour que le texte qui apparaitra dessus soit lisible (par exemple les images que j'ai choisies sont un peu limites pour �a dans leur marge droite...)

Pour manipuler vos images, je vous conseille Irfanview et Gimp qui sont tous les deux gratuits et simples d'utilisation.

Etape 2 : uploader votre image de fond sur GA

Pour cela, allez dans "modifier votre journal" > "mise en page" et cliquez sur n'importe quel petit carr� gris vous permettant de modifier les fonds des cadres de votre journal. Une page s'ouvre : cliquez sur "nouvelle image" : il ne vous reste plus qu'� la chercher sur votre ordinateur et � cliquer sur "envoyer". Suite � cela, r�cup�rez l'adresse de votre image qui vous donn�e et copiez-la quelque part (dans un fichier texte par exemple).

Etape 3 : Modifier le CSS de votre journal

Toujours dans "modifier votre journal" > "mise en page", cherchez le carr� de CSS et ajoutez � la fin le code suivant :

#CONTENU #COMMENTS DIV.bloc.bloccomment.commentdenomduvisiteur {
color: green ;
font-family: Georgia ;
font-weight: bold ;
background: url('http://adressedevotreimage.jpg')
no-repeat ;
background-color : black ;
}

nomduvisiteur : vous devez mettre � la place le nom exact du visiteur dont vous souhaitez personnaliser les commentaires.
green : Il s'agit de la couleur du texte du commentaire... Ici, cette couleur est vert, mais vous pouvez mettre celle qui vous plait (quelques suggestions ici).
Georgia : Il s'agit de la police d'�criture qui sera utilis�e dans le commentaire
bold : Cette ligne permet d'avoir un texte en gras : vous pouvez la supprimer si vous n'avez pas besoin que votre texte apparaisse en gras.
http://adressedevotreimage.jpg : Il s'agit de l'adresse de votre image, celle qui vous avez copi� pr�c�demment.
no-repeat : pr�cise que l'image de fond ne se r�p�tera pas. Pour voir toutes les possibilit�s du background, consulter ce post.
black : Pr�cise la couleur de fond, sous l'image. Si votre image est trop petite pour l'affichage, le fond sera visible. Quelques exemples de couleurs ici

Adaptez ce code pour chaque gayen dont vous souhaitez personnaliser les commentaires sur votre blog...

[Goran] Appliquez des effets � votre texte via le CSS

Goran — 2007-11-04T13:04:57+01:00

Voici un petit tutoriel pour r�aliser les effets suivants sur votre texte :
-souligner votre texte
-souligner votre texte par le dessus
-encadrer votre texte par une ligne au dessus et une ligne en dessous
-faire clignoter votre texte

Exemple

Mettons que Marcel souhaite faire un post sur l'artiste contemporain Piet Mondrian pour montrer � quel point il est cultiv� et branch� : pour pas avoir l'air de faire que recopier un article de Wikipedia, il va devoir s'approprier un peu le texte en cr�ant une ambiance...

PIET MONDRIAN

Il est avec les russes Kandinsky et Kasimir Malevitch parmi les premiers peintres � s��tre exprim� en utilisant un langage graphique abstrait. L�abstraction fut un courant artistique majeur du XXe si�cle. La r�putation de Mondrian s�est construite sur environ 250 �uvres abstraites, r�alis�es de 1917 � 1944.

� ses d�buts, il s�est d�abord distingu� comme un grand traducteur de la nature et de la lumi�re, que l�on peut consid�rer comme un successeur de Jongkind. Ainsi, Moulin au soleil (1908) peut �tre rapproch� de En Hollande, des barques pr�s d�un moulin (1868) tout en soulignant l�originalit� de l�angle de vue et la transcendance du traitement de la lumi�re par Mondrian. Peu � peu, ses travaux sur la lumi�re et la perspective l�ont conduit vers une abstraction croissante.

Mondrian fut un contributeur tr�s important de la revue hollandaise De Stijl fond�e par Theo van Doesburg, et participa au rayonnement europ�en du cubisme par ses liens avec des artistes �tablis � Paris, comme Picasso, et par ses contributions aux expositions d�Amsterdam avant la Premi�re Guerre mondiale. Tr�s influenc� par le cubisme, il affirma toutefois sa personnalit� par une grande rigueur dans le traitement des perspectives. Il travailla � la fin de sa vie essentiellement avec des couleurs primaires : le rouge, le jaune et le bleu, qu�il associe au blanc qui lui sert de fond et au noir qui d�limite les couleurs entre elles. Il a structur� ses �uvres de mani�re g�ometrique en utilisant essentiellement des formes rectangulaires

Exposition MONDRIAN DE 1892 � 1914 au mus�e d'Orsay ! (2002)

Le code

Le code du CSS

.dessus {text-decoration: overline ; }

.barre {text-decoration: line-through ; }

.dessous {text-decoration: underline ; }

.clignote {text-decoration: blink ; }

.tout { text-decoration:underline overline ; }

.none {text-decoration: none ; }

En rouge = il s'agit du nom de la classe : vous pouvez choisir celui que vous voulez.
En bleu = la ou les propri�t�s que vous souhaitez appliquer � votre texte.

overline : ligne au dessus du texte (exemple)
line-through : ligne en travers du texte (exemple)
underline : ligne au dessous du texte (exemple)
blink : clignotement du texte (exemple)
underline overline : ligne en dessous et au dessus du texte (exemple)
none : aucun effet sur le texte (exemple)

Comme vous l'aurez constat� avec underline overline, il est possible de cumuler plusieurs effets : c'est � vous de d�finir des classes comme vous l'entendez.

Le code dans votre post

TEXTE AVEC LIGNE AU DESSUS
TEXTE AVEC LIGNE EN TRAVERS
TEXTE AVEC LIGNE EN DESSOUS
TEXTE QUI CLIGNOTE
TEXTE AVEC LIGNE AU DESSUS ET EN DESSOUS
TEXTE SANS EFFET

TEXTE AVEC LIGNE AU DESSUS
barre">TEXTE AVEC LIGNE EN TRAVERS
dessous">TEXTE AVEC LIGNE EN DESSOUS
clignote">TEXTE QUI CLIGNOTE
tout">TEXTE AVEC LIGNE AU DESSUS ET EN DESSOUS
none">TEXTE SANS EFFET

En rouge = il s'agit du nom de la classe : celui que vous avez d�fini dans votre code CSS.

Aller plus loin

Cumuler des effets dans la balise "font"

Il est possible de cumuler plusieurs modifications de votre police de caract�re : par exemple, pour avoir un texte vert qui clignote...

TEXTE VERT QUI CLIGNOTE

TEXTE VERT QUI CLIGNOTE

Appliquer des modifications au paragraphe entier

Pour appliquer vos modifications � un paragraphe entier, utilisez les balises

Piet Mondrian est aujourd'hui consid�r�, de fa�on unanime, comme l'un des plus grands peintres du XX�me si�cle, le cr�ateur d'un nouveau langage fond� sur l'abstraction. Il est admir� pour la beaut� de son oeuvre, la coh�rence de son parcours, la profondeur de sa pens�e, tellement riche de possibilit�s et de cons�quences.

ma source : aidenet.com

[homocity] In memoriam

homocity — 2007-11-01T19:32:47+01:00

Il s'appelait Christophe, c'�tait "Baby Diamon"...

[Goran] CSS : jeux sur les liens...

Goran — 2007-10-15T21:13:53+01:00

Surlignages d'un lien

Ce tutoriel a pu voir le jour gr�ce � la tr�s aimable collaboration d'Ame que je remercie pour ses bonnes id�es et son aide en mati�re de codes.

Il sera question ici de faire des liens personnalisables au niveau de leur couleur de fond (impression de surlignage).

Les codes pour modifier tous les liens de la page

Allez dans la partie "mise en page" de votre journal. Vous collerez dans le carr� CSS le code que vous aurez choisi en fonction des possibilit�s expos�es ci-dessous...

Le code

A:link {Background-Color:white;}
A:hover{Background-Color:green;}
A:active {Background-Color:orange;}
A:visited {Background-Color:purple;}

Explication du code

=> "Background-Color" signifie "couleur de fond" (c'est ce que j'appelle "surlignage")
=> "A" sp�cifie qu'il s'agit d'un code qui s'applique aux liens

=> "link" signifie que le code qui suit s'applique aux liens standard
=> "hover" signifie que le code qui suit s'applique aux liens survol�s
=> "active" signifie que le code qui suit s'applique aux liens actifs
=> "active" signifie que le code qui suit s'applique aux liens inactifs

modifiez la couleur correspondante slon votre bon plaisir pour que la couleur de fond du lien change. Par exemple, la partie de code "A:hover{Background-Color:green;}" aura pour effet un surlignage bleu de vos liens lorsque votre souris ou celle d'un visiteur le survolera.

Les codes pour modifier certains liens de la page

Le code suivant vous propose de faire en sorte que seuls certains liens que vous aurez d�termin�s auront un surlignage sp�cifique. Pour cela, nous allons d�finir 3 types de liens.

Le type 1
Lien visit�
Lien non visit�

Le type 2
Lien visit�
Lien non visit�

Le type 3
Lien visit�
Lien non visit�

Explications :
Vous l'avez constat� : ces trois types de liens r�agissent diff�remment. Pour obtenir ce r�sultat, nous avons sp�cifi� trois types de "class" (=apparence, en fin de comptes) diff�rentes pour les liens dans le CSS. Voici le code :

A.type1:link {Background-Color:white;}
A.type1:hover{Background-Color:blue;}
A.type1:active {Background-Color:white;}
A.type1:visited {Background-Color:red;}

A.type2:link {Background-Color:pink;}
A.type2:hover{Background-Color:purple;}
A.type2:active {Background-Color:yellow;}
A.type2:visited {Background-Color:green;}

A.type3:hover{Background-Color:yellow;}
A.type3:visited {Background-Color:blue;}

Vous pouvez ainsi d�finir autant de types de class que vous le d�sirez pour vos liens...

Seulement il faudra pr�ciser dans votre code qui cr�era le lien que vous souhaitez voir s'appliquer un certain type de "class" � ce lien.

Exemples :
class="type1" href="http://votrelien.html/">Lien visit�
class="type2" href="http://votrelien.html/">Lien visit�
class="type3" href="http://votrelien.html/">Lien visit�

[Goran] CSS : jeux sur l'image de fond

Goran — 2007-10-11T14:51:56+01:00

Jouer sur son image de fond via le CSS

Envie de mettre une image de fond fixe ? C'est possible gr�ce aux conseils avis�s et attentifs d'Ame que je remercie encore pour son aide pr�cieuse ^^

Exemple

Notre exemple sera donc le blog d'Ame qui se trouve ici : lorsque vous faites d�filer les barres de d�filement, l'image reste fixe, et seul le contenu de la page d�file.

Le code, et son explication

Proc�dure : Afin d'obtenir la m�me chose, il vous suffit d'aller dans la partie "mise en page" de votre blog ou de votre portrait et de coller le code que vous aurez choisi dans l'endroit pr�vu pour le CSS. Ensuite enregistrez (en haut � droite) et les changements s'afficheront imm�diatement.

le code :

body
{
background-image: url(http://votreimagedefond.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-color: black;
background-position: 100% 100%;
}

Explications :

"body {}" pr�cise que nous nous occupons du corps du texte.
les ";" permettent de clore une ligne de code pour la s�parer de la suivante

background-image: url(http://votreimagedefond.jpg); => En rouge, c'est l'adresse de votre image (si vous ne souhaitez pas vous compliquer la vie, modifiez seulement cette partie)
ATTENTION : faites attention � ne pas choisir une image trop "lourde" pour que votre blog ne mette pas mille ans � se charger...

background-attachment: fixed; => Cette partie de code d�termine la fa�on dont l'image est ancr�e � la page (comme un b�teau c'est facile ^^). Si vous mettez "fixed", l'image ne bougera pas m�me si vous utilisez les barres de d�filement, alors que si vous mettez "scroll" ou que vous supprimez cette ligne de code, l'image d�filera.

background-repeat: no-repeat; => C'est avec cette partie de code qu'on d�termine si l'image se r�p�tera, et la fa�on dont elle se r�p�tera. Utilisez "no-repeat" pour une image qui ne se r�p�te pas, "repeat-x" pour la faire se r�p�ter horizontalement ou "repeat-y" pour la faire se r�p�ter verticalement. Vous pouvez aussi choisir de la faire se r�p�ter � l'infini avec "repeat" ou en supprimant cette ligne de code.

background-color: black; => cette partie de code vous permettra de d�finir une couleur de fond, qui occupera l'arri�re-plan de votre image. Par exemple, si vous avez une image aux bordures oranges, il peut �tre appropri� de mettre un arri�re-plan orange. Pour les valeurs de ce code, consultez ce post.

background-position: center right; => Cette partie de code vous permet de pr�ciser la position de votre image initiale.
Voici la liste des valeurs que peut prendre cette variable :
top left : coin sup�rieur gauche
top center : partie m�diane sup�rieure
top right : coin sup�rieur droit
center left : � gauche au milieu
center center : centre
center right : � droite au milieu
bottom left : coin inf�rieur gauche
bottom center : partie m�diane inf�rieure
bottom right : coin inf�rieur droit
Vous pouvez �galement pr�ciser des valeurs chiffr�es exprim�e en pixels ou en pourcentages :
x% y% (le coin sup�rieur gauche a pour valeur 0% 0%)
xpos ypos (le coin sup�rieur gauche a pour valeur 0 0)

[Goran] Changer d'image tous les mois / tous les jours

Goran — 2007-10-10T13:11:47+01:00

Envie de faire un ptit calendrier ? De changer d'image tous les jours ? (d'apr�s une id�e originale d'Otaku ^^ merci � lui)

C'est possible !

Commen�ons par un calendrier : admettons que dans un de ses post ou dans un de ses blocs permanents notre ami Roger souhaitie afficher une image diff�rente par mois. En effet, ce petit farceur a r�cup�r� ici des images d'agriculteurs nus diff�rentes pour chaque mois.

Voil� ce qu'il obtiendra :

Exemple de Roger : changement d'image tous les mois

Désolé vous z'avez pas IE5 !

Personnellement je pr�f�re Mr Novembre.

Consid�rations pr�liminaires

Pour changer d'image en fonction d'une dur�e de temps (tous les jours, les mois, les heures, etc...) il faut in�vitablement faire appel au Javascript pour parvenir � ses fins. En tout cas, l'html n'offre pas de telles possibilit�s. Il faudra donc modifier des partie de script qui se trouvent entre les balises et de la page. Or nous n'avons pas � ma connaissance acc�s cette partie de la page lors de la r�daction de nos post. En effet, le contenu de la page que nous modifions se trouve entre les balises et (cette partie correspond au corps de la page).

Donc il va falloir ruser h�h�h�...

Puisque nous avons besoin d'acc�der � la partie comprise entre les balises et de la page, nous allons tout simplement choisir d'appeler une autre page au sein de la page du post. Je m'explique : nous allons d�finir un quadrilat�re dans lequel nous dirons � l'ordinateur d'afficher une autre page internet. C'est sur cette page internet que se trouvera le calendrier, et non directement sur la page de blog.

Etape 1 : cr�er une page web

Ca, c'est la partie la plus compliqu�e. D�j�, il faut savoir o� vous allez h�berger vos images et votre page web de calendrier.

D'abord, cr�ons notre page web : pour cela, cr�ez un nouveau document texte (.txt) => donnez lui que vous voulez on s'en balance. Ouvrez-le.

L�, il va falloir copier-coller le code ci-dessous, que nous allons modifier par la suite pour l'adapter � votre cas en particulier. Il para�t long et compliqu�, mais vous n'avez pas besoin de le comprendre � fond pour l'utiliser.

image

En rouge, vous voyez l'adresse des images du calendrier. C'est la seule chose que vous aurez � modifier dans le code. Uploadez les images sur votre site perso, mettez les adresses de vos images dans le fichier texte, et sauvegardez.

Une fois que c'est fait, fermez ce fichier texte, et renommez-le en modifiant l'extension en ".html" (c'est donc un fichier du type "calendrier.html"). Cela fait, uploadez le sur votre site perso � son tour.

Et voil�, vous avez cr�� votre page de calendrier. Si tout va bien, lorsque vous ouvrez cette page, l'image avec le mois du moment s'affiche dans une page toute blanche.

Etape 2 : appeler cette page web dans votre post

Nous allons faire usage d'une iframe, c'est � dire comme je l'ai d�j� expliqu� plus haut, un cadre dans lequel on appellera la page que vous avez cr��e pr�c�demment.

Voici le code de base � ins�rer dans votre blog, � l'endroit o� vous souhaitez que votre iFrame apparaisse :

http://votresiteperso/calendrier.html" WIDTH=516 HEIGHT=370 scrolling=no frameborder="0">
Désolé vous z'avez pas IE5 !

Explication du code

http://votresiteperso/calendrier.html : Indiquez ici l'adresse de votre page de calendrier upload�e sur votre site perso

WIDTH=516 HEIGHT=370 : Indiquez la largeur (width) et la hauteur (height) de votre cadre. Je vous conseille d'avoir des images de m�me dimension et d'ajouter "16" � la mesure de la largeur et "20" � la mesure de la hauteur de vos images pour qu'elles ne soient pas "rogn�es"

scrolling=no : Cette partie de code �vite d'afficher des barres de d�filement vertical et horizontal � votre cadre. Si vous jugez que ces barres de d�filement sont n�cessaires, vous pouvez supprimer cette partie de code.

frameborder="0" : cette partie permet d'�viter d'afficher la d�limitation de votre cadre, comme �a on a l'impression que votre calendrier "est" directement sur la page, et c'est plus joli quand m�me ;)

Désolé vous z'avez pas IE5 ! : Ce texte s'affiche si la personne qui lit votre blog n'a pas au moins Internet Explorer 5 => elle ne pourra dans ce cas pas voir votre joli calendrier :'(

M�me chose pour les jours de la semaine...

La seule chose qui change, c'est le code de la page html que vous appelez dans votre iframe.
Voici le code adapt� pour les jours de la semaine (attention ! La semaine commence avec le dimanche !) :

image

Et voilou ^^

Enjoy !

[homocity] MA�TRES D'EUX M�MES ET DE LEUR DESTIN.

homocity — 2007-10-10T00:00:25+01:00

Le cercle des poetes disparus - Capitaine mon Capitaine!
envoyé par Truckee1846

Apr�s un dernier signe de t�te, il quitta la pi�ce, les laissant debout sur leurs pupitres.
MA�TRES D'EUX M�MES ET DE LEUR DESTIN.

N.H. Kleinbaum
Auteur du Cercle des Po�tes Disparus