bordel

htzyjaefzgbadfag

Ceci est un article pour faire un article. Je m'explique : il sera juste assez court pour qu'on voit le séparateur sur le même écran que la bannière ^^
Comme ça, j'peux faire des screens pour la rubrique CSS :-)

Bon, j'ai remarqué que y'a des gens qui ont du mal avec la personnalisation des LJ ^^  Comme dans ces gens y'a des LJ que je lis depuis un bout de temps sans oser poster un comm, je peux bien tenter d'expliquer ^^

Alors, je vais tenter de faire simple, et expliquer un style perso comme celui de teaspoon_57.


* La conception du style :

Tout d'abord, trouvez une image de fond, de bonne taille. Enregistrez la sur votre ordinateur. Ensuite, direction imageshack.us , pour l'héberger.
En détail, la marche à suivre est : cliquer sur le bouton "parcourir", sélectionner l'image sur votre disque dur. Cocher "resize", selectionner la taille 800*600, cliquez ensuite sur "host it". Une fois votre image chargée, vous la voyez s'afficher dans une page avec plein d'adresses différentes. Sélectionnez l'adresse correspondant à "direct link to image", collez la quelque part.

Ensuite, un petit effort d'imagination s'impose <img src="http://www.lexode.com/images/smileys/lex/lex40.gif" />

Il faut en effet trouver un style dont les couleurs aillent avec votre image de fond. Moi j'ai bossé avec le style "Flexible Squares", j'ai pas essayé les autres, donc je sais pas si ça marche :)


*Le commencement des choses sérieuses..... Récupérer la feuille de style par défaut.

Une fois que vous avez trouvé la perle rare, appliquez le à votre LJ, puis récupérez la feuille de style associée (je vous vois d'ici : "hein quoi ? feuille de style ? ça mord ?" Ralala petites natures <img src="http://www.lexode.com/images/smileys/lex/lex40.gif" /> )

Pour faire ça, c'est très simple :
Récupérez le code source de la page (Affichage >> Code source , sous Internet Explorer du moins ^^)
Trouvez dans ce bazar innommable, vers la fin du premier bloc de texte, un truc qui ressemble à ça :

< link rel='stylesheet' type='text/css' media='screen' href='  *http://www.livejournal.com/users/xawaou/res/9047162/stylesheet?1136401115*  ' />

L'adresse de la feuille de styles est mise entre astérisques. Vous copiez collez cette adresse dans la barre de navigation du navigateur, vous allez arriver à un fichier texte assez obscur au premier abord.


* Un peu de personnalisation....


Vous êtes toujours là ? Passke là c'était de la rigolade, et on va maintenant mettre les mains un peu dans le cambouis ^^ Vous avez devant vos yeux la feuille de style de votre blog, c'est à dire le fichier texte qui dit : tel titre, de telle couleur, tel sous titre, en bleu souligné rose, ce bloc là, en vert avec une bordure en pointillés orange. Cette feuille est écrite dans un langage assez simple, le CSS. Je vous fais pas un cours sur le CSS hein (sauf si vous insistez :P )

Le style que vous avez appliqué au blog ressemble à celui que vous voulez à la fin, mais pas exactement. On va donc faire quelques petites modifications. =)

Regardons la feuille CSS de plus près (vous l'avez bien évidemment copiée entièrement et collée dans un document bloc-note, et enregistrée en 2 exemplaires sur votre disque dur, pour ne pas risquer de faire une bêtise. :P Et, of course, vous en avez un exemplaire sous les yeux ^^)


1ere Etape : modifier l'image de fond ^^

placez vous sur ce paragraphe :


   body   {
       background-color: #XXXXXX;
       text-align: center;
       color: #4f4d65;
       font-family: "Verdana", sans-serif;
       font-size: 11px;
       margin: 20px 0 20px 0;
       }

Vous voyez l'attribut "background-color" ? Il permet de mettre une couleur de fond au LJ. Sauf que nous on veut une image. On va donc remplacer cette ligne

       background-color: #c6c2f8;

Par ces trois là

background-image:url(XXXXXXX);
       background-attachment:fixed;
       background-repeat:no-repeat;

En mettant l'adresse de votre image de fond à la place du "XXXXXX" ^^
Pour info, la première des trois lignes veut dire qu'on met l'image située à une url donnée en fond, la deuxième qu'on veut qu'elle reste fixe par rapport au cadre du navigateur, et la troisième qu'on ne veut pas d'effet mosaïque ^^.


2e étape : enlever les fonds colorés du style choisi.

Placez vous sur ce paragraphe :

#content
   {      
       width: 80%;
       margin-left: auto; margin-right: auto;               
       background-color: #XXXXXX;
       border-width: 1px;
       border-style: solid;
       border-color: #ffffff;
       padding: 15px;
   }

Ce paragraphe correspond aux attributs du bloc principal de la page, contenant les articles et la colonne latérale si il y en a une. Puisqu'on ne veut pas de fond, on va purement et simplement supprimer cette ligne :

      background-color: #XXXXXX;

Et aussi celles là :

       border-width: 1px;
       border-style: solid;
       border-color: #XXXXXX;

Pour virer les bordures :) (passke si y'a pas d'arrière plan mais que y'a des bordures, c'est caca beurk ;) )

Ensuite, y'a encore un autre bloc dont il faut modifier le fond.

Placez vous sur ce paragraphe :

   #maincontent {       
       margin-top: 15px;
       font-family: "Verdana", sans-serif;
       font-size: 11px;
      background-color: #d3dcfc;
       color: #4f4d65;
      border-style: solid;
      border-color: #ffffff;
      border-width: 1px;
       margin-right: 180px;
       text-align: left;
       }

Et dégagez les lignes marquées avec des astérisques ^^


3e étape : Espacer une peu les articles (ben ouais, sinon comment on fait pour voir votre beau fond hein ? ^^)


Donc allez touuuuut en bas de la feuille, au paragraphe suivant :

.separator{
       /* for formatting separators between entries */
       height: 35px;
   }

Et remplacez le "35" par ce que vous voulez ^^. Je conseille 55 :)


4e étape : Enregistrement

Vous enregistrez ça au format css, c'est à dire que vous faites fichier > enregistrer sous > vous l'appelez style.css par exemple ^^

Voilààààà, vous avez fait vous même votre première feuille de style CSS... c'est émouvant, hein *essuie une larme*


*Maintenant, on met tout ça en ligne


Vous avez déjà un bout d'espace ouèb quelque part ? Trèèèèès bien alors ^^. Uploadez y moi la feuille de style, et notez son adresse ^^

Vous en avez pas ? Direction monsite.voila.fr pour vous créer un coin de stockage ^^
Commencez par vous créer un compte voila, puis suivez la marche à suivre décrite là : http://img242.imageshack.us/img242/8510/heb3uq5ue.jpg pour créer un espace d'hébergement, sur lequel vous uploaderez votre fichier CSS.

Ensuite, retournez sur LJ, faites Réglages > personnalisation.
Descendez jusqu'à "éditer les personnalisations". Cliquez (nan, pas vrai ! :P )
Descendez encore jusqu'en bas de la page, cochez "override default" sous "external stylesheet URL", puis saisissez l'adresse de votre feuille de lien dans le champ en dessous ^^(de la forme : http://pseudo.site.voila.fr/style.css )

Cliquez sur Save.



Et admirez votre beau LJ :)