Les Contes de

  • : Les Contes du Chat Perché (au sixième étage, sans ascenseur)
  • zoelie
  • : Journal Intime
  • : Faites une thèse, faites une thèse, qu\'ils disaient... J\'aurais mieux fait de rester faire la troglodythe avec ma chatoune sous les toits de Paris, au sixième étage sans ascenseur !
  • Recommander ce blog
  • Retour à la page d'accueil

Etre au courant

Inscription à la newsletter
 

Jeudi 23 juin 2005
Vous avez bien compris comment transformer vos modules, mais maintenant, une question vous taraude encore : Comment faire une transformation donnée sur UN SEUL module ?

C'est possible.
En effet, pour agir sur l'ensemble des modules, on utilise le mot-clé .box .
Et bien, il existe en fait un mot-clé par module:

Les deux modules de texte libre sont appelés par les mots-clé : #RightPart et #LeftPart, même si ceux-ci ne sont pas nécessairement à gauche ou à droite...

Le calendrier, on l'a vu, s'appelle #Calendrier .

Le module des catégories : #Categorie .

Le module où sont affichés les derniers commentaires : #CommentRecent .

Le module où sont affichés les derniers articles : #ArticleRecent .

Le module où sont affichés les articles des derniers mois : #Archive .

Le module de vos liens : #Lien .

Le module de vos albums : #Album .

Le module d'images aléatoires de chacun de vos albums : #aleaIm .

Le module de recherche par mot-clé (sur Google pour l'instant, mais limité à votre blog) : #Recherche .

Le module contenant " Créer votre blog gratuit " : #Concours .

Le module de W3C : #Syndication .

Le module de Présentation : #Presentation .

Le module pour s'inscrire à la Newsletter (Tiens, d'ailleurs, si vous n'avez rien à faire, là, tout de suite, inscrivez-vous à la mienne, comme ça, j'aurais peut-être un jour la possibilité de passer en Privilège et je pourrais trouver pleeeeins d'autres TIP's) : #Newsletter.

Bref, vous avez compris l'idée ... Ils sont au départ dans le CSS sous forme de déclaration:
#LeftPart {}

Pour les modifier un par un, il suffit de procéder comme pour le .box :
Par exemple, en tapant :

#LeftPart {
font-family: "Comic Sans MS",Times New Roman, Helvetica, Arial, sans-serif;
background:transparent url(http:// gnagna.jpg) repeat-x scroll top left;
}

... vous mettez un fond et une police spéciale à un de vos modules Texte Libre (il suffit de tester pour voir lequel...) Attention: background du module, ce n'est pas tout à fait pareil que background de .box-content ...

En effet, un background appliqué au module rendra toute la place dévolue au module, y compris les contours et parfois même au-delà, si vos bordures de module possèdent un attribut margin...
Pour appliquer une image de fond uniquement dans la boîte intérieure du module, celle qui est appelée .box-content dans le cas général, il faut créer une sous-classe de l'identifiant #Nom_du_module, qui référera au .box-content du module :

#Calendrier .box-content{
margin: 37px 28px 37px 28px;
background-attachement:fixed;
background-image:
url(http://idata.over-blog.com/0/05/85/46/images-manga/chobit.jpg)
}

... donne le résultat que vous pouvez voir dans le calendrier à droite (enfin, jusqu'à ce que je change d'avis...)

Puis, on peut finasser en créant une autre sous-classe de, par exemple #Leftpart, qui, cette fois, va faire référence au titre du module désigné :

#LeftPart h2 {
margin:15px 0px 15px 0px;
font-size: 12px;
text-align:right;
background:transparent url(http:gnagnaTitre.jpg) no-repeat scroll top left;
}

ce qui modifie le titre du-dit module ( h2 étant ici le sélecteur "titre" qui s'applique au sélecteur #LeftPart) et vous permet d'y placer une image à côté du titre et de "caler" celui-ci en fonction de cette image, sans affecter les autres modules ...
Osannah, Osannah .

C'est Bonheur !
Non ?




par Zoélie publié dans : TIP's
recommander

Commentaires

Euh du bonheur du bonheur c'est vite dit lol Sur ce coup la j'ai vraiment rien compris! lol...bon et bien j'y retourne!^o^

sugi
commentaire n° : 1 posté par : sugihyde (site web) le: 28/06/2005 16:17:50
Je me suis inscrite à ta newsletter ^^

sugi
commentaire n° : 2 posté par : sugihyde (site web) le: 28/06/2005 16:45:24
d'accord mais pour le texte libre, comment il s'appelle dans le css, (en résumer):
texte libre : #????????
Merci de me répondre dans mon livre d'or stp.
commentaire n° : 3 posté par : mangas 94 (site web) le: 28/06/2005 20:53:00
Merci, je vais essayer
commentaire n° : 4 posté par : mangas 94 (site web) le: 29/06/2005 11:24:34
Peux-tu me donner un coup de main j'aimerais mettre des séparation s dans un de mes modules, mais je n'ai pas trouvé, j'ai pourtant cherché dans le forum!!Très sympa ton dernier article, on attend la suite!!
commentaire n° : 5 posté par : LOUCO (site web) le: 30/06/2005 18:49:48
bonjour zoélie
je lis ts tip's avec intérêts mais j'ai un p'tit problème : je voudrais modifier mon module catégorie, et tu dis qu'il faut modifier le mot-clé #catégorie.
mais je n'est pas ca dans mon css, est ce qu'il faut le créer ?
Merci
commentaire n° : 6 posté par : bolotof (site web) le: 25/07/2005 11:24:01
lol Bon j'ai tt compri mai le problème c qe je trouve pas tous ces mots sur mon CSS (en mêm temps sa métone pas vu tout le fouilli qe j'ai mi a force de faire des modifs) enfin bon merci qan mêm et jvai faire a lancienne : jvai touché a tous, tout partout lol. Sinon merci de ton aide , ton blog est super et bonne continuation. Tchao
commentaire n° : 7 posté par : Aym (site web) le: 31/07/2005 15:01:58
merci pour tes trucs et astuces ,ton blog est parfait
[edit: au retour de mon hospitalisation je m'inscrirai à ta newletter
amitié
lionel (ton dévoué serviteur)
commentaire n° : 8 posté par : lionel (site web) le: 02/08/2005 08:09:28
Déjà félicitations pour ce magnifique blog!! Et un ENORME MERCI pour l'aide que tu m'as apporté pour les modules. Cela faisait des semaines que je cherchais comment faire. Un tit clic sur ton blog (vu sur le forum) et tu as répondu à ma question existentielle (maintenant, faut que j'en trouve une autre lol). En tout cas, merci de m'aider (même si c'est pas blog interposé)
commentaire n° : 9 posté par : Clem (site web) le: 02/08/2005 15:03:15
J'halucine franchement devant la beauté de ce super blog !!!!!

cet article m'a parmis d'affiner le design de mon blog^^

contunue comme ça PS: je me suis inscris à ta newsletter dès ma 2ème visite sur ton blog!!
commentaire n° : 10 posté par : Jet (site web) le: 07/08/2005 11:06:10
Zoélie, c'est un régal... et en plus les conseils "techniques" sont super chouettes". Merci, je me suis abonnée!!!
commentaire n° : 11 posté par : Marie de la Chaume (site web) le: 19/08/2005 10:10:48
je n'arrive pas a changer les noms des module.
commentaire n° : 12 posté par : bijou (site web) le: 22/09/2005 17:02:30
peux tu me dire comment faire pour que sur ma page d'accueil apparaisse qu'1 article et non pas tout mes articles
merci
commentaire n° : 13 posté par : bijou (site web) le: 22/09/2005 17:12:43
Ca a l'air pasionnant, mais g rien compris...
commentaire n° : 14 posté par : L'équipe de Tréteaux & Jeunesse (site web) le: 08/10/2005 20:10:02
Magnifique Zoélie! Fantaisie, poésion, clarté et précision s'accordent meirveilleusement bien, est c'est bonheur, non? Merci!
commentaire n° : 15 posté par : Association Jessica (site web) le: 20/10/2005 21:59:54
Je crois que tu vas etre la seule à pouvoir m'aider.... je voudrais enlever la bande bleue et le trait noir qui se trouvent dans l'en tête de mon mon titre...
mais je suis pas douée, et je n'y arrive pas... peux tu m'aider ???
merci beaucoup...




J'ai mis un mot sur ton blog ;) Si c'est pas ca que tu voulais, dis-moi ...
commentaire n° : 16 posté par : EgerieStyx (site web) le: 26/10/2005 09:46:46
Oh si c'est ce que je voulais...! tu es extra...maintenant, j'ai la flippe de le faire (j'ai peur de tout foirer...mais je vais tenter !!!)
Merci merci beaucoup... je te garde dans mes favoris pour te lire (très jouuuuuuli blog, tu es une pro) et pour t'appeler au secours !!!
;-)
merci encore merci !!!
commentaire n° : 17 posté par : EgerieStyx (site web) le: 26/10/2005 15:11:48
Coucou Zoélie, j'aimerais solliciter ton aide. Tu m'avais dit il y a quelque temps qu'il serait bien que je personnalise mon blog, il y a tout un tas de choses que je n'arrive pas à faire. Par exemple, faire une fenêtre de commentaires dans le même genre que celle-ci et mettre des petites notes de musique autour des modules. J'ai consulté les articles, mais je ne comprends pas tout. Peux-tu m'aider ?


Pour personnaliser la fenetre pop-up des commentaires, c'est prevu ... a venir donc ;)
Pour mettre des notes de musiques autour de tes moduless, il faut en faire une image qui servira de contour... voir: Changer les contours des modules.
commentaire n° : 18 posté par : Marisa (site web) le: 26/10/2005 16:37:53
Bon, j'ai tenté ce que tu m'avais dit en priant très fort... et bien sur, CA A MARCHE...
Je me prosterne devant toi....
mes respects !!!!!

MERCI MERCI MERCI
à bientot...


commentaire n° : 19 posté par : EgerieStyx (site web) le: 26/10/2005 17:50:28
Un grand merci Zoélie ! Une fois encore j'ai réussi à faire ce que je voulais grace à ton blog !
commentaire n° : 20 posté par : Kegénie (site web) le: 01/11/2005 15:16:28
Salut Zoélie !
Avec ta méthode j'ai personnalisé mon module texte libre contenant mon menu.
Comment faire pour changer la couleur des bords sur le côté et en bas seulement sur ce module ?
merci de ta réponse.
rmain
commentaire n° : 21 posté par : Romain (site web) le: 26/11/2005 14:15:49
Kikou zoélie,
Déjà je voulais te dire que ton blog est vraiment super !! =)
Mais j'aimerais savoir comment fait-on pour changer juste le nom du module sans rien toucher aux couleurs forme etc....
Merci de répondre Bravo pour ton super travaille !! :)
commentaire n° : 22 posté par : ScOrpiuS (Guillaume) (site web) le: 28/11/2005 22:25:29

salut Zoélie, je dois être vraiment neuneu car malgré tes explications très claires je n'arrive pas à faire ce que je veux ; peux-tu m'aider ?


- je veux dans un ou plusieurs de mes modules (par ex Archive) placer une image de fond (comme celle que j'ai mise en fond de mes comm) mais quand je le fais, elle couvre aussi le TITRE du module en question. En fait je voudrais garder le titre tel quel (avec le petit carré orange et le titre actuel) et n'avoir l'image qu'en dessous.


As-tu compris ce que je veux dire ?


Si tu as 5 mn pour m'expliquer, car j'imagine que tu dois être pas mal sollicitée.


merci


framboise

commentaire n° : 23 posté par : Framboise (site web) le: 27/12/2005 14:18:58
Bonsoir !
Sais tu comment supprimer le titre des modules et le remplacer par une image uniquement ?
Merci
commentaire n° : 24 posté par : Melie (site web) le: 05/01/2006 02:11:38
Dans ton cas (note pour les autres : modele de blog 5 et +), je mettrais
.box-titre {display: none;} (pour supprimer les titres) et l'image en background de .box, avec background-position: top;
Pour mettre une image differente dans chaque module, il faudra la mettre dans l'identifiant correspondant au lieu de .box :
ex : #ArticleRecent {background: url(...) no-repeat top center ;}
     ..etc


Tres joli, ton blog, au passage ;)
réponse de : Zoelie (site web) le: 09/01/2006 17:52:04

bonjour
je ne sais plus à qui m'adresser... j'espère que tu pourras m'aider
j'ai neuf articles dans mon blog (site premium) et je voudrais que chacun d'eux puisse avoir une couleur différente. j'ai compris un certain nombre de choses dans la modification du css (avec l'outil de francisek entre autres) mais je ne sais comment me débrouiller avec #articleSeul quand je modifie un fond (#background-color), tous les articles sont touchés...


peux-tu me dire où est le problème ? ou me dire où trouver le renseignement....
merci d'avance

commentaire n° : 25 posté par : lambert palis (site web) le: 15/01/2006 10:27:22
Oui : si tu veux modifier les articles un par un, il ne faut pas le faire dans le CSS, car ca touche tous les elements du blog, par essence (le CSS est fait pour eviter de repeter a chaque le style dans le code HTML...)
La solution est donc de definir a chaque fois le background dans le code source de chaque article :
Tu cliques sur le bouton Source dans l'editeur d'article -> ca te donne acces au code HTML pour cet article.
Au tout debut du code, tu rajoutes <div style="background : #ta_couleur_de_fond ou url(adresse_de_ton_image_de_fond) ; ">
et tout a la fin du code, tu fermes la balise de style par </div>
Voila, j'espere que ca t'aidera ;)
réponse de : Zoelie (site web) le: 17/01/2006 14:39:54

bonjour,


franchement?j'ai rien compris...:s je trouve pas du tout #rightpart dans mon css,ni quoi que ce soit.Pourrais tu m'aider?


Pourquoi over blog (puisque c'est un blog, et donc on devrait pouvoir l'utiliser facilement sans connaissances) n'installerai pas un système direct qui permettrai de changer les couleurs (ou inserer une image)  des modules dans les options?ca faciliterai l'utilisation pour beaucoup je pense, et permettrai d'avoir un blog jolie et accessible pour tous.
Moi le css me dépasse complètement, et c'est pour ca que j'ai choisi d'utiliser le systeme de blog et non de site....mais voila je suis bloquée pour beaucoup de choses sur over-blog!


Merci de prendre le temps de faire des articles sur le css en tout cas!!!et tres beau site!


Merci de m'avoir lu!;-)


Amandine

commentaire n° : 26 posté par : izumichan (site web) le: 20/01/2006 17:57:22
J'ai fait un article pour répondre en détail, j'espère que tout ça te paraît un peu plus clair, même si je reconnais que, quand on n'a pas l'habitude, c'est pas évident au début ... mais si tu as compris ce que j'ai essayé d'expliquer, tu pourras comprendre comment faire toi-même tout un tas de changements, avec un peu d'habitude ...
Par contre, ce que tu demandes existe plus ou moins :D -> un outil pour visualiser les changements de couleur de texte et de fond, qui génère le CSS sans que tu aies à écrire une seule ligne de code, Francisek l'a fait (c'est là que j'ai fait mon design de base, d'ailleurs) : l'éditeur WYSIWIG de CSS pour Over-Blog, mais ça ne gère que les couleurs de textes et de backgournds, pas les images de fond. Cependant, c'est une très bonne base. Ensuite, pour avoir directement la bonne ligne à modifier pour faire des choses plus subtiles, tu as ce merveilleux outil ... Du coup, tu es en train de te dire que ça ne sert à rien de te taper mon dernier article ... et tu n'auras pas forcément tort ... mais c'est pour la beauté de la chose ;)
réponse de : Zoelie (site web) le: 20/01/2006 22:46:03

SALUT A TOI


tres beau travail sur ton blog !!!


j aurrais une question si tu veux bien :


comment s'appel le module W3C   #??????????


Merci d avance


PS : j'ai mis ton lien sur mon blog

commentaire n° : 27 posté par : CHEMINO KAOS (site web) le: 20/01/2006 22:26:49
Tu vas rire, mais c'est tout simplement ... #W3C ! (en majuscules)
Merci pour le lien ;)
réponse de : Zoelie (site web) le: 21/01/2006 00:00:53

merci Zoelie c'est tout simple en faite lol !!!


mais tu vas rire à ton tour : je n'arrive pas à trouver dans mon CSS

commentaire n° : 28 posté par : CHEMINO KAOS (site web) le: 21/01/2006 00:58:48
o(_ _)o

Ton commentaire prouve l'echec absolu de mon dernier article .... Je vais mettre en beaucoup,beaucoup plus gros que si tu trouves pas, ce n'est pas anormal (pour toutes les raisons citées dans l'article) et il n'y a qu'à l'ajouter .
réponse de : Zoelie (site web) le: 21/01/2006 01:32:20
merci pour ces petites infos meme si j'ai mis du temps a comprendre (boulet) j'ai juste un mini probleme, j'ai reussi a mettre un kaos(smilies jap') dans le module recherche mais je n'arrive pas a faire de meme pour le module commentaire et newsletter!!!! pourtant j'ai bien suivis toutes les indications sniff help me
commentaire n° : 29 posté par : kaminari (site web) le: 23/02/2006 12:55:43
C'est parce qu'il manque les accolades fermantes a la fin de tes lignes d'intructions ... du coup, il ne comprend plus ce qui suit car il croit que ca appartient encore a la ligne #Recherche ...
-> Rajoute ce qui est en rouge :
#Recherche {
margin:15px 0px 15px 0px;
font-size: 12px;
text-align:right;
background:transparent url(http://idata.over-blog.com/0/25/28/24/rechercher.gif) no-repeat scroll left; }

#Newsletter {
margin:15px 0px 15px 0px;
font-size: 12px;
text-align:right;
background:transparent url(http://idata.over-blog.com/0/25/28/24/rechercher.gif) no-repeat scroll right; }

Ensuite, quand tu mettras la ligne pour le module Artticles Recents, fais bien attention a terminer la ligne par } !
réponse de : Zoélie (site web) le: 23/02/2006 13:14:42

domo arigatou gosaimasu!!! (n_n)


juste pour une petite accolade, de quoi rendre folle!!!


encore merci pour tes précieux conseils!! ton blog est vraiment super!!!!

commentaire n° : 30 posté par : kaminari (site web) le: 23/02/2006 13:34:57
coucou ^^

Après avoir relu 40 fois ton article, je ne suis toujours pas arrivée à modifier le tite de mon cadre "texte libre". Pourrais-tu m'aider stp?

Merci d'avance :3
commentaire n° : 31 posté par : Thyo (site web) le: 11/04/2006 20:56:56

salut. Il y a un petit truc que tu ne traite pas dans tes article et qui me pose problème:


comment faire pour décaler sur le plan vertical le titre des modules???


merci!

commentaire n° : 32 posté par : gougou (site web) le: 21/05/2006 14:16:19
MERCIIIIIII grave à toi et à Sharleen j'ai tout compris :D Tres clair, tres efficace, nickel.
commentaire n° : 33 posté par : Bouclette (site web) le: 11/06/2006 14:22:10

bonjour zoelie cela fait un bout que j'essaie de transformer mon blog a mon image j'ai cherche dans la faq sur le forum de over blog et d'autres sites qui ont ete sité je ne sais combien de fois et la je commence avec ton blog et lorsque je vois ton blog je t'envie, donc peux tu m'aider


pour commencer j'aimerais mettre une image a coté de chaque titre de module differents ou dessus le titre


ensuite j'aimerais mettre un dessin a coté de ajouté un commentaire et commentaire ainsi que recommander puis j'aimerais faire les bulles que tu as sur ton site qui te sert de module si tu veux bien bien sur


pour le moment se sera tout car j'ai pas fini de visiter ton blog un grand merci meme si tu pouvais pas m'aider et merci de nous offrir un si magnifique blog qui est le tiens


ah oui comment fait tu pour que l'on differencie ton commentaire des autres du moins ta reponse car j'ai vu que tu a mis de la couleur et une photo pour differencier peux tu m'expliquer aussi merci et desolé pour ce long roman

commentaire n° : 34 posté par : tiffany (site web) le: 02/12/2006 23:50:26

Hello Zoélie tout d'abord ton blog et toute tes aides sont fantastique merci beaucoup ' c'est Marie odile qui ma dirigé vers Toi ,voila je suis vraiment novice je dirais même " nul " je comprend pas grd chose .. voila mon probleme j'aimerais faire des colonnes ds mon blog c'est a dire separer par un trait les modules de gauches texte libre :lien ,compteur ac mes articles et aussi a gauche ( tu comprend mon charabias lol ) en fin de compte j'aimerais que mon blog est 3 colonnes aie j'explique pas bien ... enfin un blog simple mais separer les modules de gauche et de droite ac mes textes lol


%erci d'essayer de me comprendre bisous

commentaire n° : 35 posté par : brigitte (site web) le: 16/01/2007 15:30:26

mon ami c'est trés merveilleux de vous ainsi aider les bloggeur novice comme moi mais mon ami j'ai peu de connaissance en informatique je comprend mais je ne sais comment my prendre et excuse ma franchise moi j'ai 40ans et il n'est jamais trop tard pour apprendre et avoir des prof comme toi.


comme on dit qu'elle est le plus beau cadeau que tu peut offrir à un ami . c'est une bonne idée qui l'aidera et enrichira ces connaissances et à la transmettre à d'autre et ton geste durera .


merci . ton site est vraiment riche et je t'en filicite .à bientot l'ami svp ne me fait pas trop attendre.

commentaire n° : 36 posté par : blondo (site web) le: 23/01/2007 23:24:59

Bonjour Zoélie,


Tout d'abord quel merveilleux blog,..., respect.


Respect aussi pour tout tes conseils, cependant au premier abord tout ne me semble pas si simple...


J'aurais voulu modifier d'une part le fond uniquement de mes modules mais aussi les polices...voir changer les titres par des images...mais problèmes, donc pourrais tu m'èclairer MERCI D'AVANCE

commentaire n° : 37 posté par : jean eric lacotte (site web) le: 08/02/2007 19:14:41

Bonjour,


moi je n'y connais rien au CSS mais je souhaite apprendre, alors un peu d'indulgence par rapport à mes questions qui sembleront simples pour un initié. Je voudrais que mes modules commencent  juste en dessous de la présentation alors qu'actuellement ils sont très en dessous (si tu regardes)


comment faut-il faire ?


Merci

commentaire n° : 38 posté par : catherine maillard (site web) le: 22/02/2007 12:33:14
Waw 0_o très jolie blog chapeau :D
J'ai bien compris ton article merci beaucoup je cherchais cette aide depuis longtemps ;-) !
J'ai  quand même une petite question
J'aimerais savoir quelle taille ne peuvent dépassées mes images pour les modules ( je suis en confiance si ca change avec les autres offres ^^ )

Merci bien,

J'adore la déco et l'aide c'est vraiment gentil ;-)
commentaire n° : 39 posté par : Plume (site web) le: 05/07/2007 18:41:15
Superjoli, ton Blog, Zoélie... C'est toujours un plaisir de le retrouver. Mais moi qui suis bien moins douée pour l'informatique, je suis en train de chercher comment réduire la marge de gauche du seul module "publicité", que j'ai placé en haut de la colonne de droite de mon blog. Je n'arrive pas à bien trouver comment il s'appelle dans le CSS et ne voudrais pas réduire la marge de tous les modules... Peux-tu m'aider ? J'ai mis un post sur le forum dans "Aide & design" (17/05 à 22h35). Mais tu peux prendre ton temps ; là je vais me coucher. Bisous.
commentaire n° : 40 posté par : Valentine (site web) le: 17/05/2008 23:19:37

Trackbacks

Aucun trackback pour cet article

Adresse de trackback pour cet article :

http://ann.over-blog.com/trackback.php?ref=58546&ref_article=501194
ajouter un commentaire créer un trackback  

Temps Perdu

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  
<< < > >>

C'est où ???

A votre tour !

Créez votre blog gratuit

Syndication

  • Feed RSS 2.0
  • Feed ATOM 1.0
  • Feed RSS 2.0
 
 
Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus