L'annuaire des forums Forumactif
votre référence en terme de référencement et de développement de forums.
 


Aller à la page : 1, 2  Suivant


 Une page d'accueil complexe

Murmureavatar
Messages : 62
Bonjour, j'ai une demande assez particulière en ce qui concerne une PA : )

Support de mise en page : page d'accueil - messages - page HTML
Résultat en : HTML
Type de mise en page : Personnalisé
Texte : idem
Image(s)
Je vous les donnerais une fois que je les aurais faites et que quelqu'un s'occupe de mon cas : )

----------------------------------------------------
Plan :
Alors voici le plan de base que je souhaiterais voir apparaître sur mon forum, avec à la suite plus de détails:


Onglet accueil:


Onglet Le promontoire:


Onglet nos partenaires:


Onglet Staff:


Onglet prédéfinis:

Script(s) : que voulez vous dire par là? j'accepte toute modifiquation aux templates et autres : )

je vous remercie d'avance à celle ou à celui qui aura le courage de m'aider xD
PhantasmagoriaV.I.P.avatar
Messages : 1019
Bon tout d'abord je te remercie énormément d'avoir présenté un schéma compréhensible, ça se faisait rare @.@

Après, j'aurai quand même besoin de savoir quelques petits détails qui m'aideront dans la réalisation de ton message d'accueil ;

Les couleurs désirées.
Les dimensions de toutes les images voulues ainsi que des échantillons ^^
Que veux tu pour le staff?
Quelle est la largeur de ton forum?

Et que veux-tu dire par "une image basique sauf que quand on passe la souris dessus, une nouvelle page apparait"?

Merci <3
Murmureavatar
Messages : 62
Merci pour ta réponse : )
Et bien c'est moi qui dois te remercier pour toute l'aide que tu m'apportes, et d'avoir accepté de réaliser une commande de cette envergure : D

Alors voici pour commencer les images que je souhaiterais voir apparaître sur la page d'accueil:

L'image basique dont je parle est simplement l'image que l'on verrait de première vue sur la PA, et dès que le pointeur de la souris passe dessus, l'image laisse défiler une seconde image. Je ne sais pas si ce que je dis est clair xD, donc voici les deux images de l'onglet Accueil [ Image défilantes] :

Première image qui demeura la première visible
les dimension sont de 250*312 de hauteur:

Code:
[img]https://lh6.googleusercontent.com/-ZhwirEmqjHg/TdvJNNeOJqI/AAAAAAAAA78/SoBbh6cOFvg/s288/chaon.png[/img]

La deuxième image qui s'affichera quand le pointeur passera par là
les dimension sont de 250*312 de hauteur:

Code:
[img]https://lh3.googleusercontent.com/-1Ll8tO-M17c/TdvLmMbfdFI/AAAAAAAAA8E/71x9dycrfag/s288/chaon2.png[/img]

Ensuite, nous avons l'image du dessous, qui est assez large mais c'est fait exprès : )
Les dimensions sont de 600*226 de hauteur :

Code:
[img]https://lh5.googleusercontent.com/-LXn3_fmPAuE/TdvWSWLw9eI/AAAAAAAAA8M/WqrrXjYjmus/chaonaccueil.png[/img]

Pour les couleurs, je souhaiterais avoir des tons plus dans le marron et ce qui l'entoure.
Les dimensions de mon forum seront à 70%, je ne sais pas ce que ça donne exactement = /
Pour le staff j'aurais aimer avoir une présentation simple mais esthétique. Un truk dans le style, quand je passe ma souris sur l'icone de la personne, on voit afficher une infobulle montrant un lien menant sur les mp ou sa présentation.

Pour les autres images je te les fournis dès que possible : )
encore merci!
PhantasmagoriaV.I.P.avatar
Messages : 1019
Okay pour les premières images, tu veux un accordéon? J'ai produit cet effet sur mon forum, regarde le message d'accueil avec les pages coulissantes http://omerta.forum-canada.com/ c'est ça que tu voudrais?

Pour les couleurs, j'aurai besoin de codes de couleur Wink
j'attendrai pour les autres images !
OscarV.I.P.avatar
Messages : 1454
Bonjour ^^

Personnellement, j'avais compris qu'il voulait une image qui change au passage de la souris.
Je me trompe peut-être :p

Genre quand tu fais rien, c'est la première image.
Et dès que la souris passe dessus, l'image est différente.

(HS : Ton forum est superbe, Phantasmagoria *.*)
PhantasmagoriaV.I.P.avatar
Messages : 1019
"Une image qui change au passage de la souris" n'est pas très clair pour moi, j'aurai besoin de savoir "exactement" ce qu'il veut car j'ai aucune envie de faire un accordéon pour qu'après il me dit que ce n'est pas ça qu'il cherche à produire ^^' voila pourquoi je lui ai montré mon forum où l'effet accordéon se trouve.
Merci merci, ça fait toujours plaisir d'entendre des compliments <3
OscarV.I.P.avatar
Messages : 1454
http://ai-no-kusabi-rpg.forumactif.org/forum

L'image sur la Pa de ce forum.
Elle change quand la souris passe Smile
PhantasmagoriaV.I.P.avatar
Messages : 1019
Aaaaah okay là je vois mieux xD
Merci ^^
J'ai toujours besoin des codes de couleurs ^^
Murmureavatar
Messages : 62
C'est vraiment gentil de votre part de vouloir autant m'aider, j'apprécie : D
Pour ce qui est de l'accordéon, je pense que le lien du forum que Crimson à proposé décrit parfaitement ce que je souhaite avoir, merci!

Les codes de couleurs, j'avais envisager de prendre des couleurs chaudes virant au brun clair, marron etc... Pour parfaitement coller avec le thème en faite. Donc je propose ces couleurs, dis le moi si c'est moche, je changerais directement xD

Couleur de fond:

#E3BC81 ou bien si tu préfères ou juge cela plus esthétique un (une?) pattern ?
Je ne sais pas si c'est plus beau, c'est pour ça que je propose xD

Couleur de texte:
#6B480A

Couleur des contours ( si besoin)
#382606

Couleur de fond de cadre ( emplacement du texte, si c'est plus beau tu peux mettre un bloc de couleur en fond)
#ad8549

Ensuite, bah je sais pas trop si tu as besoin de plus de couleurs, préviens moi et je t'en fournirais d'avantage! Pour les images de l'onglet prédéfinis, voici les images-textes du dessus:


Code:
[img]https://lh6.googleusercontent.com/-497M7YDnk4I/Tdz10kFbxdI/AAAAAAAACo4/2_h1j1cYYk4/chatdeclan.png[/img]


Code:
[img]https://lh6.googleusercontent.com/-VfYLILmgUko/Tdz57kJfoaI/AAAAAAAACo8/ZuO-n6fBSUE/solitairez.png[/img]


Code:
[img]https://lh5.googleusercontent.com/-csgVUmFmqGA/Tdz7fMTkrqI/AAAAAAAACpA/nx00f8AS7N0/traitres.png[/img]

Tu peux les mettre dans l'ordre que tu veux : )
Je te rajouterais ds que possibles les dernières images = )
Et merci encore!
PhantasmagoriaV.I.P.avatar
Messages : 1019
Okay avec ce que tu m'as proposé je peux commencer le codage ^^
Pour la couleur du fond, tu peux me donner le pattern et je verrai en fonction de ce que je trouve plus "esthétique". En tout cas si ça te plait pas, on peut toujours les changer Wink
Et pour les prédéfinis, je mets quoi dans "Prédéfinis avec nom en dessous?"

PS : L'effet de l'image que tu cherche à produire n'est pas un accordéon xD

EDIT : Il y a combien de membres dans le staff?
Murmureavatar
Messages : 62
Voici la pattern [ Désolé si elle n'est pas belle, mais je me suis rendu compte que c'est difficile d'en trouver des sympathiques >-< ]:



Et bien je n'ai pas encore de prédéfinis, je comptais les mettre plus tard, mais ce serait sous forme d'icone 100*100, je peux déja en fournir quelques unes, étant donné que leurs apparences peuvent déja être mit. Au pire je rajoute après le lien et le nom : )
Je peux également mettre un avatar 100*100 avec inscrit à venir ou quelque chose dans ce goût là....Qu'en dis tu?

Pour l'accordéon, oui je savais, c'est juste que j'explique tellement mal XD
Le staff devrait compter environs 5 membres, 3 admin et 3 modos. Je dis cela de cette manière là parce que nous ne sommes pas encore au complet : X Nous recherchons activement des membres donc j'espère que ça ira >-<



PhantasmagoriaV.I.P.avatar
Messages : 1019
Okay ça marche pour le pattern et les prédéfinis,
Je pourrai mettre des images pour la construction du message d'accueil, tu peux les changer plus tard Wink
Et pour le staff, as-tu au moins une image quelconque pour que je détermine au moins ses dimensions?
Murmureavatar
Messages : 62
Merci beaucoup : D
Pour les dimensions celles des 3 admins est de 100*100
Les modos un peu plus petit, je dirais 80*120 +_

PhantasmagoriaV.I.P.avatar
Messages : 1019
Hello !

J'ai commencé ton message d'accueil mais j'aurai besoin de l'image de l'event s'il te plait.

Merci.
Murmureavatar
Messages : 62
Hey!

Merci beaucoup : D
Voici l'image de l'event:



Code:
[img]https://lh3.googleusercontent.com/-eGzA4hLTcsU/Td6jnEqwQ2I/AAAAAAAACpg/tGzH1kGhT-s/event.png[/img]

Et voila : D
Murmureavatar
Messages : 62
Hellow : )

Je venais prendre de tes nouvelles, as tu besoin d'autres infos?
PhantasmagoriaV.I.P.avatar
Messages : 1019
Non ^^
Comme je te l'ai dit j'ai commencé le codage mais j'sais pas quand est ce que je le finis, donc patience Wink
Merci
Murmureavatar
Messages : 62
Okai, pas de soucis : D
Excuse-moi si je parrais un peu rapide dans mes réponses xD
Mais c'est que j'ai hâte de voir les résultats! je suis sur que tu feras de l’excellent boulot : )
PhantasmagoriaV.I.P.avatar
Messages : 1019
Bonjour,

J'ai approximativement fini ton message d'accueil que tu peux voir ici : http://forumtest.creer-forums.com/h15-commande-onglet-annuaire

Comme tu peux voir j'ai redimensionné la majorité des images car elles étaient trop grandes et ça m'a déformé le contenu des onglets.
J'ai aussi ajouté des images de staff (qui sont déformées d'ailleurs) au pif car tu ne m'en as pas donné, donc tu les ajoute toute seule plus tard Wink
Bref, dis moi s''il y a des trucs que tu veux changer/modifier/retirer etc ^^

A bientôt
Murmureavatar
Messages : 62
Ho mon dieu! c'est tout simplement magnifique!!!!! : O
Je te remercie du fond du coeur pour m'avoir créer une si belle page <3
C'est donc avec impatience que j'attend tes codes : D
PhantasmagoriaV.I.P.avatar
Messages : 1019
Ah oui ô.o J'en étais pas sûre ^^'

Bref, voici les codes :

Pour le HTML :



Et pour le CSS, il est commenté pour que tu comprenne l'utilité de chaque code



Et voila ^^
J'ai essayé le pattern comme fond mais le résultat n'était pas très esthétique @.@
Murmureavatar
Messages : 62
Merci encore pour tous : D
J'ai juste une petite question, sur mon forum test quand je mes les codes et tous, les titres des onglets ne donne pas tout à fait l'effet que tu m'a montrer, es ce normal?
Voila le lien du fofo test:

http://laguerredesclans-rpg.forumgratuit.be/

merci <3
PhantasmagoriaV.I.P.avatar
Messages : 1019
Non ce n'est pas normal, change la toute première classe dans le CSS par celle-ci :



Murmureavatar
Messages : 62
Et bien je ne vois là aucune différence après avoir installé ce que tu m'a demandé : S
Voila mon CSS complet, peut être qu'une autre donnée bloque l'effet désiré?

Code:
a
{
text-decoration: none;
}

 body { background-attachment: scroll; background-repeat: no-repeat; background-position: top center;}






a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}




.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #923740;
}









body {background-repeat: no-repeat;}

Body { background-attachment: scroll; background-repeat: no-repeat; background-position: top center;}



a.forumlink{

font-family:font; verdana
padding-right:20px;
color:#923740;
font-size: px;
display:block;

}
a.forumlink:hover{

font-family:font; verdana
padding-right:20px;
color:#CF9471;
font-size: px;
display:block;
}


a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}

a.forumlink {
 text-transform: uppercase;
 font-size: 14px;
 color: ;
 font-family: 'verdana';
 }





.milieu {width: 90%; margin: 0px; border: 1px solid #F3E2CB;-moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px;  background-color: #FBF8F2;}

.derniers_sujets{
margin-top: 3px;
width: 160px; /*Modifie pour avoir la largeur que tu souhaite*/
padding: 3px;
border: 1px double #F2E4C4; /*Contour autour de ton texte*/
background-color:#COULEUR; /*Fond de ton texte*/
-moz-border-radius-topleft: 10px; /*Pour arrondir le bord en haut à gauche*/
-moz-border-radius-bottomright: 10px; /*Pour arrondir le bord en bas à droite*/
}

.sujets_messages
{margin-top: 3px; /* pour faire un léger espace entre le bord et la ligne des "messages & sujets"; on évite de retirer */
padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre; on évite de retirer */
border: 1px dotted #F2E4C4;
background-color: #EED7B6;
-moz-border-radius: 7px 0px 4px 0px;
width: 160px;}

.titre_categorie {
      background: #EED7B6; /*fond*/
      -moz-border-radius-topleft: 50px; /*arrondi angle gauche*/
      -moz-border-radius-topright: 50px; /*arrondi angle droit*/
      -webkit-border-radius-top-left: 50px; /*arrondi angle gauche*/
      -webkit-border-radius-top-right: 50px; /*arrondi angle droit*/
      margin-top: 10px; /*ne pas modifier*/
      margin-bottom:-5px; /*a modifier selon vos goûts*/
      text-align: center; /*alignement du texte*/
      height: auto; /*hauteur à modifier selon vos goûts*/
      width: 100%; /*largeur à modifier selon vos goûts*/
      margin-left: 0px; /*pour déplacer la position des titres des catégories*/
      padding-top: 5px !important; /*espace entre la bordure et le texte*/
      padding-bottom: 0px !important; /*espace entre la bordure et le texte*/
      -moz-text-shadow:  2px 2px 2px #B47D7B; /*ombre sur le texte*/
      -webkit-text-shadow:  2px 2px 2px #B47D7B; /*ombre sur le texte*/
      text-shadow:  2px 2px 2px #923740; /*ombre sur le texte*/
border: 1px solid #EED7B6;
}

.forumline {
-moz-border-radius:10px;
Border-top:2px solid #EED7B6;
border-bottom:4px solid #EED7B6;
border-left:10px solid #EED7B6;
border-right:10px solid #EED7B6;
}


a.mainmenu {
text-decoration: none;
-moz-border-radius :5px;
-webkit-border-radius: 5px;
background-color:#F3E2CB;
border-left:1px solid #F3E5D3;
border-right:1px solid #F3E5D3;
border-bottom: 2px solid #F3E5D3;
border-top: 1px solid #F3E5D3;
color:#923740;
font-size:10px;
font-variant:verdana;
padding-right:10px;
text-align:center;}


.tableauqueel{
background-color : #F9F6E6;
-moz-border-radius:0px;
Border-top:2px solid #F8F3E4;
border-bottom:4px solid #EED7B6;
border-left:10px solid #F8F3E4;
border-right:10px solid #F8F3E4;
}

.partiedroite {
font-size : 12px;
border-left : 3px dotted #EED7B6;
padding-left : 10x }

.groupes{
background-color:#EED7B6;
border: 1px color #923740;
-moz-border-radius : 5px 5px 5px 5px;
height:10px;
padding-right:10px;
padding-left:10px;
padding-bottom:3px;
font-size:10px


}
-----------

page d'accueil

/** caractéristique de l'onglet **/

  .onglet
        {
                display:inline-block;
                margin-left:15px;
                margin-right:3px;
                padding:3px;
           
color: #6B480A;
font-size: 25px;
font-family: Time New Roman;
letter-spacing: -3px;
text-transform: capitalize;
text-shadow: 0 1px 7px #6b1c0a;
text-align: center;
                cursor:pointer;
        }
/** onglet au passage de la souris **/

        .onglet_0
        {
               
               
                margin-left: 30px;
        }
        .onglet_1
        {
                color: #6B480A;
              font-size: 25px;
font-family: Time New Roman;
letter-spacing: -3px;
text-transform: capitalize;
font-style: italic;
text-shadow: 0 1px 7px #6b410a;
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background: #E3BC81;
                -moz-border-radius: 25px;
-webkit-border-radius: 5px;
border-radius: 25px;
border: 2px solid #151a1f;
                margin-top:-1px;
                padding:5px;
                display:none;
                width: 730px;
                  height: 560px;
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }

#navigation {

margin-top: 15px;
margin-bottom: 15px; }

#navigation a:link, #navigation a:visited, #navigation a:active {
width: 200px;
height: 15px;
font-style: Georgia;
font-size: 13px;
text-align: center;
padding: 2px;
color: #ffffff;
background-color: #E3BC81;
line-height: 13px;
display: block;
border-bottom: 2px solid #000;
-moz-border-radius: 15px 15px 15px 15px;
webkit-border-radius: 15px 15px 15px 15px;
-webkit-box-shadow: 0px 3px 2px #615661;
-moz-box-shadow: 0px 3px 2px #615661;
box-shadow: 0px 3px 2px #615661;
}

#navigation a:hover {
color: #fff;
background-color: #6B480A;
}

 /* infobulle*/
.tstaff{font-size:1em;}


.thumbnail span{
position: absolute;
background-color: #6B480A;
padding: 20px;
left: -1000px;
visibility: hidden;
color: #fff;
-webkit-box-shadow: 0px 3px 2px #000;
-moz-box-shadow: 0px 3px 2px #000;
box-shadow: 0px 3px 2px #000;

}
.thumbnail{
position: relative;
z-index: 0;
border:0px solid #fff;
padding-top:3px;
padding-left:3px;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{
position: absolute;
background-color:#6B480A;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #000;
text-decoration: none;
text-align: center;
-moz-border-radius: 15px 0px 15px 0px;
-webkit-border-radius: 15px 0px 15px 0px;
border-radius: 10px;
border: 2px solid #6B480A;
}

.thumbnail span img{
border: 2px solid #6B480A;
padding: 1px;
}

.thumbnail:hover span{
visibility: visible;
top: 25px;
left: 35px; /*position where enlarged image should offset horizontally */
width: 150px
height: 250px;
}

a.imag{
position: relative;
z-index: 1;
}

a.imag:hover{
cursor: help;
z-index: 2;
}

a.imag span{
display: none;
}

a.img:hover span{
display:block;
position:absolute;
z-index: 3;
top: 1px;
left: -20px;
}

/** code du code de bienvenue **/

.title2 {

color: #6B480A;
font-size: 30px;
font-family: Time New Roman;
letter-spacing: -3px;
text-transform: capitalize;
text-shadow: 0 1px 7px #6b1c0a;
text-align: center;
background: #E3BC81;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: 2px solid #6B480A;
 -moz-box-shadow: 0 1px 10px #000;
    -webkit-box-shadow: 0 1px 10px #000;
      box-shadow: 0 1px 10px #000;
}

/** code du fond de tous les cadres **/

.tabinfo0 {
background: #ad8549;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: 2px solid #382606;
 -moz-box-shadow: 0 1px 10px #000;
    -webkit-box-shadow: 0 1px 10px #000;
      box-shadow: 0 1px 10px #000;
padding: 2px;}

/** code de personnalisation du contexte **/
.contexte0 {
width: 230px;
height: 270px;
overflow: auto;
margin: 2px;
padding: 5px;
text-align: justify;}

/** code de personnalisation du event **/

.texteinfo {

text-align: justify;
width: 650px;
height: 100px;
overflow: auto;
margin: 3px;
padding; 4px; }

/** code de personnalisation des partenaires **/

.partab {
width: 630px;
height: 230px;
text-align:left;
padding: 5px; }

/** les sous titres genre staff, crédits etc **/

.titre0 {

color: #3e2500;
font-size: 30px;
font-family: Time New Roman;
letter-spacing: -3px;
text-transform: capitalize;
text-shadow: 0 1px 7px #E3BC81;
line-height: 1px; }

/** code de personnalisation de la partie recrutement **/

.recrutement {

width: 280px;
height: 300px;
padding: 4px;
text-align: justify;
margin-top: 10px; }

/** code de personnalisation du copyright **/

.copy {

text-align: justify;
padding: 4px; }

/** code de personnalisation des informations défilantes **/

.event {
width: 600px;
height: 100px;}
PhantasmagoriaV.I.P.avatar
Messages : 1019
Et bah je ne vois rien qui peut bloquer en plus le 1er code que je t'ai donné représente les onglets hors t'en as pas sur ton forum ce qui m'intrigue ô.o
Je vais voir ça de mon coté cependant peux-tu faire quelque chose?
Va dans ta feuille CSS et dans l'option "désactiver le CSS de base" coche oui et dis moi si c'est toujours la même chose.
Le forum sera tout moche quand tu cocher oui mais t'inquiète pas il suffit de cocher non pour que ça s'affiche normalement, je voudrais juste savoir si ça vient pas de ton forum
Contenu sponsorisé

Aller à la page : 1, 2  Suivant,
 Sujets similaires
-
» [ABANDON] Une page d'accueil à onglets
» [Lixyr Yrna] Une page d'accueil pour rainbow style
» [Akino] Un page d'accueil pour New Day :)
» Message de page d'accueil pour Amplificatum[Phantasmagoria]
» Redirection vers page d'accueil

Répondre au sujet


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

Modérer

Trames

  • Nos services
  • Prés. obligatoire
  • Référencé
  • Réf. (comp)
  • Prérelance
  • 1ère relance
  • 2ème relance
  • Recherche (relance)
  • Recherche (corbeille)
  • Formulaire manquant
  • Formulaire incomplet
  • 1
  • 2
  • 3
  • 4
  • 5
  • Evaluation