Le Blog de Papier

  • : Le blog de papier...
  • coulors
  • : artiste
  • : 25/03/2007

Concours

Publicité

Calendes Art

Mai 2008
L M M J V S D
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
<< < > >>

Post it

Au has'Art

Chercher

Syndication

  • Feed RSS 2.0
  • Feed ATOM 1.0
  • Feed RSS 2.0

Machins choses

 

My blog is worth $5,080.86.
How much is your blog worth?

 

 


Page copy protected against web site content infringement by Copyscape

Powered by MyPagerank.Net

inbv.gif

Bienvenus...

IE7.giffirefox.gif
Site optimisé pour Firefox 2.0.0.9 et Internet Explorer 7
 


Jeudi 8 novembre 2007
publié dans : le cours particulier...
  • Attention bidouiller le CSS n'est pas sans risque, vous pouvez perdre votre mise en page et ce, de manière irréversible ! Alors, penser à faire une sauvegarde de votre code CSS en le copiant-collant dans un fichier texte (word, note pad, bloc note, writer ou autre) afin de pouvoir le récupérer en cas de problème.

  •  ____________________________________________________________________________
  •  
  •  
  •  
  • Pour mettre une image en fond de Blog (principes valables pour la V2 d'over-blog)

Il faut une image assez grande de la taille d'un écran c'est-à-dire 1024x768 pixel, une photo ou bien un scan d'une de vos réalisations.

L'image doit ensuite être téléchargée sur
over-blog dans les documents.
Aller dans l'administration puis cliquer sur Documents (1)
Ensuite cliquer sur Images & Albums photos (2)
fondblog.jpg
Ensuire, (ça c'est mon astuce) je désactive l'assistant de téléchargement des dosuments afin de pouvoir charger mon image dans sa taille d'origine (uniquement pour les grande images). Pour le désactiver, cliquer sur la ligne bleue "désactiver l'assistant", vous pourrez le réactiver ensuite.

fondblog2.jpg
Puis télécharger l'image souhaitée, ATTENTION, afin de conserver votre taille d'origine décocher l'option "optimiser les images", sinon OB redimensionne les images de grande taille en 600x600 pixels.


fondblog3.jpg

Une fois l'image téléchargé, aller dans l'otion design (1)
Et si vous n'êtes pas en mode avancé, cliquer sur" mode avancé"(2)
fondblog4.jpg
La fenêtre des CSS s'affiche, pour modifier votre CSS, cocher "je souhaite modifer ..."
fondblog5.jpg

Le code à modifier :
code original :
body {margin:0px; padding:0px; background-color:#000000 ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#FFF;}

Au préalable vous aurez repérer et copier l'adresse de l'image dans la rubrique "Images & Album photo" zn cliquant sur le petit marteau sous votre image choisie.

code pour mettre une image en fond :

body {margin:0px; padding:0px; background:URL(http://idata.over-blog.com/0/60/25/11/novembre/votre-image.jpg); background-repeat:no-repeat;background-position:left; background-attachment:fixed;  font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}

*****************************************************
Explication du code :

body = corp du blog
{margin:0px; = taille des marges
padding:0px; = taille des espacements
background:URL(http://idata.over-blog.com/0/60/25/11/novembre/fond2.jpg); = adresse de l'image de fond 
background-repeat:no-repeat; = soit le fond est affiché une seule fois (si vous mettez no-repeat) soit il est affiché en mosaïque (si vous mettez repeat après les :)
background-position:left; = position de l'image left=gauche right=droite center=centrée
background-attachment:fixed;  = mettre cette ligne si vous souhaitez que votre fond soit fixe et ne bouge pas avec l'ascenseur, sinon supprimer cette ligne..
font-family: Verdana, Helvetica, Arial, sans-serif; = police
font-size:x-small; = taille de la police
}


***************


par Laglesine ajouter un commentaire commentaires (23)   
Samedi 27 octobre 2007
publié dans : le cours particulier...

INSTALLER UN CURSEUR PERSONNALISE


Pour installer un curseur en forme de chat, de sorcière, de fleurs, ou de coeur il faut trouver au préalable un fichier image avec une extension .cur (dessin statique) ou .ani (animé).

Vous pouvez trouver ces fichiers sur internet (curseur), ensuite vous les téléchargez dans vos documents/autres fichiers...

Un fois chargé, vous repérez l'adresse de votre fichier .cur ou .ani. (http://ddata.over-blog/blablabla)
curseur.jpg

Ensuite vous allez accéder à votre le CSS... 
Design puis "Mode avancé (CSS)"

curseur2.jpg

Vus devrez rajoutez le code en vert dans votre CSS. Avec l'adresse du curseur que vous souhaitez installer.

body { cursor:URL(http://chezpasglop.ifrance.com/cur/baguette01.cur); }

Ce code est a ajouter dans la balise Body.

Une balise commence par un nom (ici body) puis une accolade et se termine par une autre accolade.

Il y a d'autres codes dans la balise body, il ne faut ni les effacer ni les modifier...


curseur3.jpg

Puis cliquez sur enregistrer.
Attention :
respectez les espaces, les points virgules, parenthèses, et accolades


Par sécurité, pour que votre curseur fonctionne sous Firefox


Vous pouvez ajouter "default" dans votre code ce qui au final donnera
body    {cursor:URL(http://ddata.over-blog.com/xxxyyy/0/60/25/11/chat-halloween.cur), default; }

Ou alors vous ajoutez "auto" dans votre code ce qui donnera
body    {cursor:URL(http://ddata.over-blog.com/xxxyyy/0/60/25/11/chat-halloween.cur), auto; }
 

Et ça devrait fonctionner comme vous le souhaitez !
Amusez vous bien !


par Laglesine ajouter un commentaire commentaires (11)   
Mercredi 25 avril 2007
publié dans : le cours particulier...
V1 - Comment changer l'aspect
des modules ou boîtes


Aller dans l'administration d'Over Blog












Cliquer sur "Design" (entouré en rouge dans l'image ci-dessus)















Dans la nouvelle page, cliquer sur "Modifier le CSS"
(Avant toute modification du CSS, en faire une copie sur son disque dur - Copier-coller le code dans le Bloc note

de windows et l'enregister)





















Puis cocher "je souhaite modifier moi-même le CSS" afin d'avoir accès au code.

La partie concernant les modules ou boîtes s'appelle Box :
en voici le code

/* ------------------- Box -------------------- */

.box {position:relative; margin:0px; padding:0px; margin-bottom:10px; border:1px solid #F6CBA5;}
/*definie le style des modules*/

.box-titre h2 {color:#FFFFFF; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px;}
/*titre de la boite*/


.box-titre {position:relative; padding:0px; text-align:center;}
/*div contenant le titre*/


.box-content {overflow:auto; padding:2px 5px; color:#000000;}
/*contenu du module*/


.box-content p {margin:5px 0px 5px 15px; padding:0px; color:#000000;}
/*paragraphe*/


.box-content ul {margin:5px 0px 5px 15px; padding:0px; color:#000000;}
/*liste*/


.box-content li {list-style:square; color:#000000; margin:5px; padding:0px;}
/*element d'une liste*/


---------------------------------------------------

Ce qui est en bleu ici ce sont des commentaires permettant de se repérer dans le code.

attention chaque espace, point virgule, parenthèse doit être respecté...


color

color:#000000
Ce code donne la couleur. Pour changer la couleur, changer les chiffres se situant après le dièse #

Quelques indices de couleurs
#FF0000 c'est rouge
#00FF2B c'est un vert fluo
#008800 c'est un ver plus foncé
#0055FF c'est un bleu
#000000 c'est un noir
#FFFFFF c'est un blanc
# 666666 c'est un gris

Il existe autant de code hexadécimal que de couleurs....


padding
padding:2px 5px
Padding c'est une marge interne entre le contenu de la boîte (ici) et la bordure
La padding est exprimé ici en pixel (px)
Il peut avoir 1, 2, 3 ou 4 valeurs.
correspondant aux marges internes Top (haut), bottom (bas), Left(gauche) et Right (Droite).

margin
margin:5px 0px 5px 15px
Margin c'est une marge externe, entre la bordure de la boîte (ici) et le reste
Comme le padding, margin
est exprimé ici en pixel (px)
Il peut avoir 1, 2, 3 ou 4 valeurs.
correspondant aux marges externes Top (haut), bottom (bas), Left(gauche) et Right (Droite).

border
border:1px solid #F6CBA5

border ce sont les bordures. Leur épaisseur est exprimer en pixel (px). Pour qu'il n'y est pas de bordures, mettre 0px.

solid c'est la forme de la bordure. Il existe plusieurs formes de bordure
   
    solid : bordure continue ________________
   
    dotted : bordure pointillée ......

    dashed : bordure --------

    double : bordure continue double ========

    groove : bordure avec ombre

    ridge : bordure en relief, dans ce cas la bordure doit être épaisse


background
C'est le fond... Le fond peut être coloré
background:#FFFFFF (fond blanc)

ou transparent
background:transparent (transparent)


Schéma


 
°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°

Ainsi on pourra ajouter color:#000000; (couleur noire) à une bordure, ou encore ajouter Background:transparent, aux boites (box)

pour ajouter un élément, observer le code et ajouter dans les acolades
color:#FFFFFF;
background:transparent;
border:1px dotted #F6CBA5;

Avec le point virgule à la fin et un espace avant !!!

Il faut donc associer ces différents éléments pour modifier l'aspect des boîtes...


par Laglesine ajouter un commentaire commentaires (1)   
Samedi 21 avril 2007
publié dans : le cours particulier...
La connaissance n'est intéressante que si nous pouvons la partager. Dans cette nouvelle catégorie, vous trouverez au fur et à mesure des jours qui passent des explications sur quelques manipulations, techniques, méthodes. Evidemment, vous ne trouverez pas tout... (pas de recettes de cuisine, c'est plutôt moi qui aurait besoin de cours !!!) mais des élements de réponses sur des questions diverses, notamment sur la retouche de base des photos numériques, sur le format des fichiers images !

par Laglesine ajouter un commentaire commentaires (7)   
créer un blog sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus