CSS : modifier la taille des cadres

C'est une question toute bête sur laquelle je ne m'étais pas du tout penché jusqu'à présent : comment faire par exemple pour que le bloc du journal soit plus petit ?

Il s'agit tout bêtement des attributs "width" et "height" (il suffisait d'y penser plutôt que de s'escrimer sur "size" => y a des fois vraiment.... :D)

1) Comment Procéder ?

Tout d'abord : qu'est-ce qu'un cadre ? Il s'agit de ces "rectangles" qui ont chacun une fonction précise et peuvent s'englober les uns-les autres. Par exemple dans le journal il y a les cadres contenant les commentaires, le cadre contenant les archives, etc etc... Pour les modifier, il faudra d'abord trouver comment le ou les cadre(s) qui vous intéresse(nt) sont appelés dans le code CSS..

Il faut identifier donc le ou les différents cadres que vous souhaitez redimensionner. Pour cela, je vous propose d'aller jeter un oeil dans cet article sur les différents éléments du portrait ou cet article sur les différents éléments du journal.

Ensuite, une fois que vous avez choisi et trouvé sur quoi va porter les modifications que vous souhaitez apporter, il suffira simplement de modifier leur propriétés de longueur (height) et de largeur (width), exprimées en pixels (px) ou en pourcentages (%).

2) Exemples

Par exemple, Roger (encore lui !!) souhaite que tout ce qui se trouve du côté gauche soit réduit à une largeur de 100 pixels sur son journal => son code, à placer dans le carré CSS qui se trouve dans "modifier votre journal > mise en page" sera donc :

div.bloc.blocjournal, div.bloc.bloccomment, div.bloc.bloccomment.commentvisiteur { width: 100px; }

Un exemple avec des pourcentages :

div.bloc.blocjournal, div.bloc.bloccomment, div.bloc.bloccomment.commentvisiteur { width: 50%; }

3) Mises en garde

Perso, je trouve que c'est pas une super idée de modifier ces paramètres, parce que par défaut les cadres se déploient de manière à rendre votre profil et votre journal clair et lisible, mais bon, puisqu'on me l'a demandé c'est que ça doit trouver son utilité quelque part :)

EDIT : je précise également que réduire la taille d'un cadre de cette manière ne décalera pas les autres pour le peu que j'ai expérimenté...

enjoy !

Pour en finir avec le temps béni de l'homosexualité dans l'antiquité

Ce qui suit n'est que la citation (sauf le titre) de ce site qui lui-même cite un article de Paul Veyn (cf plus bas). L'image provient également de ce site, qui possède un certain nombre de très bons articles (je vous conseille la prostitution au Moyen Age :p)

"Prendre du plaisir virilement ou en donner servilement: c'est là la seule distinction qui importe à Rome, sans souci du sexe du partenaire. D'où une cartographie des plaisirs et des infamies fort étrange.

L'homophilie active est partout présente dans les textes romains. Catulle se vante de ses prouesses et Cicéron a chanté les baisers qu'il cueillait sur les lèvres de son esclave secrétaire. Selon ses goûts, chacun optait pour les femmes, les garçons, ou les unes et les autres. Virgile avait le goût exclusif des garçons; l'empereur Claude, celui des femmes; Horace répète qu'il adore les deux sexes. Et Antinoos, mignon de l'empereur Hadrien, reçut souvent un culte officiel après sa mort précoce.

L'amour qu'on dit grec pourrait donc être dit aussi légitimement romain. A Rome, l'éphèbe de naissance libre, objet de l'amour des Grecs, était remplacé par l'esclave qui servait de mignon. L'important demeurait de respecter les femmes mariées, les vierges et les adolescents de naissance libre. La loi Scantinia, qui date de 149 avant notre ère, confirmée par la législation augustéenne, protège contre le viol l'adolescent libre au même titre que la vierge de naissance libre.

En ce monde, on ne classait pas les conduites d'après le sexe, amour des femmes ou des garçons, mais en activité ou passivité : être actif, c'est être un mâle, quel que soit le sexe du partenaire dit passif. Prendre du plaisir virilement ou en donner servilement, tout est là.

La femme est passive par définition, à moins d'être un monstre. Les enfants ne comptent pas davantage, à la condi-tion que l'adulte ne se mette pas à leur service pour leur donner du plaisir et qu'il se borne à en prendre. Un mépris colossal accablait en revanche l'adulte mâle et libre qui était homophile passif ou, comme on disait, impudicus (tel est le sens méconnu de ce mot).

L'impudicité est une infamie

Tout cela explique une deuxième obsession, inattendue. Car il y avait bien une conduite sexuelle qui était absolument honteuse : la fellation. Celle-ci n'est-elle pas le comble de l'abaissement, en effet? Elle prend passivement son plaisir à en donner à autrui et elle ne refuse servilement à autrui la possession d'aucune partie du corps.

Le sexe ne fait rien à l'affaire, car il était une autre conduite non moins infâme et qui les obsédait autant: le cunnilingue. Quant à l'homophilie féminine, elle était catégoriquement rejetée. L'opprobre était surtout jeté sur l'amante active : une femme qui se prend pour un homme, c'est le monde renversé. Horreur égale à celle des femmes qui "chevauchent " les hommes, dit Sénèque.

D'où vient cette étrange cartographie des plaisirs et des infamies? D'au moins trois causes qu'il ne faut pas confondre : Rome est une société " machiste ", comme tant d'autres. Ensuite, ce virilisme tient à la partie cachée de l'iceberg politique des sociétés antiques ; recourons à l'analogie, pour faire vite, et évoquons la haine de la mollesse dans les groupes militaristes ou encore dans les sociétés de pionniers qui se sentent au milieu d'un environnement dangereux.

Enfin, Rome est une société esclavagiste où le maître exerce le droit de cuissage. " L'impudicité [c'est-à-dire la passivité] est une infamie chez un homme libre ", écrit Sénèque le Père; " chez un esclave, c'est son devoir le plus absolu envers son maître; chez l'affranchi, cela demeure un devoir moral de complaisance. "

Notre lecteur se demande peut-être, pour finir, comment il se fait que l'homophilie ait été si répandue. Faut-il penser qu'une particularité de la société antique, par exemple le mépris de la femme, y multipliait artificiellement les homophiles, ou qu'au contraire une répression différente, moindre au total, laissait se manifester une homophilie qui serait une des possibilités de la sexualité humaine? La seconde réponse est sans doute la bonne.


Texte de Paul Veyn
Tiré de la revue "Les collections de l'Histoire" de juin 1999. "

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

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

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



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.

<HTML> <BODY> <script language="javascript" src="http://images.topflood.com/neige-perso.php"></script> <noscript>Top Flood: aide pour votre forum.</noscript> Ici, collez ce que vous voulez. Vous pouvez utiliser les balises html habituelles, mais n'oubliez pas d'ajouter le code <br /> pour chaque retour à la ligne. </BODY> </HTML>

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

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

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 :'(

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)



2) Le code

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

<a href="http://votre_lien.com/" target="new"><img src="http://adresse_de_l'image.jpg" border="0" /></a>

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

Plusieurs manières d'échanger avec les gayens

Suite à plusieurs questions qu'on m'a posé, et puisqu'il semblerait que certains n'en maîtrisent pas encore toutes les fonctionnalités, voici un petit post pour expliquer aux nouveaux (ou pour permettre aux moins nouveaux de découvrir quelques fonctionnalités) toutes les manières de gérer ses messages.

Bon, tout d'abord, sachez qu'il y a un post assez complet pour vous familiariser avec le site en général ici par AntoineWeb. Mais bon je suppose que multiplier les tutos à ce sujet permettra aux gayens qui débutent d'avoir plus de chance de tomber dessus ?

plan du tuto :
♦ les messages privés
1) Comment en envoyer ?
2) Comment consulter ses messages sur sa messagerie GA ?
3) Comment consulter son historique de conversation avec un gayen ?
4) Comment être prévenu en temps réel que vous avez reçu un nouveau message ?
♦ Laisser un message sur le profil / le bog d'un gayen, visible par tous
1) Comment participer au guestbook d'un gayen ?
2) Comment répondre à un post sur un blog d'un gayen ?
♦ Participer au chat



1) Comment en envoyer ?

Pour cela :
=> allez sur un profil d'un gayen (en cliquant sur sa photo, ou en consultant l'annuaire (menu gris supérieur) par exemple). Ici, pour l'exemple, le profil de LennyValentino.
=> cliquez sur "contact" (entouré en rouge sur l'image, cliquez pour agrandir)

=> une nouvelle fenêtre s'ouvre alors : que voici (cliquez pour agrandir)

au passage, cette fenêtre vous redonne quelques informations de base sur votre interlocuteur :
♦ son pseudo
♦ sa photo perso
♦ son nom
♦ son âge
♦ son orientation sexuelle
♦ sa date de dernière connexion
♦ un lien vers son portrait
♦ un lien vers son blog
♦ l'historique de votre conversation avec cette personne en grisé
=> Tapez votre message dans le rectangle blanc
=> Vous pouvez ensuite choisir :
♦ via un menu déroulant, d'y joindre un smiley
♦ d'envoyer votre message sur sa boîte e-mail ou sur sa messagerie GA
=> Cliquez ensuite sur "envoyer"

2) Comment consulter ses messages sur sa messagerie GA ?

première méthode : voir les messages dans leur ordre d'apparition en passant par l'accueil
=> allez sur la page d'accueil du site (n'oubliez pas d'entrer votre pseudo et votre mot de passe)
=> si vous avez de nouveau messages, une bulle rose (comme une bulle de bande dessinée) se superposera au logo GA en gris clair sur le rectangle en gris plus foncé en haut à gauche de votre écran.

=> Cliquez sur la petite bulle rose
=> une nouvelle fenêtre de message apparait, que voici (cliquez pour agrandir) :

=> s'affiche donc de la même manière que lors de l'écriture d'un nouveau messages les mêmes informations sur votre interlocuteur :
♦ son pseudo
♦ sa photo perso
♦ son nom
♦ son âge
♦ son orientation sexuelle
♦ sa date de dernière connexion
♦ un lien vers son portrait
♦ un lien vers son blog
♦ l'historique de votre conversation avec cette personne en grisé
=> ensuite, vous avez le choix :
♦ Vous pouvez ne rien écrire dans le rectangle blanc, et cliquer sur clore la conversation pour y mettre un terme (votre interlocuteur ne saura pas (à ma connaissance) que vous avez clos sa conversation
♦ Vous pouvez choisir d'y répondre plus tard (un menu déroulant vous propose plusieurs dates)
♦ Vous pouvez choisir d'y répondre tout de suite : pour cela tapez votre message dans le rectangle blanc. Cela aura pour effet de transformer le bouton "clore la conversation" en bouton "envoyer"
=> le message sera renvoyé sur la messagerie GA de votre interlocuteur

deuxième méthode : voir les messages dans leur ordre d'apparition en passant par la page "chat"
=> dans le rectangle gris en haut de la page, cliquez sur "chat"
=> cliquez sur "popup des messages"
=> suivez la méthode n°1 à partir de "une nouvelle fenêtre de message apparait"

troisième méthode : voir tous ses messages en attente d'un coup et répondre qu'à ceux qu'on veut
=> dans le rectangle gris en haut de la page, cliquez sur "chat"
=> cliquez sur "vos messages en attente"
=> apparaissent alors tous les messages en attente que vous avez envoyés et qu'on vous a envoyé
=> pour plus de clarté, sélectionnez "messages reçus" pour n'afficher que ceux qui attendent une réponse de votre part
=> cliquez sur le message auquel vous souhaitez répondre
=> suivez la méthode n°1 à partir de "une nouvelle fenêtre de message apparait"

3) Comment consulter son historique de conversation avec un gayen ?

première méthode : consulter votre historique de conversation à partir d'un profil d'un gayen
=> allez sur le profil d'un gayen
=> cliquez sur "historique" (entouré en vert sur l'image d'exemple, cliquez pour agrandir)

=> téléchargez votre historique au format html

deuxième méthode : sélectionner l'historique d'une de vos conversation parmi toutes les autres
=> dans le rectangle gris en haut de la page, cliquez sur "chat"
=> cliquez sur "vos historiques"
=> s'affichent alors :avec :
♦ les pseudos de vos correspondants
♦ la date de votre dernier échange avec eux
=> cliquez sur un des pseudos
=> téléchargez votre historique au format html

4) Comment être prévenu en temps réel que vous avez reçu un nouveau message ?

première méthode : la Popup des messages
=> dans le rectangle gris en haut de la page, cliquez sur "chat"
=> cliquez sur "popup des messages"
=> la popup vérifie toutes les 40 secondes si vous avez un nouveau message et l'affiche directement dans la même fenêtre

deuxième méthode : la Popup d'alerte
=> dans le rectangle gris en haut de la page, cliquez sur "chat"
=> cliquez sur "popup d'alerte"
=> la popup est une petite fenêtre (facile à mettre dans un coin de votre écran)
=> lorsque vous recevez un nouveau message, se superpose au logo grisé GA une bulle rose



1) Comment participer au guestbook d'un gayen ?
=> allez sur son profil
=> tapez votre texte, vous pouvez y joindre une image
=> faites "envoyer"
=> il faut souvent, pour pouvoir laisser un message, être un membre de la friendlist de la personne en question

2) Comment répondre à un post sur un blog d'un gayen ?
=> allez sur le blog d'un gayen (via son profil ou via les messages du jour dans "blogs" du menu grisé supérieur)
=> en bas d'un post s'affiche le nombre de commentaires : cliquez dessus
=> laissez votre message (éventuellement accompagné d'une image)
=> faites "envoyer"
=> les visiteurs aussi peuvent laisser des messages de cette façon



Pour des conversations en temps réel avec des connectés (pouvant être munis de cam) :
=> cliquez sur "chat" dans le panneau supérieur grisé
=> cliquez sur "salon de discussion"
=> le salon s'affiche alors

Yann Tiersen et ses interprétations sur Youtube

Voici quelques morceaux joués par un ptit gars talentueux :

La valse des monstres :

La valse d'Amélie :

(on avait tenté d'en refaire de petits bouts avec une copine sur son piano... souvenirs souvenirs lol)

La noyée :


Comptine d'été :

(j'y connais rien en piano mais je trouve ça plutôt impressionnant...)

L'épicurisme n'est pas de l'hédonisme débridé

Parce que certains se définissent à tord et à travers comme épicuriens, j'ai jugé bon de faire un petit post pour expliquer à ceux qui pensaient ainsi se définir comme amoureux de la vie et de tous ses plaisirs sans trop de retenue que le concept ne s'y prête pas vraiment à la base (enfin en partie : c'est juste un peu plus compliqué que "jfais cque jveux passke chuis un épicurien).

Précision tout de même : je dis pas que tous ceux qui emploient le terme sont des incultes qui savent pas de quoi ils parlent, mais il y en a quelques-uns semble-t-il, d'où mon post.

La philosophie dans l'antiquité, c'est pas réfléchir, c'est vivre (jusque là tout va bien puisque c'est bien comme ça que l'avaient compris la plupart des gens : ils souhaitaient définir un mode de vie plutôt qu'un genre d'introspection vaguement métaphysique lol).

Pour les épicuriens (d'Epicure, philosophe athénien, fondateur de l'école du Jardin), s'il y a un ordre global, il nous est inconnu ou alors il n'y a pas d'ordre global. En somme on ne se préoccupe pas de ce qui fait marcher le monde parce qu'on en sait rien (là soupirs de soulagement : c'est pas une philosophie où on se pose pleins de questions sur l'ordre du monde => Epicure envoie la question aux oubliettes, et je trouve pour ma part qu'il a bien raison). Le hasard domine donc le monde ("oh mais quel visionnaire !!" => hé oui, c'est exactement ce que pensent nos scientifiques d'aujourd'hui, avec le règne du hasard biologique).

Donc dans ce bordel, il faut vivre le plus sobrement possible pour ne pas être déçu. Donc on évite la vie politique et le mariage. Bon, ça veut dire pas de femmes, parce que l'amour est une passion (donc étymologiquement une souffrance => patior = souffrir). En fait ça s'appelle l'école du Jardin, parce qu'on se retire avec quelques amis dans un jardin à l'écart du monde et on passe sa vie à discuter et à vivre sobrement (non pas de bonne chère et de bon vin pour les épicuriens, on sait profiter des choses simples).

Et là j'en viens au fameux carpe diem ("cueille le jour", alias "profite de la vie") => cela ne veut donc pas dire "couche avec qui tu veux à tord et à travers sans te prendre la tête, profite de la vie en profitant de tous les plaisirs de la vie", mais plutôt "évite ce qui te fait souffrir (donc le sexe et la passion pour nous alias les zomos) et fais de la sobriété de ton quotidien un plaisir"...

Bon, après le problème, c'est que le message initial a été déformé au fil du temps, et que le carpe diem d'Horace se rapproche plus de l'Hédonisme sous l'empire roman d'Auguste => mais c'est une perversion du modèle de base que propose Epicure.

Donc pour conclure, ceux qui font du plaisir leur but dans la vie sont les hédonistes, et non des épicuriens.

Code des couleurs hexadécimal

Source : www.aidenet.com

Réponse à un gayen : identifier les différentes parties du blog

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

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; }

Ajouter des ptits symboles rigolos :D

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

♠ => 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 : ♩ ♪ ♬ ♪

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

#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)

CSS : jouer sur l'opacité dans votre journal

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.

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

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

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



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;
}



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; }



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; }



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.

CSS : personnalisez les commentaires en fonction de vos visiteurs

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

=> 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



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.



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



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

Appliquez des effets à votre texte via le CSS

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

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

<font class="dessus">TEXTE AVEC LIGNE AU DESSUS</font> <font class="barre">TEXTE AVEC LIGNE EN TRAVERS</font> <font class="dessous">TEXTE AVEC LIGNE EN DESSOUS</font> <font class="clignote">TEXTE QUI CLIGNOTE</font> <font class="tout">TEXTE AVEC LIGNE AU DESSUS ET EN DESSOUS</font> <font class="none">TEXTE SANS EFFET</font>

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



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

<font class="clignote" color="green">TEXTE VERT QUI CLIGNOTE</font>

Appliquer des modifications au paragraphe entier

Pour appliquer vos modifications à un paragraphe entier, utilisez les balises <p> et </p>.

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.

<p class="clignote">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. </p>

ma source : aidenet.com