Community Of Gamers
Bienvenue sur le forum !
Nous vous souhaitons un agréable moment parmi nous en espérant que vous, vous y plairez !

Cordialement, Le Staff !
Community Of Gamers
Bienvenue sur le forum !
Nous vous souhaitons un agréable moment parmi nous en espérant que vous, vous y plairez !

Cordialement, Le Staff !



 
Accueil  Dernières images  S'enregistrer  Connexion  Adminstration  
Derniers sujets
» [Serveur Transformice] Présentation de Transforchoco
[Page d'acceuille] Colorée/Coin très arrondi EmptyDim 4 Jan - 0:47 par Iron CrazeK

» Presentation De Clash Of Clans (COC)
[Page d'acceuille] Colorée/Coin très arrondi EmptyJeu 4 Déc - 15:51 par Iron CrazeK

» Nouvelle Version du Forum
[Page d'acceuille] Colorée/Coin très arrondi EmptyJeu 4 Déc - 15:48 par Iron CrazeK

» Quelquin Creations
[Page d'acceuille] Colorée/Coin très arrondi EmptyMer 5 Nov - 18:37 par Pokemon/Arco001

» Présentation Community of Gaming
[Page d'acceuille] Colorée/Coin très arrondi EmptyMer 5 Nov - 18:23 par Iron CrazeK

» Chatbox / Changer le Nom
[Page d'acceuille] Colorée/Coin très arrondi EmptyLun 3 Nov - 16:34 par Iron CrazeK

» [Page d'acceuille] Colorée/Coin très arrondi
[Page d'acceuille] Colorée/Coin très arrondi EmptyLun 3 Nov - 16:33 par Iron CrazeK

» [Page d'acceuille] En trois colonne.
[Page d'acceuille] Colorée/Coin très arrondi EmptyLun 3 Nov - 16:31 par Iron CrazeK

» [Qui est en Ligne] Onglet/Groupe
[Page d'acceuille] Colorée/Coin très arrondi EmptyLun 3 Nov - 16:30 par Iron CrazeK

-23%
Le deal à ne pas rater :
EVGA SuperNOVA 650 G6 – Alimentation PC 100% modulaire 650W, 80+ ...
77.91 € 100.91 €
Voir le deal

Partagez
 

 [Page d'acceuille] Colorée/Coin très arrondi

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Iron CrazeK
Fondateur du Forum.
Fondateur du Forum.
Iron CrazeK

Messages : 106
Jeton de Gameurs : 1112225905
Réputation : 4
Date d'inscription : 12/09/2014

[Page d'acceuille] Colorée/Coin très arrondi Empty
MessageSujet: [Page d'acceuille] Colorée/Coin très arrondi   [Page d'acceuille] Colorée/Coin très arrondi EmptyLun 3 Nov - 16:33

DESCRIPTION

Voici une page d'accueil prête à l'emploi et personnalisable.
Un petit mode d'emploi a été fait pour aider les plus débutants à modifier et personnaliser la page d'accueil :)

Conditions d'utilisation : Ne pas diffuser ce code sur d'autres forums | Ne pas enlever le crédit | Possibilité de modifier uniquement les couleurs et l'image de fond | Pour d'autres modifications, mon autorisation est requise.

DEMO

[url=Publicités , Interdites Merci!://mimizz.creation-forum.Publicités , Interdites Merci!/h1-pa-color-power]Cliquez pour avoir un aperçu :)[/url]

CODE

Vous devez poster un message à la suite pour afficher le code
[size]

CSS:Sélectionner le contenu
Code:Sélectionner le contenuSélectionner le contenu
/* ***************** CSS DE LA PAGE D'ACCUEIL ********************
                  by mimizZ | www.graph-forum.Publicités , Interdites Merci!
  Droit à la modification des couleurs et du fond uniquement
****************************************************************** */

#EnTete {
  position:relative;
  /* largeur et hauteur de l'image */
  width:800px;
  height:500px;
}

#EnTete #Bande {
   position:absolute;
   /* positionnement de la bande par rapport à la page d'accueil */
 left:119px;
  top:100px;
   /* largeur et hauteur de la bande */
  width:531px;
   height:72px;
   background-image: url('Publicités , Interdites Merci!://img15.hostingpics.net/pics/776869Bandeau.png');   
}

.titre2 { /* TITRE "PRÉSENTATION */
   position:absolute;
   /* positionnement de la banche par rapport à l'image */
  left:175px;
   top:16px;
   font-family:Helvetica Neue;
   text-transform:uppercase;
   color:#535353;
   font-weight:bold;
   font-size:24px;
   letter-spacing:-1px;
   text-shadow:1px 1px 1px #fff; 
   }

.titre2:hover {color:#00abea;}

a:link{ cursor:  pointer;}
a, a:hover {text-decoration:none;}


.titre { /* TITRE " BIENVENUE SUR LE FORUM " */
   font-family:Helvetica Neue;
   text-transform:uppercase;
   letter-spacing:-1px;
   font-weight:bold;
   font-size:38px;
   color:#eeeeee;
   text-shadow: 1px 2px 1px #c3c3c3;
   text-align:center;
   -webkit-border-radius: 10px;
   -webkit-border-bottom-right-radius: 40px;
   -webkit-border-bottom-left-radius: 40px;
   -moz-border-radius: 10px;
   -moz-border-radius-bottomright: 40px;
   -moz-border-radius-bottomleft: 40px;
   border-radius: 10px;
   border-bottom-right-radius: 40px;
   border-bottom-left-radius: 40px;
   background-color:#909090;
   border-bottom: 3px solid #cccccc;
   padding:5px;
   }

.titre:hover {letter-spacing:0px;}

.presentation { /* CADRE TURQUOISE " PRÉSENTATION " */
   margin-right:-4px;
    margin-left:-10px;
   background-color:#00b9e9;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
   box-shadow: 0px 0px 5px #000;
   width:430px;
   height:auto;
   padding-bottom:8px;
   padding-left:16px;
   padding-right:16px;
   padding-top:50px;
   }

.presentation p { /* ZONE DE TEXTE PRÉSENTATION */
   background-color:#FFF;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
   border-bottom: 3px solid #84d0f0;
   border-left: 3px solid #84d0f0;
   border-right: 3px solid #84d0f0;
   color:#666;
   font-family:calibri;
   font-size:13px;
   text-align:justify;
   padding:20px;
   }

.navigation { /* LIENS */
   font-family:"Courier New", Courier, monospace;
   text-transform:uppercase;
   -webkit-border-top-left-radius: 30px;
   -webkit-border-bottom-left-radius: 30px;
   -moz-border-radius-topleft: 30px;
   -moz-border-radius-bottomleft: 30px;
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
   width:125px;
   background-color:#a6d013;   
   font-size:12px;
   text-align:center;
   text-shadow:0px 0px 3px #666;
   margin-left:15px;
   margin-top:12px;
   padding: 3px;
   border-bottom:2px solid #e9ff9a;
   }

.navigation:hover {
   background-color:#fff15f;
   text-shadow:0px 0px 3px #fff;
   letter-spacing:1px;
   border-bottom:2px solid #ffd05f;
   }

.navigation a {color:#FFF} /* COULEUR DES LIENS */
.navigation a:hover {color:#F60} /* COULEUR DES LIENS AU SURVOL */
   
.annonces { /* ANNONCES QUI DÉFILENT */
   width:170px;
   max-height:185px;
   -webkit-border-top-right-radius: 30px;
   -webkit-border-bottom-right-radius: 30px;
   -moz-border-radius-topright: 30px;
   -moz-border-radius-bottomright: 30px;
   border-top-right-radius: 30px;
   border-bottom-right-radius: 30px;
   background-color:#61569d;
   padding-top:8px;
   padding-bottom:8px;
   padding-right:10px;
   box-shadow: 1px 0px 4px #000;
   border-left:thin solid #000;
   text-align:center; 
    }

.titre3 { /* TITRE " ANNONCE " */
   color:#ab8cbc;
   font-size:19px;
   font-family:helvetica neue;
   text-transform:uppercase;
   letter-spacing:-1px;
   font-weight:bold;
   text-align:center;
   text-shadow: 2px 2px 1px #4a4179;
   }

.titre3:hover {
   color:#d6c8f5;
   letter-spacing:0px;
   }

.annonces p { /* ZONE DE TEXTE " ANNONCES */
   color:#666;
   font-family:calibri;
   font-size:13px;
   background-color:#FFF;
   -webkit-border-top-right-radius: 20px;
   -webkit-border-bottom-right-radius: 20px;
   -moz-border-radius-topright: 20px;
   -moz-border-radius-bottomright: 20px;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   text-align:justify;
   padding:8px;
   border-right:3px solid #d6c8f5;
   border-bottom:3px solid #d6c8f5;
   }

.html-marquee {height:125px;} /* PERMET DE LE DÉFILEMENT DES ANNONCES, NE PAS TOUCHER ! */
.html-marquee2 {height:31px;} /* PERMET DE LE DÉFILEMENT DES PARTENAIRES, NE PAS TOUCHER ! */


.partenaires { /* CADRE DES PARTENAIRES + TITRE */
   width:500px;
   background-color:#f39400;
   box-shadow: 0px 0px 5px #000;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
   padding-left:250px;
   padding-right:10px;
   padding-top:1px;
   padding-bottom:1px;
   background-image: url('Publicités , Interdites Merci!://img15.hostingpics.net/pics/874614Partenaires.png');
   background-repeat:no-repeat;
   background-position: left center;
   }

.partenaires p { /* ZONE OÙ LES LOGOS SONT MIS */
   background-color:#FFF;
   height:31px;
   padding:6px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   border-bottom: 3px solid #f3c200;
   border-right: 3px solid #f3c200;
   border-left: 3px solid #f3c200;
   }

.partenaires img { /* OMBRE PORTÉE SUR LES LOGOS DE PARTENARIAT */
   box-shadow: 0px 0px 4px #999; }
   
.credits { /* NE PAS ENLEVER ! */
   font-family:calibri;
   font-size:12px;
   color:#b5b5b5;
   padding:10px;
   text-shadow: 0px 0px 4px #000;
   text-align:center; }
.credits a {color:#e2007a;}
.credits a:hover {color:#ea69a0;}
   
/* ********************* FIN DU CODE DE LA PA ********************* */


Code à coller sur votre PA:Sélectionner le contenu
Code:Sélectionner le contenuSélectionner le contenu
<div id="EnTete"><div style="background-image:url('Publicités , Interdites Merci!://img15.hostingpics.net/pics/210661Motif.png');  border: 8px solid #fff ; border-right:5px #fff solid; width: 800px; height: auto; box-shadow: 0px 0px 6px #666; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;"><div class="titre">Bienvenue sur le forum</div><br><br>

<table style="width:780px;"><tr><td style="width:150px;"> 

<div class="navigation"><a href="Publicités , Interdites Merci!://graph-forum.forumactif.Publicités , Interdites Merci!">Lien 1</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://graph-forum.forumactif.Publicités , Interdites Merci!">Lien 2</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://graph-forum.forumactif.Publicités , Interdites Merci!">Lien 3</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://graph-forum.forumactif.Publicités , Interdites Merci!">Lien 4</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://graph-forum.forumactif.Publicités , Interdites Merci!">Lien 5</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://graph-forum.forumactif.Publicités , Interdites Merci!">Lien 6</a></div></td>

<div id="Bande"><span class="titre2">Présentation</span></div>

<td style="width:440px;"><div class="presentation"><p>

Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta. Integer convallis mollis arcu, id cursus risus venenatis ac. Sed gravida, magna et molestie tempor, ante eros dignissim enim, sit amet volutpat elit nulla sit amet magna.<br /> Fusce varius, tellus eget tincidunt semper, quam magna tincidunt nisl, imperdiet condimentum lectus orci et neque. Nullam et erat quam, ac condimentum magna. Donec lobortis dapibus eros, vitae blandit felis faucibus eu. Nulla ipsum velit, posuere vel malesuada eu, rutrum et odio. Maecenas arcu augue, blandit a porta sit amet, vulputate non purus. Nullam quis elit quis sem blandit varius sit amet vitae lacus. Suspendisse potenti. Suspendisse fringilla lacinia sagittis.

</p></div></td>

<td style="width:190px"><p> </p><div class="annonces"><span class="titre3">Annonces</span><p><marquee class="html-marquee" direction="up" scrollamount="3"  onmouseover=this.stop(); onmouseout=this.start();>

➜ Quisque a suscipit metus. Curabitur egestas volutpat bibendum.</br></br>
➜ Ut blandit viverra nisi, pretium volutpat neque congue nec.</br></br>
➜ Proin a sapien eget neque pharetra malesuada a eu nibh.</br></br>
➜ Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit.

</marquee></p></div></td></tr></table><br>

 
<center><div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>

<a href="Publicités , Interdites Merci!://graph-forum.forumactif.Publicités , Interdites Merci!" target="_blank"><img src="Publicités , Interdites Merci!://img15.hostingpics.net/pics/8685298831.png"></a>

</marquee></p></div></center>

<div class="credits">Codage by <a href="Publicités , Interdites Merci!://graph-forum.forumactif.Publicités , Interdites Merci!" target="_blank"><b>mimizZ</b></a> | Tous droits réservés</div></div></div><br><br><br><br><br><br>



INFORMATIONS GÉNÉRALES


mimizZ08/05/2012FireFox 8 et Safari 5HiroMÀJ 27 Mai 2012
[/size]

Débutant | Comment personnaliser la PA ?:Sélectionner le contenu
Comme je l'ai indiqué au-dessus, vous avez le droit de modifier certaines parties de la page d'accueil : les couleurs et le fond.
Ce message s'adresse aux débutants, pour les aider à bien modifier le CSS et la partie HTML [Page d'acceuille] Colorée/Coin très arrondi Icon_smile.


Modification du CSS
[size]


Vous pourrez modifier les couleurs de la page d'accueil via le CSS. Je vais essayer de le faire dans l'ordre de mon CSS pour que vous vous y retrouviez plus facilement [Page d'acceuille] Colorée/Coin très arrondi Icon_smile .

[/size]

    ➜ Titre de Bienvenue

[size]

Nous allons nous intéresser à cette classe :
Code:Sélectionner le contenuSélectionner le contenu
.titre { /* TITRE " BIENVENUE SUR LE FORUM " */
   font-family:Helvetica Neue;
   text-transform:uppercase;
   letter-spacing:-1px;
   font-weight:bold;
   font-size:38px;
   color:#eeeeee;
   text-shadow: 1px 2px 1px #c3c3c3;
   text-align:center;
   -webkit-border-radius: 10px;
   -webkit-border-bottom-right-radius: 40px;
   -webkit-border-bottom-left-radius: 40px;
   -moz-border-radius: 10px;
   -moz-border-radius-bottomright: 40px;
   -moz-border-radius-bottomleft: 40px;
   border-radius: 10px;
   border-bottom-right-radius: 40px;
   border-bottom-left-radius: 40px;
   background-color:#909090;
   border-bottom: 3px solid #cccccc;
   padding:5px;
   }

Voilà ce que vous pouvez modifier, à quoi ça correspond :
(1) color:#eeeeee; = Couleur du texte
(2) background-color:#909090; = Couleur du fond
(3) border-bottom: 3px solid #cccccc; = Couleur de la bordure
Il vous suffit de modifier le code de la couleur ;)

[/size]

    ➜ Cadre présentation

[size]

Il est composé de plusieurs classes :
Code:Sélectionner le contenuSélectionner le contenu
.presentation { /* CADRE TURQUOISE " PRÉSENTATION " */
   margin-right:-4px;
    margin-left:-10px;
   background-color:#00b9e9;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
   box-shadow: 0px 0px 5px #000;
   width:430px;
   height:auto;
   padding-bottom:8px;
   padding-left:16px;
   padding-right:16px;
   padding-top:50px;
   }

(1) background-color:#00b9e9; = Couleur du fond (Turquoise ici)

Code:Sélectionner le contenuSélectionner le contenu
.presentation p { /* ZONE DE TEXTE PRÉSENTATION */
   background-color:#FFF;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
   border-bottom: 3px solid #84d0f0;
   border-left: 3px solid #84d0f0;
   border-right: 3px solid #84d0f0;
   color:#666;
   font-family:calibri;
   font-size:13px;
   text-align:justify;
   padding:20px;
   }

(1) background-color:#FFF; = Fond de la zone de texte (Blanc ici)
(2) color:#666; = Couleur du texte

Code:Sélectionner le contenuSélectionner le contenu
#EnTete #Bande { /* BANDE DE DÉCORATION DU TITRE */
   position:absolute;
   /* positionnement de la bande par rapport à la page d'accueil */
  left:114px;
   top:105px;
   /* largeur et hauteur de la bande */
  width:531px;
   height:72px;
   background-image: url('Publicités , Interdites Merci!://img15.hostingpics.net/pics/776869Bandeau.png');   
}

.titre2 { /* TITRE "PRÉSENTATION */
   position:absolute;
   /* positionnement de la banche par rapport à l'image */
  left:175px;
   top:16px;
   font-family:Helvetica Neue;
   text-transform:uppercase;
   color:#535353;
   font-weight:bold;
   font-size:24px;
   letter-spacing:-1px;
   text-shadow:1px 1px 1px #fff; 
   }

.titre2:hover {color:#00abea;}

(!) Ne pas toucher à #EnTete #Bande : il ne faut pas modifier la taille du cadre ou des marges… Ça risquerait de décaler la bande grise.

(.titre2) color:#535353; = Couleur du titre 'Présentation'
(.titre2:hover) color:#00abea; = Couleur du titre au passage de la souris

[/size]

    ➜ Navigation = Liens

[size]

Code:Sélectionner le contenuSélectionner le contenu
.navigation { /* LIENS */
   font-family:"Courier New", Courier, monospace;
   text-transform:uppercase;
   -webkit-border-top-left-radius: 30px;
   -webkit-border-bottom-left-radius: 30px;
   -moz-border-radius-topleft: 30px;
   -moz-border-radius-bottomleft: 30px;
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
   width:125px;
   background-color:#a6d013;   
   font-size:12px;
   text-align:center;
   text-shadow:0px 0px 3px #666;
   margin-left:15px;
   margin-top:12px;
   padding: 3px;
   border-bottom:2px solid #e9ff9a;
   }

(1) background-color:#a6d013; = Couleur du fond
(2) border-bottom:2px solid #e9ff9a; = Couleur de la bordure

Code:Sélectionner le contenuSélectionner le contenu
.navigation:hover {
   background-color:#fff15f;
   text-shadow:0px 0px 3px #fff;
   letter-spacing:1px;
   border-bottom:2px solid #ffd05f;
   }

(1) background-color:#fff15f; = Couleur du fond au passage de la souris
(2) border-bottom:2px solid #ffd05f; = Couleur de la bordure au passage de la souris

Code:Sélectionner le contenuSélectionner le contenu
.navigation a {color:#FFF;} /* COULEUR DES LIENS */
.navigation a:hover {color:#F60;} /* COULEUR DES LIENS AU SURVOL */

(1) a | color:#FFF; = Couleur des liens
(2) a:hover | color:#F60; = Couleur des liens au passage de la souris

[/size]

    ➜ Annonces

[size]

Code:Sélectionner le contenuSélectionner le contenu
.annonces { /* ANNONCES QUI DÉFILENT */
   width:170px;
   max-height:185px;
   -webkit-border-top-right-radius: 30px;
   -webkit-border-bottom-right-radius: 30px;
   -moz-border-radius-topright: 30px;
   -moz-border-radius-bottomright: 30px;
   border-top-right-radius: 30px;
   border-bottom-right-radius: 30px;
   background-color:#61569d;
   padding-top:8px;
   padding-bottom:8px;
   padding-right:10px;
   box-shadow: 1px 0px 4px #000;
   border-left:thin solid #000;
   text-align:center; 
    }

(1) background-color:#61569d; = Couleur du fond (Violet ici)

Code:Sélectionner le contenuSélectionner le contenu
.titre3 { /* TITRE " ANNONCE " */
   color:#ab8cbc;
   font-size:19px;
   font-family:helvetica neue;
   text-transform:uppercase;
   letter-spacing:-1px;
   font-weight:bold;
   text-align:center;
   text-shadow: 2px 2px 1px #4a4179;
   }

.titre3:hover {
   color:#d6c8f5;
   letter-spacing:0px;
   }

(1) .titre3 | color:#ab8cbc; = Couleur du titre 'Annonce' | text-shadow: 2px 2px 1px #4a4179; = Couleur de l'ombre du texte du donne un effet 3D (à choisir en fonction de la couleur du titre)
(2) .titre3:hover | color:#d6c8f5; = Couleur du titre 'Annonce' au passage de la souris

Code:Sélectionner le contenuSélectionner le contenu
.annonces p { /* ZONE DE TEXTE " ANNONCES */
   color:#666;
   font-family:calibri;
   font-size:13px;
   background-color:#FFF;
   -webkit-border-top-right-radius: 20px;
   -webkit-border-bottom-right-radius: 20px;
   -moz-border-radius-topright: 20px;
   -moz-border-radius-bottomright: 20px;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   text-align:justify;
   padding:8px;
   border-right:3px solid #d6c8f5;
   border-bottom:3px solid #d6c8f5;
   }

(1) color:#666; = Couleur du texte des annonces
(2) background-color:#FFF; = Couleur du fond de la zone de texte
(3) border-right:3px solid #d6c8f5; + [/b]border-bottom:3px solid #d6c8f5;[/b] = Couleur du contour du cadre de la zone de texte

[/size]

    ➜ Partenaires

[size]

Code:Sélectionner le contenuSélectionner le contenu
.partenaires { /* CADRE DES PARTENAIRES + TITRE */
   width:500px;
   background-color:#f39400;
   box-shadow: 0px 0px 5px #000;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
   padding-left:250px;
   padding-right:10px;
   padding-top:1px;
   padding-bottom:1px;
   background-image: url('Publicités , Interdites Merci!://img15.hostingpics.net/pics/874614Partenaires.png');
   background-repeat:no-repeat;
   background-position: left center;
   }

(1) background-color:#f39400; = Couleur du fond (Orange ici)
(2) background-image: url('Publicités , Interdites Merci!://img15.hostingpics.net/pics/874614Partenaires.png'); = Image "Partenaires" à changer si changement de couleur. Faire une image de 250*50 px avec le texte aligné à droite et remplacer le lien de l'image par la nouvelle.

Code:Sélectionner le contenuSélectionner le contenu
.partenaires p { /* ZONE OÙ LES LOGOS SONT MIS */
   background-color:#FFF;
   height:31px;
   padding:6px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   border-bottom: 3px solid #f3c200;
   border-right: 3px solid #f3c200;
   border-left: 3px solid #f3c200;
   }

(1) background-color:#FFF; = Couleur du fond de la zone où les logos défilent
(2) border-bottom: 3px solid #f3c200; + border-right: 3px solid #f3c200; + border-left: 3px solid #f3c200; = Couleur du contour de la zone où les logos défilent


[/size]
HTML | Personnalisation du contenu et du fond
[size]


Je vais faire dans l'ordre du code HTML.
Veuillez ne pas supprimer les textes "   ", ce sont pas des erreurs et ils sont importants.

[/size]

    ➜ Titre de Bienvenue + Fond

[size]

Code:Sélectionner le contenuSélectionner le contenu
<div id="EnTete"><div style="background-image:url('Publicités , Interdites Merci!://img15.hostingpics.net/pics/210661Motif.png');  border: 8px solid #fff ; border-right:5px #fff solid; width: 800px; height: auto; box-shadow: 0px 0px 6px #666; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;"><div class="titre">Bienvenue sur le forum</div><br><br>

(1) [/b]background-image:url('Publicités , Interdites Merci!://img15.hostingpics.net/pics/210661Motif.png');[/b] = Cela correspond au motif de fond. Remplacer le lien par le motif de votre choix [Page d'acceuille] Colorée/Coin très arrondi Icon_wink

(2) Bienvenue sur le forum = Changer le texte si vous le souhaitez [Page d'acceuille] Colorée/Coin très arrondi Icon_smile .

[/size]

    ➜ Navigation | Modifier les liens

[size]

Code:Sélectionner le contenuSélectionner le contenu
<table style="width:780px;"><tr><td style="width:150px;"> 

<div class="navigation"><a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!">Lien 1</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!">Lien 2</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!">Lien 3</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!">Lien 4</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!">Lien 5</a></div>
<div class="navigation"><a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!">Lien 6</a></div>

Pour supprimer un lien, vous devez supprimer une balise :Code:Sélectionner le contenuSélectionner le contenu
<div class="navigation"><a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!">Lien 6</a></div>
Mettez le texte que vous voulez à la place de "Lien X" et modifier le lien qui se trouve juste avant le nom du lien.

[/size]

    ➜ Modifier le texte de la présentation

[size]

Code:Sélectionner le contenuSélectionner le contenu
<td style="width:440px;"><div class="presentation"><p>

Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta. Integer convallis mollis arcu, id cursus risus venenatis ac. Sed gravida, magna et molestie tempor, ante eros dignissim enim, sit amet volutpat elit nulla sit amet magna.<br /> Fusce varius, tellus eget tincidunt semper, quam magna tincidunt nisl, imperdiet condimentum lectus orci et neque. Nullam et erat quam, ac condimentum magna. Donec lobortis dapibus eros, vitae blandit felis faucibus eu. Nulla ipsum velit, posuere vel malesuada eu, rutrum et odio. Maecenas arcu augue, blandit a porta sit amet, vulputate non purus. Nullam quis elit quis sem blandit varius sit amet vitae lacus. Suspendisse potenti. Suspendisse fringilla lacinia sagittis.

</p></div></td>

J'ai bien espacé le code vous n'emportiez de balises 'p' en effaçant. Sachez c'est en HTML, c'est à dire que le retour à la ligne ne ce fait seulement si vous mettez la baliseCode:Sélectionner le contenuSélectionner le contenu
<br>
Pour sauter une ligne, il faudra mettre deux fois la balises [Page d'acceuille] Colorée/Coin très arrondi Icon_wink .

[/size]

    ➜ Modifier les annonces

[size]

Code:Sélectionner le contenuSélectionner le contenu
<td style="width:190px"><p> </p><div class="annonces"><span class="titre3">Annonces</span><p><marquee class="html-marquee" direction="up" scrollamount="3"  onmouseover=this.stop(); onmouseout=this.start();>

➜ Quisque a suscipit metus. Curabitur egestas volutpat bibendum.</br></br>➜ Ut blandit viverra nisi, pretium volutpat neque congue nec.</br></br>
➜ Proin a sapien eget neque pharetra malesuada a eu nibh.</br></br>
➜ Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit.

</marquee></p></div></td></tr></table>

Là aussi, j'ai bien espacé le code pour ne pas se perdre dans les différentes balises. Vous pouvez mettre autant d'annonces que vous voulez, avec des liens si vous voulez, sous la forme :Code:Sélectionner le contenuSélectionner le contenu
<a href="Publicités , Interdites Merci!:// MON LIEN">NOM DU LIEN</a>
N'oubliez pas les balises 'br' pour les retours à la ligne et pour espacer vos annonces.

[/size]

    ➜ Ajouter des partenaires

[size]

Code:Sélectionner le contenuSélectionner le contenu
<center><div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>

<a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!"><img src="Publicités , Interdites Merci!://img15.hostingpics.net/pics/8685298831.png"></a>

</marquee></p></div></center>

Il y a beaucoup de choses ici, on va s'intéresser à cette partie :
Code:Sélectionner le contenuSélectionner le contenu
<a href="Publicités , Interdites Merci!://www.graph-forum.Publicités , Interdites Merci!"><img src="Publicités , Interdites Merci!://img15.hostingpics.net/pics/8685298831.png"></a>
Vous devez mettre les logos de partenariat sous cette forme, c'est à dire :
Code:Sélectionner le contenuSélectionner le contenu
<a href="Publicités , Interdites Merci!://URL DU FORUM PARTENAIRE"><img src="Publicités , Interdites Merci!:// URL DU LOGO 88*31"></a>
Vous ajoutez les codes les uns à la suite des autres. Vous pouvez en mettre autant de vous voulez.


Et voilà j'ai fait le tour des modifications possibles !
Si vous avez des questions ou un problème, n'hésitez surtout pas [Page d'acceuille] Colorée/Coin très arrondi Icon_wink .[/size]
Revenir en haut Aller en bas
https://jeux-games.forumactif.com
 

[Page d'acceuille] Colorée/Coin très arrondi

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [Page d'acceuille] En trois colonne.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Community Of Gamers :: Apprentissage :: Apprentissage des Languages Html :: Le Language [ Css]-