Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

28 mai 2009 4 28 /05 /mai /2009 07:43
Vous n'êtes pas sans savoir qu'Over-Blog fait du zèle en avançant des nouveautés: certains designs ne sont plus personnalisables, les formulaires de commentaires sont des stéréotypes uniformes qui ne peuvent plus être à l'image de nos blogs et comble du comble : le logo facebook.


J'admets que pour certains, cette option pour recommander les articles sur facebook peut-être utile, mais over-blog a beau avoir comme partenaire facebook, ce n'est pas mon cas (et le cas de beaucoup...)! Personnellement, je n'ai pas envie de faire de la pub pour cette plateforme qui tend elle aussi à uniformiser un nouveau mode de communication, et je n'aime pas le logo... bleu ça va pas avec le design de mon blog !


Lorsqu'on s'adresse au staff d'over-blog, la solution proposée est d'aller dans son administration et de décocher la case des options de blog "recommander ce blog". Mais du coup, les visiteurs (ou vous-même) ne peuvent plus recommander un article ou votre blog à leurs contacts. Ca équivaut à dire, si j'ai une écharde au pied, autant couper la jambe.



Non, il y a aussi la pince à épiler pour enlever l'écharde ! On va utiliser la méthode expliquée hier "comment supprimer un élément du css"


Voici comment enlever le logo facebook et conserver les liens "recommander".
Allez dans l'administration de votre blog, "design", "mode css", et ajoutez cette ligne de code :

.facebook {display:none;}




Pour voir un résultat, regardez en bas des articles de ce blog, il n'y a pas de logo facebook...


Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
27 mai 2009 3 27 /05 /mai /2009 12:38
Oui, c'est possible de supprimer un élément ou un autre du css et faire en sorte qu'il ne soit plus du tout visible et ne soit même pas pris en compte dans l'affichage...
Ca peut être utile si l'on souhaite supprimer la date par exemple ou le titre des modules, ou n'importe quoi d'autre...

La formule magique est bien simple : {display:none;}



Par exemple, je souhaite enlever la date des articles :
.date  {display:none;}

Je souhaite enlever le titre des modules :
.box-titre {display:none;}

Je souhaite enlever la pagination du blog :
.pagination  {display:none;}

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
7 mai 2009 4 07 /05 /mai /2009 19:35

Aujourd'hui nous allons voir comment avoir toujours le même article sur la page d'accueil et ce quelque soient les publications suivantes.

Sur Over-Blog, il suffit de se rendre sur son administration, puis sur configurer, de basculer en mode avancé (si ce n'est pas déjà fait), de cliquer sur accueil et vous arrivez sur la page de configuration de la structure de la page d'accueil et du choix des modules.

Cliquer sur le marteau présent en haut à droite du cadre de l'article (comme l'indique le schéma ci-dessous), s'ouvre une fenêtre qui affiche alors des options qui concernent uniquement les articles de la page d'accueil.
Il suffit alors de choisir l'option « afficher les articles : du plus ancien au plus récent » et d'indiquer le nombre d'articles présent sur la page d'accueil. En choisissant l'option « du plus ancien au plus récent », il vaut mieux ne choisir qu'un article sur la page d'accueil. Mais c'est vous qui voyez...

Ensuite, une dernière précaution :
Vous allez sur administration, publier, articles, vous choisissez dans la listes de vos articles publiés celui que vous voulez placer à l'accueil et vous « l'antidatez », vous lui donnez un date antérieure, la plus ancienne de votre blog ou même avant, et vous cliquez sur « publier l'article ».

Le tour est joué...

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
7 mai 2009 4 07 /05 /mai /2009 14:55

Bien contente que le menu en css que je vous ai proposé il n'y a pas longtemps remporte autant de succès. POur trouver l'article, c'est ici : http://awerpi.olympe-network.com/menuderoulantencssethtml2/. Voici maintenant quelques précisions pour disposer votre menu où bon vous semble.

Tout d'abord, il faut savoir que la marche à suivre qui va être expliquée ici ne concerne que le deuxième paragraphe (mais qu'il faut laisser la totalité du code), et que la seule chose à modifier est surlignée en gris :



<style type="text/css">
<!--
#menuDeroulant{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant li{ float: left; margin: 0; padding: 0; border: 0;}

#menuDeroulant li:hover > .sousMenu { display: block; }

#menuDeroulant .sousMenu{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant .sousMenu{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant .sousMenu li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant li{ float: left; width: 100px; margin: 0; padding: 0; border: 0; font-size:12px;}

#menuDeroulant{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 0;}

#menuDeroulant li a:link, #menuDeroulant li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-right: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant li a:hover { background-color: #99CCFF; }
#menuDeroulant li a:active { background-color: #FF3300; }
#menuDeroulant .sousMenu li a:link,#menuDeroulant .sousMenu li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant .sousMenu li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



Le code à modifier est le suivant :
position: absolute; top: 0;

Ce code indique au navigateur où afficher le menu. Il lui dit de partir du haut du blog.

Pour le baisser dans la page, il suffit de lui dire de le mettre plus bas en lui donnant une valeur en pixels.
position: absolute; top :Xpx;

Mais on aussi la possibilité de le placer à droite :
position: absolute; right :Xpx;

Ou de le plasser à gauche :
position: absolute; left: Xpx

Ou en bas :
position absolute; bottom: Xpx


On peut aussi cumuler la valeur verticale et horizontale et faire un mélange de top et right par exemple.
Si je veux indiquer à mon menu de se placer à 300 pixel à partir de la gauche du blog et à 50 pixels en dessous du début du blog, alors j'écris :
position: absolute; left: 300px; top:50px;

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
4 avril 2009 6 04 /04 /avril /2009 07:33

Il peut-être intéressant de prendre un élément de son blog et de lui donner une autre position que celle attribuée par défaut dans la structure initiale proposée par Over-Blog.

 

Pour cela, il faut utiliser la syntaxe suivante :

position : absolute ; top :X px ; left : Xpx ;

 

La position absolue signifie bien ce que ça veut signifier : une position absolue d'un élément, c'est à dire qu'il ne dépend plus de la position des autres éléments de la page.

Mais comment l'élément se positionne alors ?

Tout simplement... l'élément se positionne par rapport aux bords de la fenêtre de navigation de chaque visiteur.

 

Ainsi, si je veux par exemple que mon module d'article récent (voir l'article comment identifier les modules) se place à 10 pixels du haut du navigateur et à 60 pixels du bord de mon blog :

.articlerecent {position :absolute ; top : 10px ; left : 60px;}

 

 

Attention parfois (souvent même) les modules se trouvent vite derrière un élément tel que l'entête du blog...

Il suffit alors de lui donner l'ordre de se mettre au premier plan avec z-index :1000.

Reprenons l'exemple précédent :

.articlerecent {position :absolute ; top : 10px ; left : 60px; z-index:1000;}

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
3 avril 2009 5 03 /04 /avril /2009 07:11

Pour modifier son css, il est parfois nécessaire d'avoir quelques images sou sla main, par exemple pour changer le fond de son blog.
Voici comment récupérer l'url (le lien) d'une image sur le net.
Attention aux droits d'auteur... si l'image n'est pas libre de droit, demandez l'autorisation à son propriétaire.


Prenons un exemple avec la page de wikipédia : http://fr.wikipedia.org/wiki/Photo


En faisant un clic droit sur la photo dans la marge de droite, il faut choisir l'option « propriétés »

On remarque alors qu'une fenêtre s'ouvre avec plusieurs indications sur l'image, dont son adresse URL. Il faut sélectionner l'adresse (http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Large_format_camera_lens.jpg/140px-Large_format_camera_lens.jpg) et la copier.

Il ne vous reste p^lus qu'à l'insérer dans votre css.
 

 

vous souhaitez utiliser une image que vous avez hébergée chez un hébergeur d'image

C'est la même chose que la situation précédente.

Il suffit de récupérer l'url (pour servimg, vous pouvez consulter le tuto comment héberger une image) et procéder comme précédemment.




Vous souhaitez utiliser une image hébergée sur Over-Blog :
Hébergez d'abord votre image (si ce n'est pas déjà fait), allez dans l'administration, puis sur documents, puis sur images & albums photos, puis sur mes images, et cliquez sur l'image que vous désirez utiliser.
S'ouvre alors une fenêtre et vous n'avez plus qu'à copier l'adresse qui commence par http:// en haut de la dite fenêtre.

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
2 avril 2009 4 02 /04 /avril /2009 10:06

Voici comment déterminer et dissocier les modules et leurs sélecteurs dans le css d'over-blog.

Mais à quoi ça sert ?

Il faut savoir que dans le css .box donne les informations de style de manière globale à tous les modules, mais qu'il est possible de donner une apparence différente à chacun des modules de son blog. Mais pour pouvoir le faire, c'est comme quand on appelle quelqu'un à l'autre bout de la rue, il faut pouvoir les appeler par leur vrai nom.

 

 

Voici un petit récapitulatif :

 

Albums photos

.album

Archives

.archive

Articles récents

.articlerecent

Calendrier

.calendrier

Catégories

.categorie

Commentaires

.commentrecent

Communautés

.community

Liens

.lien

Newsletter

.newsletter

Image Aléatoire

.aleaIm

Présentation

.presentation

Recherche

.recherche

Recommander

.recommander

Texte libre (droite)

.text

W3C (le flux RSS)

.w3c

 

 

Par exemple je veux que la liste des mes catégories ait un fond jaune, que mon module de présentation ait une image de mon choix, que le module de liens soit transparent...

Je vais indiquer :

 

.categorie {background-color : #FFFF00 ;}

.presentation {background-image : url(http://www.urldemonimage.jpg);}

.lien {background-color : transparent;}

 

 

C'est article peut vosu intéresser : personnaliser les modules over-blog

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
1 avril 2009 3 01 /04 /avril /2009 15:47

Suite au déménagement du blog, retrouvez cet article sur http://www.awerpi.fr : http://awerpi.vacau.com/blog/menu-deroulant-horizontal-sans-javascript/

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
28 mars 2009 6 28 /03 /mars /2009 08:54

Hier nous avons vu comment activer le blocage du clic-droit sur over-blog.

Voici aujourd'hui les explications pour modifier l'aspect de la petite fenêtre qui s'ouvre lors d'un clic droit sur votre blog.

 

 

#menuClicDroit

C'est la totalité de la petite fenêtre qui s'ouvre lors du clic.

C'est là qu'il est possible de mettre une bordure ou un fond.

 

#menuClicDroit li

C'est là qu'il est possible de définir le style des puces.

 

#menuClicDroit ul

C'est là que l'on définit l'écart du paragraphe.

 

#menuClicDroit span

C'est ici qu'on s'occupe du texte.



 

Je veux par exemple une fenêtre avec une bordure rouge de 2pixels d'épaisseur, avec un background blanc :

#menuClicDroit {background-color:#FFFFFF; border:2px solid #CC0000;}

 

Je veux par exemple que les puces soient rondes :

#menuClicDroit li {list-style-type:disc;}

 

Je veux que le texte soit aligné à droite :               

#menuClicDroit ul {text-align:center;}

 

Je veux que le texte soit écrit en noir et en arial et en 12px de grandeur :

#menuClicDroit span {color:#000000; font-family:arial; font-size:12px;}

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
27 mars 2009 5 27 /03 /mars /2009 14:52
Il est possible d'activer cette option dans l'administration d'over blog. Ainsi les visiteurs de votre blog ne pourront pas (en apparence, mais pas en pratique) copier vos textes ou « voler » vos images.


Allez sur l'administration, puis sur configurer, options globales, réglages avancés, et cochez la case « bloquer le clic droit de la souris ».



Attention : le blocage du clic droit ne fonctionne que sous internet-explorer...

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article