- Statut : non résolu
- Ce sujet contient 16 réponses, 3 participants et a été mis à jour pour la dernière fois par
, le il y a 16 années et 11 mois.
-
Messages
-
Ma configuration WP actuelle :
– Version de WordPress : 2.5.1
– Thème utilisé : Big Blue 0.1
– Plugins en place : peu importe
– Nom de l’hebergeur : Online
– Adresse du site : http://cms.berlineur.euEDITE LE 31 MAI
Problème(s) rencontré(s) :
Salut à tous,
Pour expliquer mon problème, je vous invite à voir à quoi ressemble actuellement mon blog (adresse ci-dessus), et de regarder maintenant à quoi je voudrais qu’il ressemble :http://cms.berlineur.eu/wp-content/maquette2.jpg
L’idée est donc d’insérer, au dessus des 2 sidebars et collé au header, une nouvelle zone qui ferait la largeur des 2 sidebar réunies (450px) et qui serait une sorte d’accueuil des lecteur différent selon que celui-ci est membre ou anonyme.
Pour le lecteur anonyme, je pense que c’est le plus simple : une image.jpg qui contient tout (avatar anonyme, phrase d’accueil « bienvenue anonyme » et un « mappage » de la phrase « vous n’êtes pas n’importe qui ? » qui dirige vers la page /wp-login.php.
Pour le lecteur-membre c’est plus compliqué. Il faudrait une image en quelque sorte « vierge » et y inserser ensuite à l’aide de codes, la phrase d’accueil (« Bienvenue xxx ») et son avatar.
Ce que je sais faire :
– Accueillir les visiteurs (« bienvenue, invité » ou alors « bienvenue, pseudo » lorsque l’utilisateur est reconnu). Je connais les codes à insérer.
Ce que je ne sais pas faire :
Tout le reste en fait :-Inserer la nouvelle zone au dessus des sidebars (débuts de réponses grâce à Comme une image avant l’édit)
-Remplir le code de cette nouvelle zone pour que ça affiche soit l’image prédéfinie pour un lecteur anonyme, soit une image vierge puis les codes correspondants, à la bonne place !, pour un lecteur-membre……
Je vais bien entendu encore essayer de trouver les solutions moi-même (comme je l’ai fait pour l’accueil des visiteurs), mais j’ai posté tous mes problème, histoire que si quelqu’un connait telle ou telle réponse [sans forcément avoir le temps ni l’envie de se pencher sur le problème dans sa globalité] il/elle puisse m’aider.
Merci beaucoup !
Toute aide est la bienvenue…
Bonne journée.Le 1er probleme : a la louche de la sidebar (il faut surtout penser en terme de cadre rectangulaire : tes div il y a une super extension firefox pour les dessiner (elle est tout le temps citée par tout le monde))
Un cadre aux bords arrondis -> Utiliser un div avec comme fond une image bleu arrondi
Ton pb n’est que du CSS… Lit quelques tuto pour comprendre…
Un site et un forum puissant : http://www.alsacreations.com/Je vote comme jmini : sidebar ! Il faudrait que tu places en début de sidebar une div avec le fond bleu arrondi souhaité, qui chapotera les deux colonnes de widget.
Tu aura p-ê besoin d’une margin-top négative pour coller cet élément à ton header.Merci pour vos réponses… j’allais justement poster un nouveau message :
Je ne suis pas un débutant mais pas non plus un expert, disons qu’à force de mettre les mains dans le cambouis j’ai pas mal appris.
Seulement là, le style.css du thème big blue 0.1 que j’utilise désormais est totalement « bordélique » !!! Aucune mise en relief des différentes parties, tout se suit et se ressemble et j’ai vraiment, vraiment beaucoup de mal à m’y retrouver.
Comment puis-je faire pour rendre le css lisible ?
Merci.Un extrait du css :
div.post img {width:100%}
#sidebar{float:right;width:450px;margin:0;padding:20px 0 0;}
.rsidebar{float:right;width:230px;margin:0;padding:0; overflow:hidden;}
.rsidebar h2{background:url(images/h2c.gif) no-repeat;height:22px;font-size:13px;font-weight:700;color:#6995c2;margin:0;padding:0 0 10px 8px;}
.postmetadata{background:#eee;border-bottom:1px #ccc solid;border-top:1px #eee solid;font-size:10px;margin:0;padding:5px;}
.boxcomments{border-top:5px solid #ddd;border-bottom:5px solid #ddd;margin-bottom:20px;width:510px;}
#commentform{border-top:1px solid #eee;margin:0;padding:15px 15px 1px;}
#commentform label{display:block;margin:0;}
#commentform input{width:170px;margin:0 5px 10px 0;padding:1px;}
Ce deuxième message séparé du 1er pour tenir compte de ce que j’ai fait.
Le theme se compose des templates sidebar.php (pratiquement vide à part le « get lsidebar » et « get rsidebar »), puis de lsidebar.php et rsidebar.php.
J’ai donc créé un nouveau template newsidar.php, que j’ai pour l’instant laissé vide (à part la coquille).
J’ai aussi appelé cette newsidebar en modifiant sidebar.php
J’ai ensuite essayé d’ajouer la newsidebar à la feuille de style, mais celle-ci étant illisible j’ai un peu fait n’importe quoi :
#sidebar{float:right;width:450px;margin:0;padding:20px 0 0;}
.newsidebar{float:center;width:450px;margin:0;padding:0;}
.newsidebar h2{background:url(images/bienvenue2.jpg) no-repeat;margin:0;padding:0 0 0px 0px;}
.rsidebar{float:right;width:230px;margin:0;padding:0; overflow:hidden;}
.rsidebar h2{background:url(images/h2c.gif) no-repeat;height:22px;font-size:13px;font-weight:700;color:#6995c2;margin:0;padding:0 0 10px 8px;}
Et j’ai bien sûr créé sous photoshop le rectangle aux bords arrondis que j’ai transféré sur le serveur, en suivant le chemin indiqué dans le css (/images/…).
Résultat :
Une 2e sidebar de gauche vient se placer à l’endroit où j’aurais aimé avoir mon cadre, soit au dessus des 2 autres sidebar, qui restent elles en l’état. Pas de trace de mon rectangle.
PS : c’était avant vos réponses…
Pour ta première question : je pense qu’il faut se palucher ça à la main. Il existe p-ê des outils du genre CSS organizer (pas testé) qui pourront faciliter ta tâche… Mais je ne suis pas sûr qu’on puisse zapper l’intelligence humaine sur un sujet comme ça.
Ne serait-ce que la question de : comment regrouper les infos ? Il y a plein d’organisations possibles ; par page, par zone, par type de balise, etc.Pour la seconde, je n’ai pas très bien compris où tu en étais. Si tu pouvais éviter de réviser le contenu de tes précédents messages (hormis quelques retouches formelles), et t’en remettre à une chronologie linéaire, ce serait plus simple.
Cher Comme une image,
Tu as tout a fait raison sur le 2e point. Je vais m’y attacher.
Quant à CSS organizer ça à l’air de marcher impécablement… merci.Pour que ce soit clair et par étape, j’ai pensé que la 1ere chose que je devais apprendre, c’est de placer un nouveau « bloc » (?) au dessus des 2 sidebar et collé au header. Et même ça je n’ai pas réussi à le faire.
Bon, tu as une div-sidebar qui contient elle-même une div-lsidebar et une div-rsidebar.
Je te propose de les faire précéder d’une div-topsidebar qui contiendra ton bouzin.Je viens de vérifier : il te faut une margin-top à -20px pile poil.
donc :
C’est impecab’ !!! Merci beaucoup comme une image… Je vais maintenant essayer de me débrouiller pour le reste je pense pouvoir m’en sortir.
Webexpert devrait m’y aider… ?
Merci encore.Bonsoir,
Bonsoir Comme une image, devrais-je préciser 😉Après avoir créé le background servant de base à mon petit projet, j’ai utilisé webexpert et ai réussi à crééer 2 codes de tableaux :
– Le 1er sert à accueillir les visiteurs anonymes
– Le 2nd à accueillir les membresJe dois maintenant insérer la « balise » permettant de distinguer quel tableau doit être utilisé dans les 2 cas.
J’ai dans mon widget.php le code suivant :
…que je pense pouvoir adapter à cette situation dans sidebar.php (n’ayant pas les connaissances nécéssaires pour créer ce code moi-même.
Autrement dit, il me faut maintenant relier ces 2 tableaux en fonction de la reconnaissance des membres (abonnés) et des anonymes…
C’est là que je colle.
Dans l’attente d’une réponse, je continue à bidouiller.Pour info, l’exemple de mon tableau n°1 (le 2 est copié/collé et adapté à partir de celui-ci) :
Bienvenue Anonyme !
Vous n’êtes pas n’importe qui ?
Des tableaux ? Mouais…
Pour le positionnement des éléments, normalement, on n’est plus trop censés utiliser ça… m’enfin…Bon, sinon, le code à positionner est tout simplement le suivant :
Enfin… j’espère !
Help => Google « php boucles de contrôles »J’ai réussi à faire presque tout ce que je voulais, mais manque plus qu’un seul petit truc :
Je veux afficher le message
« Bienvenue untel » avec le nom du membre à la place d’untel. Quel est le code correspondant ?
Willkommen nom du membre
Merci de votre aide !
Le même code que comme une image proposé différemment :
J’ai mis les portions d’HTML de ton code, mais je n’aprouve pas du tout ces font color qui sortent du moyen age (milieu des année 90 à l’échelle d’Internet)
On est en 2008 –> Feuille de style CSS !!!
je recommande la lecture de : Apprenez à créer votre site web ! sur le site du 0 (tout apprendre à partir de 0)Lol je n’arrête pas de me faire traiter de has been en ce moment ! Pourtant je ne suis qu’un petit débutant inoffensif qui essaye de bricoler :rolleyes:
En tout cas merci beaucoup pour ta réponse, et encore merci à Comme une image pour son aide jusqu’ici.
Pour le fait que j’utilise des techniques de l’âge de pierre, je pense apprendre beaucoup ces prochaines semaines, maintenant que j’ai du temps, et que j’ai appris a utiliser wordpress en interne 😉
On peut donc dire que mon probleme est ✅
Ah non attendez deux petites minutes. Une dernière question (je ne me vois pas ouvrir directement une nouvelle discussion pour un détail comme celui-ci :
J’ai appris ici a placer un cadre juste en dessous du header. Que faudrait-il modifier pour qu’il soit collé au… footer ?
Simple curiosité car je travaille sur un autre cadre…
Lg wrote:Lol je n’arrête pas de me faire traiter de has been en ce moment ! Pourtant je ne suis qu’un petit débutant inoffensif qui essaye de bricoler :rolleyes:Il y a peut être une raison…
Et là ou je suis d’accord, c’est qu’il faut bien commencer par quelque chose lorsque l’on mets les mains dans le cambouis…Simplement, il me semble qu’il est intéressant d’apprendre tout de suite avec les méthodes moderne (et ce qui se fait en ce moment).
J’ai l’impression que les débutant sont plutôt bien traité sur ce forum, et que même si on te conseille de passer à autre chose que les table et les font, on apporte quand même des réponses…
Désolé pour ton coup du « collé au footer », je ne vois pas trop…
- Vous devez être connecté pour répondre à ce sujet.