Commande de Templates

Dim 20 Mar - 2:44
Bonjour à vous Skaemp, j'espère que vous vous portez bien. Ayant remarqué vos remarquables services sur diverses plateformes. Je viens alors, moi aussi, faire appel à vos services, en espérant trouver mon bonheur. Même si je ne doute pas l'avoir déjà trouvé.
Je viens ici dans le but de commander deux templates: Celui d'un affichage d'un message ainsi que du profil et un autre plutôt 'spécial'.

Largeur maximale : 879px
Hauteur maximale : Auto
Schéma :
Éléments : Il suffit de regarder le schéma que j'ai réalisé.
Images : Rang: http://i.imgur.com/iToWWJn.png
Animations : Au passage du curseur sur l'avatar, celui-ci afficherait un hover; les informations du profil apparaissaient et voir même, si cela est possible, quelques informations de la feuille de personnage.
Libre à vous d'ajouter une quelconque animation.

Informations supplémentaires : Les rangs 'décaleraient' légèrement du corps du profil. Comme on peut le voir sur le schéma.

Largeur maximale : 495
Hauteur maximale : 215
Schéma :
Éléments : À voir avec le schéma
Images : La taille de l'image est de 215*179
Animations : Aucun effet particulier, libre à vous dans ajouter, au besoin.
Informations supplémentaires : J'avoue ignorer si cette commande entre dans les templates

Les principales polices utilisées sont:
Lemon/Milk Regular
Beacon Script

Si vous avez besoin d'une quelconque information. N'hésitez pas, je m'y ferai une grande joie d'y répondre.
Vous souhaitant une bonne soirée/journée.
Revenir en haut Aller en bas
Lun 21 Mar - 5:36
Bonjour,

Remplacer l'intégralité du template viewtopic_body par :

Spoiler:
 

Partie CSS :
Code:
/* POSITION MESSAGE D'ACCUEIL */
#WELC {
margin-left:350px;
}

/* PRESENTATION DU SUJET */
/* TITRE SUJET */
.tlePOST {
margin:auto;
width:850px; padding:15px 0; border-radius:35px 35px 0 0;
background:#6ab004; color:black; /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
.tlePOST h1 {
display:block;
font-size:32px;
}
/* DATE SUJET */
.datePOST {
padding:5px;
font-size:11px; text-transform:uppercase; text-align:left;
}
/* APPARENCE MESSAGE */
div.postbody {
margin-bottom:5px;
width:600px; min-height:450px; padding:10px; border-radius:35px 35px 0 0;
background:#232323; color:#ccc; /* MODIFIABLE */
text-align:justify;
}
/* TAILLE MAXIMALE DES IMAGES APPARENCE MESSAGE */
div.postbody img {
max-width:575px;
}
/* IMAGES CONTACT JOUEUR */
.ktactPOST {
display:inline-block;
}
/* CITER / EDITER / SUPPRIMER / IP */
.toolsPOST {
display:inline-block; margin-left:25px; margin-right:25px;
}
/* BLOC JOUEUR */
.boxPOST {
margin-left:10px; width:200px;
}
/* IMAGE RANG */
.imgrankPOST {
margin-left:55px;
}
/* AVATAR */
.avaPOST {
margin-top:-275px;
width:200px; height:320px;
}
/* INFORMATIONS JOUEUR */
.abtPOST {
position:absolute; z-index:3; margin-top:-320px;
width:190px; height:310px; padding:5px; overflow:hidden;
text-align:left; font-size:11px;
background:rgba(0,0,0,0.7); color:white; /* MODIFIABLE */
opacity:0; transition:opacity 0.55s ease-in-out; -webkit-transition:opacity 0.55s ease-in-out;
}
.abtPOST:hover {
opacity:1;
}
/* INTITULES INFORMATIONS JOUEUR */
.abtPOST span{
text-transform:uppercase; font-weight:bold; /* MODIFIABLE */
}
/* FEUILLE DE PERSONNAGE */
.rpgPOST{
margin-top:5px; font-size:11px;
color:white; /* MODIFIABLE */
}
/* PSEUDONYME */
.namePOST {
width:200px; padding:5px 0 0; text-align:center;
font-size:32px; font-family:Kaushan Script;
}
.namePOST a {
text-decoration: none !important;
}
/* TEXTE RANG */
.rankPOST {
display:none;
}
/* EN LIGNE */
.onPOST {
margin:auto; text-align:center;
}

I. Créer une nouvelle page html en mode avancé :


Code:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">
<style type="text/css">/* BLOC MESSAGE D'ACCUEIL */
.WELC {
width:495px; height:200px;
background:#191919; /* MODIFIABLE */
}
/* IMAGE */
.imgWELC{
display:inline-block; margin:10px;
width:215px; height:179px;
}
.boxWELC {
display:inline-block; vertical-align:top;
}
/* TITRE */
.tleWELC {
text-align:center; font-size:24px; font-family:Kaushan Script;
color:#d8fb06; /* MODIFIABLE */
}
/* MESSAGE */
.msgWELC {
width:250px; height:155px; overflow:auto;
color:#e3e3e3; /* MODIFIABLE */
font-size:11px; font-family:Verdana; text-align:justify;
}</style>
<div class="WELC"><!-- IMAGE --><img class="imgWELC" src="" /><!-- TITRE & MESSAGE --><div class="boxWELC"><!-- TITRE --><div class="tleWELC">Notre petit monde</div><!-- MESSAGE --><div class="msgWELC">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div></div>

II. Placer l'iframe suivante à la ligne 279 du template overall_header en remplaçant le lien par celui de la page html précédemment créée :


Code:
<!-- MESSAGE D'ACCUEIL --><div id="WELC"><iframe src="lien" scrolling="no" style="width:500px; height:200px;" marginwidth="0" marginheight="0" frameborder="0"></iframe></div>
Revenir en haut Aller en bas
Sam 26 Mar - 1:12
Bonjour,
merci infiniment pour votre excellent travail. Tout fonctionne parfaitement et je n'ai rencontré aucun problème à l'installation des codes.
En espérant avoir la chance de vous recroiser,
Tentation d'Hybrid Tentation
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum