Le Blog d'Olivier

Personnaliser son Blog...




1° Présentation de chaque partie.

Sur cette présentation j’ai numéroté les différentes parties qui peuvent être modifiées en cas de personnalisation d’un blog Opera.
Nous allons les analyser une à une pour mieux les connaître ! Et ainsi comprendre quelle est leur importance.
Cette personnalisation est utilisable avec la plupart (pas tous) des thèmes qu’offre My Opera.com


Partie 1



La bannière ! La chose la plus facile à changer.

Partie 2a et 2b



Les cotés du blog, qui descendent à mis hauteur du blog !

Partie 3a et 3b



Les cotés du blog, mais partie basse !

Partie 4



La barre de menu, qui elle aussi est très facile à modifier !

Partie 5



Les bords qui séparent le corps du blog, des cotés ! C’est une partie importante qui selon votre choix va faire apparaître un bord droit et lisse ou plutôt ombré !

2° Modification.

Pour modifier toutes ces parties du blog il va falloir insérer un code CSS supplémentaire dans la partie "design" de votre compte Opera ! Pour ça rien de bien compliqué !
On clique sur My page >> Account >> Design >> custom style sheet >> on colle le code CSS dans "enter CSS" et on sauvegarde en cliquant sur "Save".
Pour ma part je mets le code CSS dans un ordre bien précis, histoire de ne pas rencontrer de problème !
En 1° Partie 3a et 3b : en 2° Partie 2a et 2b : en 3° Partie 5 : en 4° Partie 4 : en 5° Partie 1

3° Le code CSS ; explication des différents

paragraphes.

En 1° lieu toujours respecter les espaces et la ponctuation du code car un point-virgule, ou des guillemets en moins et ça ne marche pas !

Le premier code.

body { 
background:#000000;
}

Détermine la couleur de la partie 3a et 3b, cette couleur (ce n’est pas une image) peut être trouvée facilement grâce à un petit freeware Color-cop qui vous donnera le code de la couleur lorsque vous passerez dessus. Exemple #FFFFFF pour du blanc.
Ce qui permet de trouver facilement la couleur de fond d’une image pour en faire le prolongement de votre blog.
________________________________________

Le second code.

#wrap0 {
   background:transparent url(Adresse de votre image) top center repeat-x ;
    }

Détermine l’image de la partie 2a et 2b cette image doit respecter quelques standards surtout dans ses dimensions 0.03 pixels de large pour 19.31 pixels de haut ! Elle peut être travaillée de façon à y ajouter des éléments comme je l’ai fait, en y insérant un bout de bannière pour que celle-ci face tout l’écran.
________________________________________

Le troisième code.

#wrap1[id] {
  background-attachment: scroll;
background-repeat: repeat-y;
background-position: 0% 0%;
background-color: transparent;
background-image: url("Adresse de l’image")
  }

#wrap2[id] {
  background-attachment: scroll;
background-repeat: repeat-y;
background-position: 100% 0%;
background-color: transparent;
background-image: url("Adresse de l’image ")
  }

Détermine les éléments de la partie 5, si vous mettez une image ayant un dégradé noir jusqu’à transparent à droite et inversement pour la gauche il y aura un effet ombré sur les cotés du blog !
Elle aussi doit respecter impérativement une dimension de 0.53 pixels par 0.03 pixels.
________________________________________

Le quatrième code.

#menu a {
visibility:collapse
 }
#menu_blog a:after {
content:"Mon blog";
visibility:visible;
 }
#menu_archive a:after {
content:"Les archives";
visibility:visible;
 }
#menu_albums a:after {
content: "Mes photos";
visibility:visible;
 }
#menu_links a:after {
content: "Mes liens";
visibility:visible;
 }
#menu_friends a:after {
content: "Mes amis";
visibility:visible;
 }
#menu_about a:after {
content: "Moi";
visibility:visible;
 }

Cette partie sert uniquement à mettre la barre de menu (partie 4) en français et à personnaliser le texte des menus !
________________________________________

Le cinquième code.

#top {height:200px; width:920px}

#top2 {background: url(Adresse de l’image); height:280px; width:890px}
 }

Dernière partie et pas la moindre, la bannière ! Elle aussi doit respecter une taille précise surtout au niveau de la largeur 920 pixels exactement pour la hauteur on peut osciller entre 240 et 280 pixels.

La dernière ligne de code.

#top { 
color: #8B6BDC;
}

Détermine la couleur du titre de votre blog !

________________________________________

4° Pour terminer

Toutes ces images bien sûr devront être hébergées sur un espace "Internet", le plus simple étant de les déposer sur votre espace dédié chez my.opera.com au niveau des albums d’images ou encore du dossier Files*.

Et enfin pour terminer, je tiens à préciser que je n’y connais rien en CSS ! Tout ceci n’est que du regroupement avec un peu de déduction et de réflexion !

* Pour déposer une image sur votre espace cliquez sur My page >> Account >> Files >> Show the file uploader ensuite sur "Choisir" et "Upload files" ensuite le nom de votre image apparaîtra dans la fenêtre un clique droit dessus >> copier l'adresse du lien et vous avez son adresse !
Ici un exemple de code CSS pour une belle personnalisation !

Amusez vous bien !