Page d'Accueil d'un forum RPG Harry Potter [Elenthil]

Mar 7 Juin - 13:00

gwenM

Age : 27Messages : 278

Mar 7 Juin - 13:00

Rappel du premier message :

Ma demande

Bonjour,

Je passe une commande pour le forum où je suis administratrice avec l'accord de la fonda :). Nous souhaiterions une nouvelle page d'accueil pour notre forum. Celle que nous voulions n'existe malheureusement pas en LS. C'est pourquoi nous passons commande ici. Et puis, sans vous mentir vous êtres très talentueux :p.
Bon voici le lien du forum en question si vous voulez y faire un tour (surtout pour vous inspirer des couleurs).
Merci d'avance au codeur qui acceptera de prendre ma commande en charge.

Schéma(s) et Eléments
Schémas : voici le schéma : ici
et les images des blasons :

https://2img.net/image.noelshack.com/fichiers/2016/23/1465304625-rrtlk1.jpg
https://2img.net/image.noelshack.com/fichiers/2016/23/1465304629-2gw838m.jpg
https://2img.net/image.noelshack.com/fichiers/2016/23/1465304631-34y9u7c.jpg
https://2img.net/image.noelshack.com/fichiers/2016/23/1465304633-5cki2u.jpg

Tailles des éléments : la taille est libre :)
Effets voulus : les images du staff arrondies comme sur le schéma. Après à voir si vous voulez rajouter des effets pour par exemple développer les informations concernant le staff ? (c'est assez libre) Pour les prédéfinis c'est la même chose :).
Dernière chose : Du côté des blasons si possible, il faudrait qu'il soit aligné et que lorsqu'on passe la souris dessus, qu'on puisse voir le nombre de point.
Version de votre forum : PHPBB2

Ressources
Aucune image de fond : simple couleur qui rappelle le forum. Je ne crois pas que les photos du staff rentre dedans.

Autres précisions ?
Je pense que le schéma est assez explicite ? Je remercie d'avance le codeur qui prendra cette commande en charge.

Dernière édition par gwenM le Sam 2 Juil - 11:54, édité 3 fois

Jeu 23 Juin - 21:21

gwenM

Age : 27Messages : 278

Jeu 23 Juin - 21:21

Hello :)

je vais montrer ça à la fonda (donc je te répondrais donc peut-être demain si j'ai eu son avis) :) Juste une petite chose : c'est normal lorsque j'essaye de passer sur les blasons que je ne vois pas les points qui apparaissent ? C'est peut-être un bug de mon ordi, mais lorsque je passe ma souris dessus, je n'ai rien (je sais pas si tu vois). Sinon je trouve ça parfait. Après c'est vrai que pour la police c'est beaucoup plus jolie avec le Grand Hotel (mais si vraiment tu peux pas c'est pas grave). Pour les différents liens je suppose que ça ne sera pas compliqué pour mettre la même police ? Bref, je passe tout ça en zone admin et je te tiens au courant.

Bonne nuit :love:

Jeu 23 Juin - 21:46

Elenthil

Age : 36Messages : 2184

Jeu 23 Juin - 21:46

Alors pour le souci des blasons normalement c'est résolu, je viens de faire un test sous Chrome.

Pour la police Grand Hotel je la mettrais demain (là dodo xD) et puis comme tu dis ça sera très rapide à mettre

Pour les liens, la police est Tahoma, sauf pour les liens du staff qui en est une autre. Tu veux donc que j'harmonise les liens avec Tahoma ou l'autre ? Mais il faut que tu me dises laquelle ^^

Merci bonne nuit à toi aussi :)

Ven 24 Juin - 9:05

Elenthil

Age : 36Messages : 2184

Ven 24 Juin - 9:05

Double post pour dire que j'ai changé la police pour les prédéfinis ^^

Je n'attends plus que la validation de ta fonda et ton staff et ta décision pour la police des liens, les dernières retouches à faire si tu le demandes mais sinon c'est tout bon :hug:

Désolé d'avoir pris autant de temps pour la faire. Normalement j'aurais été plus efficace sans les exams mais là c'était un peu dur <<

Ven 24 Juin - 19:00

gwenM

Age : 27Messages : 278

Ven 24 Juin - 19:00

Hello,

Ne t'inquiète pas donc, j'ai vu avec la fonda. C'est parfait : c'est exactement ce qu'on voulait :)
Pour les liens c'est quelle police ? ça serait possible de tout mettre en Grand Hotel ? Sinon c'est tout bon :). Tu n'as aucune retouche à faire :)

Encore merci :love:

Sam 25 Juin - 9:41

Elenthil

Age : 36Messages : 2184

Sam 25 Juin - 9:41

Je pense que j'ai compris ce que tu voulais dire pour les liens.

Regarde le forum et dis moi si c'est ça que tu voulais ?

Sam 25 Juin - 10:31

gwenM

Age : 27Messages : 278

Sam 25 Juin - 10:31

Parfait merci :) c'est tout bon :) j'ai plus rien à dire et la fonda c'est pareil. On adore ta PA encore merci :love:

Sam 25 Juin - 17:00

Elenthil

Age : 36Messages : 2184

Sam 25 Juin - 17:00

Je suis super contente que ça vous plaise :lovebomb:

Alors voici les codes pour l'installation. Je reste disponible bien sûr si il y a un bug, si vous avez un problème ou quoi que ce soit de plus, donc n'hésite pas à demander ^^

1) Allez dans l'onglet Modules => Partie HTML & Javascript => Gestion des Pages HTML
2) Cliquer sur le bouton "Création en mode avancée HTML"
3) Dans la fenêtre qui s'ouvre, donner un titre à la page (exemple : PA) et ne pas toucher aux deux boutons plus bas
4) Copier/coller le code suivant en entier :

Code:: <!DOCTYPE html> <html> <head> <!- PA pour GwenM réalisée par Elenthil -> <meta charset='utf-8' /> <link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css' /> <link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css' /> <style type='text/css'> /* MISE EN FORME PA */ body{ margin: 0px; } .bloc_pa{ width: 900px; background-color: #E8E8E8; /* Pour changer la couleur du fond de la PA */ } .bloc_pa h1{ text-align: center; margin: 0; font-family: 'Grand Hotel', cursive; /* Pour changer la police du titre Bienvenue sur le forum */ color: #809EA8; /* Pour changer la couleur du titre Bienvenue sur le forum */ text-shadow: 1px 1px #4b4b60; } /* MISE EN FORME MENU DE NAVIGATION */ .menu_nav{ width: 900px; margin-bottom: 25px; } .bloc_pa ul{ margin: auto; padding: 0; text-align: center; } .bloc_pa li{ display: inline-block; } .menu_nav a{ text-decoration: none; color: #707070; /* Pour changer la couleur des liens de navigation sous le titre */ font-family: Grand Hotel; /* Pour changer l'écriture des liens de navigation sous le titre */ font-size: 22px; /* Pour changer la taille des liens de navigation sous le titre */ } .menu_nav a:hover{ text-shadow: 1px 1px 3px #809EA8; } /* BLOC CONTEXTE - STAFF - ACTUALITES */ .bloc_ligne1{ width: 900px; } .bloc_contexte, .bloc_news{ width: 320px; height: 200px; display: inline-block; vertical-align: top; } .contexte, .news{ width: 295px; height: 175px; background-color: #C2CAC6; /* Pour changer la couleur du bloc contexte et du bloc news */ margin: auto; position: relative; overflow: hidden; } .contexte p { font-family: Tahoma; /* Pour changer la police d'écriture du texte contexte */ font-size: 11px; line-height: 14px; padding: 5px; margin: 0px; color: #707070; /* Pour changer la couleur du texte contexte */ text-align: center; } .contexte p a { text-decoration: none; font-weight: bold; color: #707070; /* Pour changer la couleur du lien contexte */ } .contexte p a:hover{ text-shadow: 1px 1px 3px #E8E8E8; } .contexte img{ position: absolute; top: 0px; left: 0px; transition: 1s ease left; width: 100%; height: 100%; } .contexte:hover img{ left: -355px; } .titre_news{ margin: 0; font-size: 22px; /* Pour changer la taille du titre Actualités */ font-family: Grand Hotel; /* Pour changer la police d'écriture du titre Actualités*/ color: #707070; /* Pour changer la couleur du titre Actualités */ font-weight: normal; text-align: center; } .news{ overflow: hidden; /* CHANGER HIDDEN EN AUTO SI BESOIN DE BLOC DEROULANT */ } .news p{ font-family: Tahoma; /* Pour changer la police du texte dans le bloc News */ padding: 5px 5px 5px 10px; font-size: 11px; margin: 0; line-height: 14px; color: #707070; /* Pour changer la couleur du texte du bloc News */ } .bloc_staff{ width: 250px; height: 200px; display: inline-block; } .staff{ width: 290px; height: 195px; text-align: center; } .rond_staff{ height: 60px; width: 60px; border-radius: 70px; background-color: #C2CAC6; display: inline-block; margin-top: 20px; overflow: hidden; } .profil_staff{ width: 129px; height: 160px; text-align: center; display: inline-block; } .position_D{ position: relative; right: 20px; } .position_G{ position:relative; right: 20px; } .profil_staff p, .profil_staff p a{ margin: 0; font-family: 'Oswald', sans-serif; /* Pour changer la police d'écriture du texte des membres du staff - Attention, si décalage du bloc suite au changement, réduire l'écriture avec un font-size */ line-height: 10px; color: #707070; /*Pour changer la couleur du texte des membres du staff */ } .profil_staff p a{ text-decoration: none; } .profil_staff p a:hover{ text-decoration: underline; } .texte_rangstaff{ font-family: Tahoma; /* Pour changer la police d'écriture du rang Staff */ font-variant: small-caps; font-size: 10px; } .position_infostaff{ position: relative; top: 7px; } /* BLOCS VIDEO - PREDEFS - COUPE */ .bloc_ligne2{ width: 900px; } .bloc_video, .bloc_coupe{ width: 320px; height: 200px; display: inline-block; vertical-align: top; } .video, .coupe{ width: 295px; height: 175px; background-color: #C2CAC6; /* Pour changer la couleur des blocs video et coupe des maisons */ margin: auto; } .video iframe{ position: relative; top: 5px; left: 5px; } .position_badges{ margin: auto; text-align: center; position: relative; z-index: 10; } .position_badges p { margin: 0; font-size: 22px; font-family: Grand Hotel; /* Pour changer la police d'écriture du titre Coupe des 4 Maisons */ color: #707070; } .badge{ display: inline-block; margin: 0px 20px; z-index: 10; position: relative; background-color: #C2CAC6; /* Pour changer la couleur de fond derrière les blasons des maisons pour cacher le texte et harmoniser avec la couleur du bloc */ width: 75px; bottom: 3px; height: 65px; } .badge img{ width: 64px; opacity: 1; transition: 500ms; z-index: -7; background-color: #C2CAC6; /* Pour changer la couleur derrière les blasons car image en png transparente */ } .badge img:hover{ opacity: 0; } .badge .ptsH{ position: absolute; bottom: 32px; z-index: -3; color: #B91D22; /* COULEUR POINTS GRYFFONDOR */ font-family: Tahoma; /* Pour changer la police d'écriture des points de Gryffondor et Poufsouffle */ font-size: 11px; margin-left: 10px; font-weight: bold; } .badge .ptsB{ position: absolute; bottom: 30px; z-index: -3; color: #016A96; /* COULEUR POINTS SERDAIGLE */ font-family: Tahoma; /* Pour changer la police d'écriture des points de Serdaigle et Serpentard*/ font-size: 11px; margin-left: 10px; font-weight: bold; } .ptsH.couleurP{ color: #A5860B; /* COULEUR POINTS POUFSOUFFLE */ } .ptsB.couleurS{ color: #204A22; /* COULEUR POINTS SERPENTARD */ } .bloc_predefs{ width: 250px; height: 200px; display: inline-block; } .predefs{ width: 250px; height: 195px; text-align: center; margin-top: 25px; } .rond_predef{ width: 40px; height: 40px; border-radius: 40px; background-color: #C2CAC6; display: inline-block; text-align: center; margin: 0px 5px; overflow: hidden; } .predefs a { text-decoration: none; } .titre_predefs{ margin-bottom: 15px; font-family: Grand Hotel; /* Pour changer l'écriture du titre Prédéfinis */ color: #707070; /* Pour changer la couleur du titre Prédéfinis */ font-size: 22px; margin-top: 0; } /* BLOC PARTENAIRES - CREDITS */ .bloc_ligne3{ width: 900px; height: 52px; text-align: center; } .creditsNU, .creditsNU a { font-family: Tahoma; /* Pour changer la police d'écriture des crédits pour NU */ font-size: 9px; margin: 0; color: #707070; /* Pour changer la couleur pour le texte des crédits pour NU */ } </style> </head> <body> <div class="bloc_pa"> <!- TITRE DU FORUM -> <h1>Bienvenue sur "Nom du Forum"</h1> <!- BARRE DES LIENS DE NAVIGATION (Remplacer # par les liens) -> <div class="menu_nav"> <ul> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> </ul> </div> <div class="bloc_ligne1"> <!- BLOC CONTEXTE AVEC TEXTE + LIEN (Remplacer # par le lien) -> <div class="bloc_contexte"> <div class="contexte"><p> Vingt années se sont écoulées depuis la chute de Lord Voldemort vaincu par le célèbre Harry Potter. Le monde des sorciers est de nouveau sur pied et un nouveau ministre de la magie a été nommé, un certain Cassius Owell qui avait pris part à la bataille finale à Poudlard comme membre de l'Ordre du Phoenix.<br /> Contrairement à l'idée préconçue, Harry Potter n'est pas devenu Auror comme son père avant lui, le nouveau Ministre de la Magie et les membres du Magenmagot lui ont demandé de devenir le nouveau directeur de Poudlard, Minerva McGonagall ne pouvant assumer ce rôle... <br /> <a href="#">Lire la suite</a></p> <img src="http://i35.servimg.com/u/f35/19/45/46/99/gif_po10.gif" /> <!- EMPLACEMENT DU LIEN GIF CONTEXTE - Dimensions 295*175px -> </div> </div> <!- BLOC STAFF CENTRAL -> <div class="bloc_staff"> <div class="staff"> <div class="profil_staff position_G"> <div class="rond_staff"> <!- REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton11.jpg" alt="membre_staff" /> </div> <p>Cassius Owell <br /> <!- NOM DU MEMBRE DU STAFF -> <span class="texte_rangstaff">Fondateur</span> <br /> <!- RANG DU MEMBRE DU STAFF -> <span class="position_infostaff"> <a href="#">Profil</a> <a href="#">Mp</a> <!- REMPLACER # PAR LIEN PROFIL ET LIEN MP -> </span> </p> </div> <div class="profil_staff position_D"> <div class="rond_staff"> <!- REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton11.jpg" alt="membre_staff" /> </div> <p>Célian R. Lestrange <br /> <!- NOM DU MEMBRE DU STAFF -> <span class="texte_rangstaff">Administrateur</span> <br /> <!- RANG DU MEMBRE DU STAFF -> <span class="position_infostaff"> <a href="#">Profil</a> <a href="#">Mp</a> <!- REMPLACER # PAR LIEN PROFIL ET LIEN MP -> </span> </p> </div> </div> </div> <!- BLOC ACTUALITES -> <div class="bloc_news"> <div class="news"> <h2 class="titre_news">Actualités</h2> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> </div> </div> </div> <div class="bloc_ligne2"> <!- BLOC VIDEO -> <div class="bloc_video"> <div class="video"> <!- INSERER IFRAME YOUTUBE A LA PLACE DU LIEN / Dimensions : 285*165 -> <iframe width="285" height="165" src="https://www.youtube.com/embed/mObK5XD8udk" frameborder="0" allowfullscreen></iframe> </div> </div> <!- BLOC PREDEFINIS -> <div class="bloc_predefs"> <div class="predefs"> <p class="titre_predefs">Prédéfinis</p> <!- IMAGES PREDEFINIS / Remplacer # par lien du predef / Dimensions de l'image : 40*40 -> <a href="#"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a> <a href="#"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a> <a href="#"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a> <a href="#"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a> </div> </div> <!- BLOC COUPE DES 4 MAISONS -> <div class="bloc_coupe"> <div class="coupe"> <div class="position_badges"> <p>Coupe des 4 Maisons</p> <div class="badge"><img src="http://i35.servimg.com/u/f35/19/45/46/99/griffo11.png" alt="gryffondor" /> <p class="ptsH">500 points</p> <!- POINTS GRYFFONDOR -> </div> <div class="badge"><img src="http://i35.servimg.com/u/f35/19/45/46/99/poufso11.png" alt="poufsouffle" /> <p class="ptsH couleurP">500 points</p> <!- POINTS POUFSOUFFLE -> </div> <div class="badge"><img src="http://i35.servimg.com/u/f35/19/45/46/99/serdai10.png" alt="serdaigle" /> <p class="ptsB">500 points</p> <!- POINTS SERDAIGLE -> </div> <div class="badge"><img src="http://i35.servimg.com/u/f35/19/45/46/99/serpen10.png" alt="serpentard" /> <p class="ptsB couleurS">500 points</p> <!- POINTS SERPENTARD -> </div> </div> </div> </div> </div> <div class="bloc_ligne3"> <!- BANDEAU DEFILANT DES PARTENAIRES / REMPLACER LIEN PAR LIEN DU BOUTON PARTENAIRE -> <marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="30" scrollamount="5" direction="left" behavior="scroll"> <a href="#"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> </marquee> <!- CREDITS CREATEUR ET NU -> <p class="creditsNU">PA codée par Elenthil ★ <a href="http://www.never-utopia.com">Never Utopia</a></p> </div> </div> </body> </html>

5) Valider
6) Dans la fenêtre des pages html, un lien est apparu, il servira pour tout à l'heure
7) Aller dans Onglet Affichage => Page d'Accueil => Généralités
Cool

Dans le cadre blanc Contenu du message, copier le code suivant :

Code:: <iframe style="width: 900px; height: 594px;" src="URL DE LA PAGE HTML ICI" scrolling="no" frameborder="0"></iframe>

9) Remplacer URL DE LA PAGE HTML ICI par le lien qui s'est créé dans la gestion des pages html (donc dans Modules => Javascript & HTML => Gestion des Pages HTML)
10) Valider
11) PA installée et visible sur ton forum Wink

Sam 25 Juin - 18:12

gwenM

Age : 27Messages : 278

Sam 25 Juin - 18:12

Merciii :)

On essaye ça sur le forum test :). Mais du coup, elle ne sera pas installée toute suite sur notre forum :) Pour les photos à mettre pour le staff il y a une dimension ? (je suis stupide car je crois que tu as marqué les dimensions ? non ?)

En tout cas mercii :) Si possible, je veux bien laisser le sujet ouvert jusqu'au premier au cas où vu qu'on installe l'ensemble du design ce jour. Je te tiens au courant si on a un soucis.

:love:

Sam 25 Juin - 18:30

Elenthil

Age : 36Messages : 2184

Sam 25 Juin - 18:30

De rien =)

Oui pas de soucis je préfère même que vous testiez ça sur votre forum de test pour bien vérifier que tout est ok et éviter les mauvaises surprises ^^"

Pour les photos du staff vi tu as les dimensions qui sont indiquées dans le code à l'endroit où il faut les insérer et si tu as un doute, regarde sur mon forum test, il y a les dimensions indiquées ^^ (nan tu n'es pas stupide rassure-toi :patpat:

tu voulais être sûre que ce ne soit pas oublié ^^)

Vi tu peux laisser le sujet ouvert donc, et tiens moi au courant si c'est ok ou si y a des choses qui bugouillent =)

Lun 27 Juin - 16:09

gwenM

Age : 27Messages : 278

Lun 27 Juin - 16:09

Recoucou,

Donc on a testé ça et c'est parfait :) Juste une petite chose. Tu crois qu'il sera possible de mettre une scrollbar dans le bloc actualité (je vois pas trop où la mettre :) dans ton code) et pour les images des prédef tu crois qu"il serait possible d'inséré un lien sur l'image ? (je sais pas si tu me comprends ?)

Merci d'avance (pour ces éventuelles modif de dernières minutes) :lovebomb:

Sinon c'est tout bon :) :love:

EDIT : Je test un truc xD
Pour la Scrollbar c'est bon :) par contre j'ai beau changé le # avec le lien du prédef ça veut pas me mettre le lien :/

Lun 27 Juin - 16:31

Elenthil

Age : 36Messages : 2184

Lun 27 Juin - 16:31

Hello ^^

Contente que ça fonctionne ^^

Alors j'ai anticipé justement tes questions Razz

Pour la scroll barre, il faut juste changer cette ligne

Code:: .news{ overflow: hidden; /* CHANGER HIDDEN EN AUTO SI BESOIN DE BLOC DEROULANT */ }

Ce qui activera ton menu déroulant.

Pour les liens sur les images des prédefs, c'est déjà prêt également comme tu peux le voir dans le code :

Code:: <!- IMAGES PREDEFINIS / Remplacer # par lien du predef / Dimensions de l'image : 40*40 -> <a href="#"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a>

Lun 27 Juin - 16:39

gwenM

Age : 27Messages : 278

Lun 27 Juin - 16:39

xD oui pour la scrollbar j'ai fini par voir. Puis j'ai compris pourquoi ça ne marcher pas pour les liens.
Sorry de t'avoir embêté pour ça.

Lun 27 Juin - 16:44

Elenthil

Age : 36Messages : 2184

Lun 27 Juin - 16:44

Nan pas de soucis ^^

Sinon ça fait un truc moche pour les liens :hum:

je ne sais pas si ça te le fait mais quand je clique sur le lien, ça ouvre dans la PA la fenêtre (donc pas bien ><)

Si tu veux j'ai rajouter le réglage "blank" sur tous les liens ce qui ouvrira le lien dans un nouvel onglet plutôt que dans la même page.

Code:: <!DOCTYPE html> <html> <head> <!- PA pour GwenM réalisée par Elenthil -> <meta charset='utf-8' /> <link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css' /> <link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css' /> <style type='text/css'> /* MISE EN FORME PA */ body{ margin: 0px; } .bloc_pa{ width: 900px; background-color: #E8E8E8; /* Pour changer la couleur du fond de la PA */ } .bloc_pa h1{ text-align: center; margin: 0; font-family: 'Grand Hotel', cursive; /* Pour changer la police du titre Bienvenue sur le forum */ color: #809EA8; /* Pour changer la couleur du titre Bienvenue sur le forum */ text-shadow: 1px 1px #4b4b60; } /* MISE EN FORME MENU DE NAVIGATION */ .menu_nav{ width: 900px; margin-bottom: 25px; } .bloc_pa ul{ margin: auto; padding: 0; text-align: center; } .bloc_pa li{ display: inline-block; } .menu_nav a{ text-decoration: none; color: #707070; /* Pour changer la couleur des liens de navigation sous le titre */ font-family: Grand Hotel; /* Pour changer l'écriture des liens de navigation sous le titre */ font-size: 22px; /* Pour changer la taille des liens de navigation sous le titre */ } .menu_nav a:hover{ text-shadow: 1px 1px 3px #809EA8; } /* BLOC CONTEXTE - STAFF - ACTUALITES */ .bloc_ligne1{ width: 900px; } .bloc_contexte, .bloc_news{ width: 320px; height: 200px; display: inline-block; vertical-align: top; } .contexte, .news{ width: 295px; height: 175px; background-color: #C2CAC6; /* Pour changer la couleur du bloc contexte et du bloc news */ margin: auto; position: relative; overflow: hidden; } .contexte p { font-family: Tahoma; /* Pour changer la police d'écriture du texte contexte */ font-size: 11px; line-height: 14px; padding: 5px; margin: 0px; color: #707070; /* Pour changer la couleur du texte contexte */ text-align: center; } .contexte p a { text-decoration: none; font-weight: bold; color: #707070; /* Pour changer la couleur du lien contexte */ } .contexte p a:hover{ text-shadow: 1px 1px 3px #E8E8E8; } .contexte img{ position: absolute; top: 0px; left: 0px; transition: 1s ease left; width: 100%; height: 100%; } .contexte:hover img{ left: -355px; } .titre_news{ margin: 0; font-size: 22px; /* Pour changer la taille du titre Actualités */ font-family: Grand Hotel; /* Pour changer la police d'écriture du titre Actualités*/ color: #707070; /* Pour changer la couleur du titre Actualités */ font-weight: normal; text-align: center; } .news{ overflow: hidden; /* CHANGER HIDDEN EN AUTO SI BESOIN DE BLOC DEROULANT */ } .news p{ font-family: Tahoma; /* Pour changer la police du texte dans le bloc News */ padding: 5px 5px 5px 10px; font-size: 11px; margin: 0; line-height: 14px; color: #707070; /* Pour changer la couleur du texte du bloc News */ } .bloc_staff{ width: 250px; height: 200px; display: inline-block; } .staff{ width: 290px; height: 195px; text-align: center; } .rond_staff{ height: 60px; width: 60px; border-radius: 70px; background-color: #C2CAC6; display: inline-block; margin-top: 20px; overflow: hidden; } .profil_staff{ width: 129px; height: 160px; text-align: center; display: inline-block; } .position_D{ position: relative; right: 20px; } .position_G{ position:relative; right: 20px; } .profil_staff p, .profil_staff p a{ margin: 0; font-family: 'Oswald', sans-serif; /* Pour changer la police d'écriture du texte des membres du staff - Attention, si décalage du bloc suite au changement, réduire l'écriture avec un font-size */ line-height: 10px; color: #707070; /*Pour changer la couleur du texte des membres du staff */ } .profil_staff p a{ text-decoration: none; } .profil_staff p a:hover{ text-decoration: underline; } .texte_rangstaff{ font-family: Tahoma; /* Pour changer la police d'écriture du rang Staff */ font-variant: small-caps; font-size: 10px; } .position_infostaff{ position: relative; top: 7px; } /* BLOCS VIDEO - PREDEFS - COUPE */ .bloc_ligne2{ width: 900px; } .bloc_video, .bloc_coupe{ width: 320px; height: 200px; display: inline-block; vertical-align: top; } .video, .coupe{ width: 295px; height: 175px; background-color: #C2CAC6; /* Pour changer la couleur des blocs video et coupe des maisons */ margin: auto; } .video iframe{ position: relative; top: 5px; left: 5px; } .position_badges{ margin: auto; text-align: center; position: relative; z-index: 10; } .position_badges p { margin: 0; font-size: 22px; font-family: Grand Hotel; /* Pour changer la police d'écriture du titre Coupe des 4 Maisons */ color: #707070; } .badge{ display: inline-block; margin: 0px 20px; z-index: 10; position: relative; background-color: #C2CAC6; /* Pour changer la couleur de fond derrière les blasons des maisons pour cacher le texte et harmoniser avec la couleur du bloc */ width: 75px; bottom: 3px; height: 65px; } .badge img{ width: 64px; opacity: 1; transition: 500ms; z-index: -7; background-color: #C2CAC6; /* Pour changer la couleur derrière les blasons car image en png transparente */ } .badge img:hover{ opacity: 0; } .badge .ptsH{ position: absolute; bottom: 32px; z-index: -3; color: #B91D22; /* COULEUR POINTS GRYFFONDOR */ font-family: Tahoma; /* Pour changer la police d'écriture des points de Gryffondor et Poufsouffle */ font-size: 11px; margin-left: 10px; font-weight: bold; } .badge .ptsB{ position: absolute; bottom: 30px; z-index: -3; color: #016A96; /* COULEUR POINTS SERDAIGLE */ font-family: Tahoma; /* Pour changer la police d'écriture des points de Serdaigle et Serpentard*/ font-size: 11px; margin-left: 10px; font-weight: bold; } .ptsH.couleurP{ color: #A5860B; /* COULEUR POINTS POUFSOUFFLE */ } .ptsB.couleurS{ color: #204A22; /* COULEUR POINTS SERPENTARD */ } .bloc_predefs{ width: 250px; height: 200px; display: inline-block; } .predefs{ width: 250px; height: 195px; text-align: center; margin-top: 25px; } .rond_predef{ width: 40px; height: 40px; border-radius: 40px; background-color: #C2CAC6; display: inline-block; text-align: center; margin: 0px 5px; overflow: hidden; } .predefs a { text-decoration: none; } .titre_predefs{ margin-bottom: 15px; font-family: Grand Hotel; /* Pour changer l'écriture du titre Prédéfinis */ color: #707070; /* Pour changer la couleur du titre Prédéfinis */ font-size: 22px; margin-top: 0; } /* BLOC PARTENAIRES - CREDITS */ .bloc_ligne3{ width: 900px; height: 52px; text-align: center; } .creditsNU, .creditsNU a { font-family: Tahoma; /* Pour changer la police d'écriture des crédits pour NU */ font-size: 9px; margin: 0; color: #707070; /* Pour changer la couleur pour le texte des crédits pour NU */ } </style> </head> <body> <div class="bloc_pa"> <!- TITRE DU FORUM -> <h1>Bienvenue sur "Nom du Forum"</h1> <!- BARRE DES LIENS DE NAVIGATION (Remplacer # par les liens) -> <div class="menu_nav"> <ul> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> </ul> </div> <div class="bloc_ligne1"> <!- BLOC CONTEXTE AVEC TEXTE + LIEN (Remplacer # par le lien) -> <div class="bloc_contexte"> <div class="contexte"><p> Vingt années se sont écoulées depuis la chute de Lord Voldemort vaincu par le célèbre Harry Potter. Le monde des sorciers est de nouveau sur pied et un nouveau ministre de la magie a été nommé, un certain Cassius Owell qui avait pris part à la bataille finale à Poudlard comme membre de l'Ordre du Phoenix.<br /> Contrairement à l'idée préconçue, Harry Potter n'est pas devenu Auror comme son père avant lui, le nouveau Ministre de la Magie et les membres du Magenmagot lui ont demandé de devenir le nouveau directeur de Poudlard, Minerva McGonagall ne pouvant assumer ce rôle... <br /> <a href="#" target="blank">Lire la suite</a></p> <img src="http://i35.servimg.com/u/f35/19/45/46/99/gif_po10.gif" /> <!- EMPLACEMENT DU LIEN GIF CONTEXTE - Dimensions 295*175px -> </div> </div> <!- BLOC STAFF CENTRAL -> <div class="bloc_staff"> <div class="staff"> <div class="profil_staff position_G"> <div class="rond_staff"> <!- REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton11.jpg" alt="membre_staff" /> </div> <p>Cassius Owell <br /> <!- NOM DU MEMBRE DU STAFF -> <span class="texte_rangstaff">Fondateur</span> <br /> <!- RANG DU MEMBRE DU STAFF -> <span class="position_infostaff"> <a href="#" target="blank">Profil</a> <a href="#" target="blank">Mp</a> <!- REMPLACER # PAR LIEN PROFIL ET LIEN MP -> </span> </p> </div> <div class="profil_staff position_D"> <div class="rond_staff"> <!- REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton11.jpg" alt="membre_staff" /> </div> <p>Célian R. Lestrange <br /> <!- NOM DU MEMBRE DU STAFF -> <span class="texte_rangstaff">Administrateur</span> <br /> <!- RANG DU MEMBRE DU STAFF -> <span class="position_infostaff"> <a href="#" target="blank">Profil</a> <a href="#" target="blank">Mp</a> <!- REMPLACER # PAR LIEN PROFIL ET LIEN MP -> </span> </p> </div> </div> </div> <!- BLOC ACTUALITES -> <div class="bloc_news"> <div class="news"> <h2 class="titre_news">Actualités</h2> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> <p><strong>XX.XX :</strong> Descriptif de la news ici</p> </div> </div> </div> <div class="bloc_ligne2"> <!- BLOC VIDEO -> <div class="bloc_video"> <div class="video"> <!- INSERER IFRAME YOUTUBE A LA PLACE DU LIEN / Dimensions : 285*165 -> <iframe width="285" height="165" src="https://www.youtube.com/embed/mObK5XD8udk" frameborder="0" allowfullscreen></iframe> </div> </div> <!- BLOC PREDEFINIS -> <div class="bloc_predefs"> <div class="predefs"> <p class="titre_predefs">Prédéfinis</p> <!- IMAGES PREDEFINIS / Remplacer # par lien du predef / Dimensions de l'image : 40*40 -> <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="blank"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a> <a href="#" target="blank"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a> <a href="#" target="blank"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a> <a href="#" target="blank"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a> </div> </div> <!- BLOC COUPE DES 4 MAISONS -> <div class="bloc_coupe"> <div class="coupe"> <div class="position_badges"> <p>Coupe des 4 Maisons</p> <div class="badge"><img src="http://i35.servimg.com/u/f35/19/45/46/99/griffo11.png" alt="gryffondor" /> <p class="ptsH">500 points</p> <!- POINTS GRYFFONDOR -> </div> <div class="badge"><img src="http://i35.servimg.com/u/f35/19/45/46/99/poufso11.png" alt="poufsouffle" /> <p class="ptsH couleurP">500 points</p> <!- POINTS POUFSOUFFLE -> </div> <div class="badge"><img src="http://i35.servimg.com/u/f35/19/45/46/99/serdai10.png" alt="serdaigle" /> <p class="ptsB">500 points</p> <!- POINTS SERDAIGLE -> </div> <div class="badge"><img src="http://i35.servimg.com/u/f35/19/45/46/99/serpen10.png" alt="serpentard" /> <p class="ptsB couleurS">500 points</p> <!- POINTS SERPENTARD -> </div> </div> </div> </div> </div> <div class="bloc_ligne3"> <!- BANDEAU DEFILANT DES PARTENAIRES / REMPLACER LIEN PAR LIEN DU BOUTON PARTENAIRE -> <marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="30" scrollamount="5" direction="left" behavior="scroll"> <a href="#" target="blank"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#" target="blank"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#" target="blank"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#" target="blank"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#" target="blank"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> <a href="#" target="blank"><img src="http://i35.servimg.com/u/f35/19/45/46/99/parten10.jpg" /></a> </marquee> <!- CREDITS CREATEUR ET NU -> <p class="creditsNU">PA codée par Elenthil ★ <a href="http://www.never-utopia.com" target="blank">Never Utopia</a></p> </div> </div> </body> </html>

Mais si tu préfères changer personnellement chaque lien, il faut que tu utilises ce code

Code:: <a href="#" target="blank">Texte</a>

En gros tu dois rajouter le critère target="blank" après ton lien pour l'obliger à ouvrir une nouvelle fenêtre. Si tu as un doute, regarde comment j'ai fais dans le nouveau code que je t'ai envoyé.

Ven 1 Juil - 8:20

gwenM

Age : 27Messages : 278

Ven 1 Juil - 8:20

Coucou,

alors on vient d'installer le design, mais au niveau des prédefinis, les liens ne marche pas x) en fait c'est bizarre car sa fonctionne sur mon forum test, mais pas sur l'autre. Je comprends pas.

merci d'avance pour ton aide si tu peux nous aider pour le coup.

Ven 1 Juil - 10:28

Elenthil

Age : 36Messages : 2184

Ven 1 Juil - 10:28

Hello :)

Est ce que tu as pris la dernière version que je t'ai présenté (avec le rajout des blank ?)

Sinon si tu pouvais me passer le lien de ton forum, je verrais directement où est le souci

Alors j'ai regardé, mais je peux voir les liens des prédéfs, ce que ce soit sur chrome ou firefox.

Ensuite y a bien un truc que tu peux changer (parce que là y a qu'un seul onglet qui s'ouvre et s'actualise), si tu veux que ça ouvre un onglet à chaque fois qu'on clique, c'est de transformer le blank en _blank.

ce qui donnerait

Code:: <a href="#" target="_blank">Texte</a>

Je peux te redonner le code si tu veux avec les corrections mais ça t'obligerait à remettre toutes les infos :hum:

A toi de voir ce que tu préfères.

Désolé ça m'apprendra à zapper un bout >_< fichu _

Ensuite j'ai remarqué deux petits trucs, je ne sais pas si tu veux changer. Les liens dans le bloc actu sont en bleu (donc on peut modifier ça). Et le crédit NU en bas est rogné par le cadre (il faut changer le height de la class bloc_ligne3 et le monter à 60 px minimum.

Dernière édition par Elenthil le Ven 1 Juil - 10:46, édité 2 fois

Ven 1 Juil - 10:31

gwenM

Age : 27Messages : 278

Ven 1 Juil - 10:31

Hey,

oui j'ai repris ta nouvelle version. C'était compliqué, mais je pense que ça fonctionne maintenant enfin j'espère. J'ai c/C le code actuel dans la partie admin. Tu peux voir si c'est tout bon au cas où ? voici le lien de notre forum :) http://mimbulus-mimbletonia.forumactif.org/

Merci :love:

Ven 1 Juil - 10:47

Elenthil

Age : 36Messages : 2184

Ven 1 Juil - 10:47

Vi je suis allée voir et en fait je viens d'éditer mon post plus haut <<

Donc dis moi ce que tu en penses et désolé pour le dérangement ><

Ven 1 Juil - 11:22

gwenM

Age : 27Messages : 278

Ven 1 Juil - 11:22

Ne t'inquiète pas :)
Du coup, comment on change la couleur des liens ? Sinon je vais changer le height de ce pas :)

EDIT : je ne sais pas pourquoi, mais les liens s'enlève à chaque fois sur les prédef, je commence à désespérer sérieusement.

regarde le code et dit moi s'il y a un problème :

Code::  <meta charset="utf-8" /> <link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Grand+Hotel" rel="stylesheet" type="text/css" /> <style type="text/css"> /* MISE EN FORME PA */ body{ margin: 0px; } .bloc_pa{ width: 900px; background-color: #E8E8E8; /* Pour changer la couleur du fond de la PA */ } .bloc_pa h1{ text-align: center; margin: 0; font-family: 'Grand Hotel', cursive; /* Pour changer la police du titre Bienvenue sur le forum */ color: #949494; /* Pour changer la couleur du titre Bienvenue sur le forum */ text-shadow: 1px 1px #ffffff; } /* MISE EN FORME MENU DE NAVIGATION */ .menu_nav{ width: 900px; margin-bottom: 25px; } .bloc_pa ul{ margin: auto; padding: 0; text-align: center; } .bloc_pa li{ display: inline-block; } .menu_nav a{ text-decoration: none; color: #949494; /* Pour changer la couleur des liens de navigation sous le titre */ font-family: Grand Hotel; /* Pour changer l'écriture des liens de navigation sous le titre */ font-size: 22px; /* Pour changer la taille des liens de navigation sous le titre */ } .menu_nav a:hover{ text-shadow: 1px 1px 3px #ffffff; } /* BLOC CONTEXTE - STAFF - ACTUALITES */ .bloc_ligne1{ width: 900px; } .bloc_contexte, .bloc_news{ width: 320px; height: 200px; display: inline-block; vertical-align: top; } .contexte, .news{ width: 295px; height: 175px; background-color: #BDBDBD; /* Pour changer la couleur du bloc contexte et du bloc news */ margin: auto; position: relative; overflow: hidden; } .contexte p { font-family: Tahoma; /* Pour changer la police d'écriture du texte contexte */ font-size: 11px; line-height: 14px; padding: 5px; margin: 0px; color: #575757; /* Pour changer la couleur du texte contexte */ text-align: center; } .contexte p a { text-decoration: none; font-weight: bold; color: #575757; /* Pour changer la couleur du lien contexte */ } .contexte p a:hover{ text-shadow: 1px 1px 3px #ffffff; } .contexte img{ position: absolute; top: 0px; left: 0px; transition: 1s ease left; width: 100%; height: 100%; } .contexte:hover img{ left: -355px; } .titre_news{ margin: 0; font-size: 22px; /* Pour changer la taille du titre Actualités */ font-family: Grand Hotel; /* Pour changer la police d'écriture du titre Actualités*/ color: #949494; /* Pour changer la couleur du titre Actualités */ font-weight: normal; text-align: center; } .news{ overflow: auto; /* CHANGER HIDDEN EN AUTO SI BESOIN DE BLOC DEROULANT */ } .news p{ text-decoration: none; font-family: Tahoma; /* Pour changer la police du texte dans le bloc News */ padding: 5px 5px 5px 10px; font-size: 11px; margin: 0; line-height: 14px; color: #575757; /* Pour changer la couleur du texte du bloc News */ } .bloc_staff{ width: 250px; height: 200px; display: inline-block; } .staff{ width: 290px; height: 195px; text-align: center; } .rond_staff{ height: 60px; width: 60px; border-radius: 70px; background-color: #bdbdbd; display: inline-block; margin-top: 20px; overflow: hidden; } .profil_staff{ width: 129px; height: 160px; text-align: center; display: inline-block; } .position_D{ position: relative; right: 20px; } .position_G{ position:relative; right: 20px; } .profil_staff p, .profil_staff p a{ margin: 0; font-family: 'Oswald', sans-serif; /* Pour changer la police d'écriture du texte des membres du staff - Attention, si décalage du bloc suite au changement, réduire l'écriture avec un font-size */ line-height: 10px; color: #575757; /*Pour changer la couleur du texte des membres du staff */ } .profil_staff p a{ text-decoration: none; } .profil_staff p a:hover{ text-decoration: underline; } .texte_rangstaff{ font-family: Tahoma; /* Pour changer la police d'écriture du rang Staff */ font-variant: small-caps; font-size: 10px; } .position_infostaff{ position: relative; top: 7px; } /* BLOCS VIDEO - PREDEFS - COUPE */ .bloc_ligne2{ width: 900px; } .bloc_video, .bloc_coupe{ width: 320px; height: 200px; display: inline-block; vertical-align: top; } .video, .coupe{ width: 295px; height: 175px; background-color: #bdbdbd; /* Pour changer la couleur des blocs video et coupe des maisons */ margin: auto; } .video iframe{ position: relative; top: 5px; left: 5px; } .position_badges{ margin: auto; text-align: center; position: relative; z-index: 10; } .position_badges p { margin: 0; font-size: 22px; font-family: Grand Hotel; /* Pour changer la police d'écriture du titre Coupe des 4 Maisons */ color: #949494; } .badge{ display: inline-block; margin: 0px 20px; z-index: 10; position: relative; background-color: #bdbdbdb; /* Pour changer la couleur de fond derrière les blasons des maisons pour cacher le texte et harmoniser avec la couleur du bloc */ width: 75px; bottom: 3px; height: 65px; } .badge img{ width: 64px; opacity: 1; transition: 500ms; z-index: -7; background-color: #bdbdbd; /* Pour changer la couleur derrière les blasons car image en png transparente */ } .badge img:hover{ opacity: 0; } .badge .ptsH{ position: absolute; bottom: 32px; z-index: -3; color: #B91D22; /* COULEUR POINTS GRYFFONDOR */ font-family: Tahoma; /* Pour changer la police d'écriture des points de Gryffondor et Poufsouffle */ font-size: 11px; margin-left: 10px; font-weight: bold; } .badge .ptsB{ position: absolute; bottom: 30px; z-index: -3; color: #016A96; /* COULEUR POINTS SERDAIGLE */ font-family: Tahoma; /* Pour changer la police d'écriture des points de Serdaigle et Serpentard*/ font-size: 11px; margin-left: 10px; font-weight: bold; } .ptsH.couleurP{ color: #A5860B; /* COULEUR POINTS POUFSOUFFLE */ } .ptsB.couleurS{ color: #204A22; /* COULEUR POINTS SERPENTARD */ } .bloc_predefs{ width: 250px; height: 200px; display: inline-block; } .predefs{ width: 250px; height: 195px; text-align: center; margin-top: 25px; } .rond_predef{ width: 40px; height: 40px; border-radius: 40px; background-color: #bdbdbd; display: inline-block; text-align: center; margin: 0px 5px; overflow: hidden; } .predefs a { text-decoration: none; } .titre_predefs{ margin-bottom: 15px; font-family: Grand Hotel; /* Pour changer l'écriture du titre Prédéfinis */ color: #949494; /* Pour changer la couleur du titre Prédéfinis */ font-size: 22px; margin-top: 0; } /* BLOC PARTENAIRES - CREDITS */ .bloc_ligne3{ width: 900px; height: 60px; text-align: center; } .creditsNU, .creditsNU a { font-family: Tahoma; /* Pour changer la police d'écriture des crédits pour NU */ font-size: 9px; margin: 0; color: #575757; /* Pour changer la couleur pour le texte des crédits pour NU */ } </style> <div class="bloc_pa">  <h1> Bienvenue sur "Mimbulus Mimbletonia" </h1>  <div class="menu_nav"> <ul> <li> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t2-reglement">Règlement</a> </li> <li> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t1-contexte">Contexte</a> </li> <li> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t22-bottin-des-avatars">Avatars Pris</a> </li> <li> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/f9-predefinis">Prédéfinis</a> </li> <li> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/f8-presentations">Présentations</a> </li> <li> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/f3-annexes">Annexes</a> </li> <li> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/f72-affiliation">Affiliation</a> </li> </ul> </div> <div class="bloc_ligne1">  <div class="bloc_contexte"> <div class="contexte"> <p> Vingt années se sont écoulées depuis la chute de Lord Voldemort vaincu par le célèbre Harry Potter. Le monde des sorciers est de nouveau sur pied et un nouveau ministre de la magie a été nommé, un certain Cassius Owell qui avait pris part à la bataille finale à Poudlard comme membre de l'Ordre du Phoenix.<br /> Contrairement à l'idée préconçue, Harry Potter n'est pas devenu Auror comme son père avant lui, le nouveau Ministre de la Magie et les membres du Magenmagot lui ont demandé de devenir le nouveau directeur de Poudlard, Minerva McGonagall ne pouvant assumer ce rôle... <br /> <a href="#" target="blank">Lire la suite</a> </p> <img src="http://auto.img.v4.skyrock.net/1896/86401896/pics/3133887922_1_2_RJoFGfks.gif" />  </div> </div>  <div class="bloc_staff"> <div class="staff"> <div class="profil_staff position_G"> <div class="rond_staff">  <img src="http://i64.tinypic.com/i2pym0.jpg" alt="membre_staff" /> </div> <p> Cassius Owell <br />  <span class="texte_rangstaff">Fondateur</span> <br />  <span class="position_infostaff"> <a href="http://mimbulus-mimbletonia.forumactif.org/u3" target="blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=3" target="blank">Mp</a>  </span> </p> </div> <div class="profil_staff position_D"> <div class="rond_staff">  <img src="http://s9.tinypic.com/rvj4mw_th.jpg" alt="membre_staff" /> </div> <p> Célian R. Lestrange <br />  <span class="texte_rangstaff">Administrateur</span> <br />  <span class="position_infostaff"> <a href="http://mimbulus-mimbletonia.forumactif.org/u12" target="blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=12" target="blank">Mp</a>  </span> </p> </div> </div> </div>  <div class="bloc_news"> <div class="news"> <h2 class="titre_news"> Actualités </h2> <p> <strong>01.06.16 :</strong> Ouverture du forum </p> <p> <strong>04.06.16 :</strong> Version 2 du forum </p> <p> <strong>18.06.16 :</strong> Ouverture du sujet pour l'inscription à la journée d'intégration <a href="http://mimbulus-mimbletonia.forumactif.org/t217-inscription-a-la-journee-d-integration-event-septembre-2018-irp">ici</a> et du sujet concernant les capacités spéciales <a href="http://mimbulus-mimbletonia.forumactif.org/t193-les-capacites-speciales">ici</a> </p> <p> <strong>01.07.2016 :</strong> Version 3 du forum & Bilan du mois de Juin <a href="http://mimbulus-mimbletonia.forumactif.org/t258-bilan-du-mois-de-juin-2016">ici</a> </p> <p> <strong>XX.XX :</strong> Descriptif de la news ici </p> <p> <strong>XX.XX :</strong> Descriptif de la news ici </p> </div> </div> </div> <div class="bloc_ligne2">  <div class="bloc_video"> <div class="video">  <iframe style="width: 285px; height: 165px;" src="https://www.youtube.com/embed/OX1W-8QIBq0" allowfullscreen="" frameborder="0"></iframe> </div> </div>  <div class="bloc_predefs"> <div class="predefs"> <p class="titre_predefs"> Prédéfinis </p>  <a href="http://mimbulus-mimbletonia.forumactif.org/t18-famille-potter-3-6" target="blank"> </a> <div class="rond_predef"> <img src="http://image.noelshack.com/fichiers/2016/26/1467360540-wvvqzp.jpg" alt="predefini" /> </div><a href="http://mimbulus-mimbletonia.forumactif.org/t18-famille-potter-3-6" target="blank"> </a> <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="blank"> </a> <div class="rond_predef"> <img src="http://image.noelshack.com/fichiers/2016/26/1467360542-25ak93m.jpg" alt="predefini" /> </div><a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="blank"> </a> <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="blank"> </a> <div class="rond_predef"> <img src="http://image.noelshack.com/fichiers/2016/26/1467360544-2you89f.jpg" alt="predefini" /> </div><a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="blank"> </a> <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="blank"> </a> <div class="rond_predef"> <img src="http://image.noelshack.com/fichiers/2016/26/1467360546-51scc5.jpg" alt="predefini" /> </div><a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="blank"> </a> </div> </div>  <div class="bloc_coupe"> <div class="coupe"> <div class="position_badges"> <p> Coupe des 4 Maisons </p> <div class="badge"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/griffo11.png" alt="gryffondor" /> <p class="ptsH"> 113 points </p>  </div> <div class="badge"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/poufso11.png" alt="poufsouffle" /> <p class="ptsH couleurP"> 191 points </p>  </div> <div class="badge"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/serdai10.png" alt="serdaigle" /> <p class="ptsB"> 122 points </p>  </div> <div class="badge"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/serpen10.png" alt="serpentard" /> <p class="ptsB couleurS"> 512 points </p>  </div> </div> </div> </div> </div> <div class="bloc_ligne3">  <marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="30" scrollamount="5" direction="left" behavior="scroll"> <a href="http://disney-recherches.forumactif.org/" target="_blank"><img src="http://i86.servimg.com/u/f86/15/38/67/45/rrgw10.jpg" /></a> <a href="http://bubobulb.forum-actif.net"><img src="http://i86.servimg.com/u/f86/12/57/58/15/bouton17.png" /></a> <a href="http://atlanticcity.forumactif.org/"><img src="http://i84.servimg.com/u/f84/09/00/04/27/bouton10.png" /></a> <a href="http://way-of-life-wayfate.forumactif.pro/" target="_blank"><img src="http://i86.servimg.com/u/f86/15/38/67/45/sfvn11.png" /></a> <a href="http://paradis-fanfictions.twilight-mania.com"><img src="http://i66.tinypic.com/2qxrwpf.jpg" /></a> <a href="http://magicalement.forumactif.org"><img src="http://image.noelshack.com/fichiers/2016/11/1458065101-stampspart.png" /></a> <a target="_blank" href="http://mimbulusmimbletonia.forumetoile.com"><img src="http://imageshack.com/a/img922/4495/Fu6hRD.jpg" /></a><a href="http://petrificare.rpgistes.com"><img src="http://i84.servimg.com/u/f84/19/30/82/32/10035p10.png" /></a> <a href="http://firebolt.forumactif.org"><img src="http://nsm08.casimages.com/img/2015/10/25//15102508204614296413692838.png" /></a> <a href="http://memento-mori-rpg.forumactif.org"><img src="http://i67.tinypic.com/2e31iso.jpg" /></a> </marquee>  <p class="creditsNU"> PA codée par Elenthil ★ <a href="http://www.never-utopia.com" target="blank">Never Utopia</a> </p> </div> </div>

Ven 1 Juil - 11:40

Elenthil

Age : 36Messages : 2184

Ven 1 Juil - 11:40

Bon super alors ^^ Je suis rassurée :hug:

Alors pour modifier la couleur des liens des actualités, il faut que tu crées une nouvelle règle CSS qui s'appliquera juste aux liens du bloc actualité comme ceci :

Code:: .news p a { text-decoration: none; font-weight: bold; color: #707070; /* Pour changer la couleur des liens news */ }

Cette partie de code va enlever la barre pour souligner (textdecoration:none), mettre le lien en gras (fontweight:bold) et ce que tu voulais, modifier la couleur.

Bien sûr tu peux supprimer les deux critères pour le gras et la déco si tu souhaites juste modifier la couleur.

Je te le dis de tête et j'ai fait un texte rapidos avec l'inspecteur, normalement ça doit fonctionner. (J'aurais du le prévoir avant pour les liens <<)

Ah et j'ai compris pour ton souci sur les liens. En fait, quand tu mets un lien sur une image, c'est l'image qui servira de lien. Donc tu dois absolument respecter cette forme sinon ça ne marche pas :

Code:: <a href="#" target="_blank"><img src="LIEN DE L'IMAGE" alt="descriptif de l'image" /></a>

Tu vois le principe ? Il faut que la balise lien englobe la balise image, c'est comme si l'image était considérée comme du texte.

Sauf que dans notre PA, j'ai aussi rajouté une div (qui permet de donner la forme arrondie aux images predefs. Ce qui te donnera exactement :

Code:: <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a>

Donc en gros faut le traduire comme ça :

La balise a qui sert de lien va englober la div qui donne la forme arrondie à l'image et l'image elle même. La balise a sera la dernière à se refermer. Il faut qu'elle englobe ça pour que ça fonctionne.

Est ce que ça va avec ces explications ?

Ven 1 Juil - 11:48

gwenM

Age : 27Messages : 278

Ven 1 Juil - 11:48

So,

je viens de faire poue les liens du bloc actu mais ça m'a un peu déformer le code en lui-même : le CSS j'ai mis ce que tu m'as donné et j'ai fait ça :

Code:: <div class="bloc_news"> <div class="news"> <h2 class="titre_news"> Actualités </h2> <div <p="" class="news p a"> <strong>01.06.16 :</strong> Ouverture du forum <p> </p> <p> <strong>04.06.16 :</strong> Version 2 du forum </p> <p> <strong>18.06.16 :</strong> Ouverture du sujet pour l'inscription à la journée d'intégration <a href="http://mimbulus-mimbletonia.forumactif.org/t217-inscription-a-la-journee-d-integration-event-septembre-2018-irp">ici</a> et du sujet concernant les capacités spéciales <a href="http://mimbulus-mimbletonia.forumactif.org/t193-les-capacites-speciales">ici</a> </p> <p> <strong>01.07.2016 :</strong> Version 3 du forum & Bilan du mois de Juin <a href="http://mimbulus-mimbletonia.forumactif.org/t258-bilan-du-mois-de-juin-2016">ici</a> </p> <p> <strong>XX.XX :</strong> Descriptif de la news ici </p> <p> <strong>XX.XX :</strong> Descriptif de la news ici </p> </div> </div> </div> </div>

Il doit y avoir une petite erreur, mais avant j'essaye pour les images du bloc prédef.

EDIT : pour les prédef c'est bon :love:

mais j'ai toujours un petit problème dans la partie actu

Ven 1 Juil - 12:00

Elenthil

Age : 36Messages : 2184

Ven 1 Juil - 12:00

Tu t'es trompée :panic:

. Il ne faut pas rajouter de class dans le html mais dans la partie du CSS qui est bien plus haut. Donc on ne doit toucher au html pour modifier le css, c'est juste une règle à modifier avec des balises existants déjà (donc p et a)

Remets le html comme il était avant donc de ça :

Code:: <div <p="" class="news p a">

Tu remets ça :

Code:: <p>

Pas de div, pas de class, car avec la règle CSS que je t'ai donné ça va faire bugouillé le truc ^^.

En gros, si tu as bien mis juste la règle CSS dans la partie CSS, il faut comprendre le code de cette façon (c'est juste pour que tu comprennes, pas besoin de reprendre le code que je te donne plus bas.

Code:: .news p a

Dans la class .news, applique la règle (donc le changement de couleur) aux balises a qui se trouvent à l'intérieur d'une balise p.

Ven 1 Juil - 12:14

gwenM

Age : 27Messages : 278

Ven 1 Juil - 12:14

Et voilà je crois que c'est bon :love:

Encore merci (je suis une boulette).

Je crois que tout est bon, il me semble ?

Ven 1 Juil - 12:18

Elenthil

Age : 36Messages : 2184

Ven 1 Juil - 12:18

Nan tes prédefs bugouillent toujours ^^

Regarde où tu as fermé la balise a. Sur mon inspecteur tu ne les pas englobé. Il faut que le /a se positionne après le /div.

Là tu as fais ça

Code:: <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank"> </a> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div>

Et il faut que ta balise a se ferme tout en bas comme ça :

Code:: <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank"> <div class="rond_predef"> <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" /> </div> </a>

Ven 1 Juil - 12:21

gwenM

Age : 27Messages : 278

Ven 1 Juil - 12:21

Pourtant je l'avais fait, ça les rajoute tout seul (je vais péter mon ordi). Normalement, tout est bon je dis bien normalement.

Ven 1 Juil - 12:26

Elenthil

Age : 36Messages : 2184

Ven 1 Juil - 12:26

Relax t'inquiète pas :hug:

Là c'est bon ça fonctionne ^^

C'est peut être FA qui n'avait pas pris en compte tes modifs (ça lui arrive des fois de revenir à la page d'accueil sans appliquer les modifs, c'est frustrant d'ailleurs quand tu passes du temps à modifier <<)

Je viens de vérifier tout m'a l'air en ordre. Est-ce que ça te convient ou tu veux encore voir des petits réglages ?

Si c'est ok pour toi, tu peux demander à fermer ta commande ^^

Si non, alors je suis à ta disposition pour les dernières petites modifs si besoin.

Contenu sponsorisé

Page d'Accueil d'un forum RPG Harry Potter [Elenthil]

Ma demande

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée