blue (brilliant_blue) wrote,
blue
brilliant_blue

(tutoriel) Personnaliser son LJ

Pour celles qui débutent sur LJ et n'y connaissent vraiment rien, voilà un tuto pour personnaliser l'aspect de votre LJ basé sur le style flexible squares (c'est-à-dire le style qu'on a sur Naniwa ou que j'ai sur mon LJ perso). Si vous avez déjà installé un layout tout fait dans le cadre custom CSS, virez tout avant de commencer ce tuto sinon, rien de ce que vous ferez ne sera pris en compte.

Je vais simplement décrire ce qu'on peut faire dans la partie personnaliser le style de journal. Ce qu'on ne peut pas y faire c'est déterminer si la sidebar sera à gauche ou à droite, ça c'est dans la partie changer le style de journal, en bas de la page il y a indiqué "choisir une configuration de page".

Si vous n'êtes pas en flexible squares, c'est sur cette page que vous pouvez choisir ce thème en prenant à peu près n'importe lequel des modèles proposés, de toute façon dîtes-vous que vous allez refondre toutes les couleurs...

Pourquoi flexible squares ?
- sidebar complète avec une zone de texte libre "blurb"
- tags en liste et non pas en nuage
- largeur de la zone de texte et de la sidebar modulables
- possibilité d'avoir une image de fond
- possibilité d'avoir une bannière même avec un compte gratuit
- couleurs modifiables à volonté
En gros c'est le style qui offre le plus de liberté de personnalisation avec un compte gratuit.

AFFICHAGE
- pour que la date et la plupart des termes soient affichés en français, pensez bien à changer la langue de votre LJ, ça vous facilitera déjà la vie ^^"

Sur Naniwa et sur mon LJ perso, les bannières sont toutes de largeur 1000 px ce qui donne une zone de texte assez volumineuse (à vous de voir si vous voulez beaucoup de vide autour), du coup pour aligner la bannière avec la largeur de votre journal, je vous conseille de donner une largeur fixe à votre journal, ce qui fait que l'alignement sera toujours parfait, quelle que soit la résolution de l'ordinateur utilisé
- pour ça allez dans en bas dans les options supplémentaires, choisissez comme unité "px" au lieu de % et inscrivez "1000" en largeur (ou ce que vous voulez du moment que c'est la même largeur que la bannière)

- sur cette même page, vous pouvez déterminer le nombre d'entrées visibles sur la page d'entrée récentes de votre journal ainsi que sur votre page d'amis
- c'est là aussi que vous pouvez choisir de mettre vos icones à droite ou à gauche (et c'est du coup ce qui détermine la direction des fils de discussion dans les commentaires)

STYLE
- sur cette page vous allez customiser toutes les couleurs utilisées sur votre LJ, celle des cadres, des liens, des textes... en général sur la comm j'utilise 2 couleurs principales + 1 déclinaison pour les liens
- un peu plus bas vous pouvez choisir la police et la taille de police pour les textes, les titres...
- juste en-dessous c'est là que vous allez mettre le lien d'une image si vous en voulez une en fond de votre LJ comme celle de Naniwa avec les logos de couleur

TEXT
- cette partie vous permet de nommer comme vous voulez les principales zones de votre LJ, de changer le mot pour "commenter" etc...

SIDEBAR
- c'est là que vous allez déterminer quels composants afficher (yes/no) et choisir leur ordre dans votre sidebar
- de mémoire, avec un compte gratuit la publicité apparait toujours en-dessous du calendrier donc si vous ne voulez pas que la pub vous gêne, mettez le calendrier en dernier
- dans cette partie vous pouvez aussi déterminer la largeur en pixels de la sidebar, sur Naniwa elle fait 185px, ce qui fait qu'avec les zones de marge et tout, la largeur max des tableaux ou grosses images doit être de 740px (en-dessous de là où l'icone déborde dans la zone de texte)

Liste de liens
Bon là c'est clair, rien à expliquer, à part que si vous voulez changer l'ordre des liens, il suffit de changer les numéros de devant au lieu de réécrire tous les liens

Custom CSS
Normalement si vous aviez quelque chose dans le cadre, vous avez tout enlevé avant de commencer ce tuto, c'est là que vous allez rajouter les quelques lignes nécessaires pour mettre la bannière que vous avez choisie. Vous devez avoir affiché yes - no - yes avant de coller un code dans la zone de custom CSS, voilà le code pour la bannière :

.headerimage{ width: 1032px; height: 400px;
background-color:#------;
background-image:url('http://');
background-repeat: no-repeat;
background-position: center;
margin:0px auto;}

Ce qui est en rouge est modifiable :
* width : si vous avez choisi une largeur fixe de 1000px, ne touchez pas au 1032px, sinon votre bannière sera bien alignée avec la zone de journal mais pas avec le cadre qui entoure cette zone de texte (en noir chez moi actuellement)

Les 32px correspondent à la largeur de la zone de cadre + la bordure autour de la zone de texte que j'ai déterminée par tâtonnement, je pense que quelle que soit la largeur de votre LJ, le cadre fait toujours 32px (si "background color of the outer table" et "border color of content" sont identiques, sinon c'est 30 px seulement)

Si vous ne voulez pas que votre bannière soit encadrée, vous pouvez :
- faire une bannière de largeur 1032px qui sera donc alignée avec le cadre de votre zone de journal
- garder votre bannière à 1000px et "noyer" le cadre autour de votre zone de journal dans la couleur de fond de la page (ce qui ne marche donc pas si vous avez mis une image en fond). Dans ce cas il faut que la couleur "background color of the outer table" soit la même que "background color for the page"

* height : hauteur de la zone dans laquelle va se mettre la bannière, si vous avez choisi de mettre un cadre sur les côtés de la bannière, je conseille de rajouter 30 à 40 px de plus que la hauteur de la bannière pour pareil, faire un effet cadre en haut et en bas. Sinon, mettez la hauteur pile de la bannière.

*font color=#------ : là il faut remplacer les tirets par le code qui détermine la couleur du cadre autour de la bannière, pour que ça fasse joli, je reprends la même couleur que le cadre de la zone de texte qui s'appelle "background color of the outer table" dans la page de customisation des couleurs (enlevez cette ligne si vous avez choisi de ne pas avoir de cadre autour de la bannière)

* http://.... le lien de la bannière que vous avez préalablement uploadée

* margin : moi je mets toujours 0 parce que sinon ça veut dire qu'entre le cadre de la bannière et le journal il va y avoir une marge dans laquelle va s'afficher le fond du LJ et moi je préfère tout avoir en un seul bloc

Attention, notez bien que si vous décidez d'avoir une bannière encadrée, ça veut dire qu'à chaque fois que vous changez vos couleurs principales, il faut aussi penser à venir changer celle du cadre dans le custom CSS ^^"

Voilà, voilà, j'espère que c'est clair, avec ça tout le monde peut avoir un beau LJ ^^

Il y a ensuite pas mal de choses qu'on peut faire avec un compte payé mais ça c'est le mode avancé, il faut passer par l'étape de création de couche et style et comprendre un minimum de choses en html pour piger les codes qu'on doit utiliser pour telle ou telle nouvelle fonction. S'il y a des gens que ça intéresse, n'hésitez pas à me le demander, j'essaierai d'expliquer ^^.

Tags: [tutos]
Subscribe

  • Blind-test 2012.01

    Grand retour des blind test que j'aime tant ! Ce coup-ci 20 extraits que pour ne pas être influencée par quoi que ce soit, j'ai classé du plus court…

  • (lyrics) Rock'A'Trench - Bohemia

    Romaji des chansons de "Bohemia", second album de Rock'A'Trench, sorti le 7 septembre 2011. Ca m'a pris plus d'une semaine pour romaniser les…

  • Grille des drama - hiver 2011

    Voilà la grille à peu près complète je crois des drama de la saison prochaine, il y en a quelques uns qui ont l'air intéressant mais globalement rien…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 9 comments