Modification du profil fenêtré (phpBB3)

[SweetGumiho]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://thewitcher.jdrforum.com/

Description du problème

Bonjour,

Voici comment j'aimerais modifier cet espace de profil :
- enlever les lignes séparant chaque champs
- enlever la ligne sous le pseudo
- centrer le pseudo par rapport à l'avatar
- diminuer la taille de la police de "voir le profil [Nom d'utilisateur]"
- centrer "voir le profil [Nom d'utilisateur]"
- Faire des onglets au bord arrondis comme sur le FdF
- Modifier "Personnage" par "Autres infos sur le personnage"

Merci d'avance pour vos réponses ! ♥

[Ange Tuteur]

Bonjour SweetGumiho,

Ajoutez les codes suivant dans votre feuille de style :

Code:

div.separator { display:none }
#profile-advanced-right .module .h3 {
  border:none;
  text-align:center;
}
h1.page-title {
  font-size:18px;
  text-align:center;
}

/* onglets */
#tabs a span {
  color:#666;
  padding:6px 10px;
}
#tabs a {
  background:#333;
  border:1px solid #666;
  border-bottom:none;
  border-radius:3px 3px 0 0;
  box-shadow:0 6px 4px rgba(255,255,255, 0.15) inset;
  padding:0;
}
#tabs a:hover {
  top:1px;
  background:#222;
}

#tabs .activetab a span { color:#666 }
#tabs .activetab a {
  background:#222;
  border-bottom:none;
  margin-bottom:0;
}
#new-message-link a { border:none }

Pour l'onglet "Personnage", rendez-vous dans Panneau d'administration > Modules > Jeux de rôle > Gestion des champs > Modifier l'intitulé "Feuille de personnage"

[SweetGumiho]

Merci. C'est presque bon. Il me faudrait un petit espace entre "voir le profil [Nom d'utilisateur]" et les onglets.

[Ange Tuteur]

Remplacer ce code :

Code:

h1.page-title {
  font-size:18px;
  text-align:center;
}

par :

Code:

h1.page-title {
  font-size:18px;
  text-align:center;
  margin-bottom:10px;
}

[SweetGumiho]

Alors ça a beau ne pas être complètement collé maintenant, quand je change la valeur de margin-bottom par 30, 50 ou 100px, cela ne change absolument rien, il y a toujours le même écart... :/

Aussi j'aimerais réduire l'écart entre les différents champs :



Ma feuille de style CSS actuelle :

Code:

/****** GENERAL ******/
 
#wrap {
  border:0;
}

body {
  background-position:top center;
  background-attachment:scroll;
  background-repeat:no-repeat;
  cursor: url(http://i.imgur.com/b11hENL.png), auto;
}

a, .buttons img, .postbody ul.profile-icons img, p.right a img, fieldset.jumpbox select, fieldset.jumpbox input, fieldset.quickmod select, fieldset.quickmod input, span.selectCode{
cursor: url(http://i.imgur.com/Ut1cSFd.png), pointer;
}

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

.inputbox {
  background:#3c3c3c;
  color:#ffffff;
  padding:2px;
  border:1px solid #BCBCBC;
  border-radius:10px;
  cursor:text;
}
 
.forabg {
  background:url(http://imageshack.com/a/img838/9827/fsga.png) #262627;
  margin-bottom:4px;
  padding:0px 5px;
  border-radius:10px;
  border:1px solid #101010;
  box-shadow:0 0 9px #000000;
  clear:both;
}
 
.forabg .lastpost {
  width:15%;
}
div.forabg ul.topiclist dd.dterm {
  width: 70%;
}
 
.panel {
  background:#000000;
  padding:0px 10px;
  margin-bottom:4px;
  border-radius:10px;
  border:1px solid #101010;
  box-shadow:0 0 9px #000000;
}
 
#search-box input,#search-box input.button1,input.search,#smiley-box {
  display:none;
}
 
.slidesmile {
  position:relative;
  top:39px;
  left:705px;
  z-index:4;
}

::-webkit-scrollbar { /* Bloc général de la scrollbar, pour gérer la taille */
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-thumb { /* Couleur du petit ascenseur et bords arrondis */
  background: #2c444f;
  border-radius: 15px;
}
/****** CHATBOX ******/

#chatbox .date-and-time, #chatbox .user-msg { /* Force le pseudo et la date à rester sur la même ligne */
white-space: nowrap;
}

#chatbox .msg { /* Force le texte à retourner à la ligne quand il dépasse la largeur maximum */
word-wrap: break-word;
white-space: normal;
}

h2.chatbox-title:after { content: "Le Foyer"; } /*titre de la chatbox*/
a.chat-title { display: none;
}
body.chatbox #chatbox_header .chatbox-title,
body.chatbox #chatbox_header .chatbox-title a.chat-title {
    font-size: 14px !important;
}
#chatbox.recently-connected:after {
  font-family: "trebuchet ms", serif;
  font-size: 1em; line-height:1.5em; font-weight: bold; color: #8BC34A;
  box-shadow:0 0 5px #AED581; display:block; background: #000000; margin:auto;
  width:80%; margin:1.5% auto; padding:1%; white-space: pre;
  content: "Bienvenue dans le Foyer. Si vous êtes seul(e), n'oubliez pas de remettre une bûche dans le feu.";
}

.cb_bloc{
height: 0;
overflow: hidden;
transition: 1s all;
}

/****** NAVIGATION *******/
 
.navig {
  position:fixed;
  background:#000;
  width:100%; /*couleur de fond de la barre de navigation*/
  top:0;
  box-shadow:0 2px 10px #000; /*effet d'ombre sous la barre de navigation*/
}
.navig a {
  font-family:'Alegreya SC'; /*police des liens*/
  font-size:14px; /*taille police des liens*/
  color:#6F7D7D; /*couleur des liens*/
}
.navig a:hover {
  color:#4D7999; /*couleur des liens au survol*/
  letter-spacing:1px;/*espacement des lettres au survol (0=normal)*/
}
.navig li {
  display:inline-block;
  padding:12px; /*marge autour des liens*/
}
a.mainmenu span.new-message{
color: #EAC117;
}
a.mainmenu span.new-message:hover{
color: #A#FDD017;
}

/****** PAGE DES SUJETS ******/
 
.post {
  background:#262627;
  padding:0 10px;
  margin-bottom:4px;
  border-radius:10px;
  box-shadow:0 0 9px #000000;
}
.postbody /*justification automatique des posts*/ {
  display:block;
  text-align:justify;
  padding:10px;
  width: 73%;
}
.postprofile {
  position:relative;
  min-height:80px;
  width:210px;
  background:rgba(0,0,0,0.4);
  margin:5px 0 0;
  padding:5px;
  color:#999;
  text-align:center;
  word-wrap:break-word;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:5px;
  box-shadow:0 1px 3px rgba(0,0,0,0.6) inset,0 0 0 1px rgba(255,255,255,0.05),0 1px 0 rgba(255,255,255,0.1);
}
ul.profile-icons {
  margin-top:10px;
  list-style:none;
  border-radius:10px;
}
 
.profil_mess { /*** debut profil des messages ***/
background: #313038;
border: 1px solid #121218;
border-bottom: 6px solid #121218;
border-top: 0;
margin-left: -1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
 
.profil_onglet {
height: 20px;
position: relative;
}
.profil_onglet a, .profil_onglet a:hover, .profil_onglet a:active, .profil_onglet a:focus, .profil_onglet a:visited{
color: #BFBFCA;
text-decoration: none;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
}
.profil_onglet .selected{
background: #1D1D25;
color: #BFBDE8;
}
 
.onglet_profil, .onglet_rpg {
background: #121218;
display: inline-block;
position: absolute;
width: 50%;
height: 10px;
padding: 5px 0;
}
 
.onglet_rpg {
left: 50%;
border-top-right-radius: 5px;
}
 
.onglet_profil {
left: 0;
border-top-left-radius: 5px;
}
 
.profil_mess .rpg, .profil_mess .rpg br:first-child{
display: none;
}
 
.profil_mess .profil, .profil_mess .rpg{
overflow: hidden;
text-align: left;
padding: 4px;
}

.profil_mess .rpg{ /* Force le titre des champs de la feuille à être en gras, centré, et en majuscule dans les sujets */
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

.profil_mess .rpg textarea{ /* Force la largeur maximum des champ de texte de la fiche RPG dans les sujets et met un fond noir */
width: 185px;
max-width: 185px;
background: #000;
}

.profil_mess img{ /* Force la largeur maximum des images du profil dans les sujets */
max-width: 200px;
}

div#profile-tab-field-profil dl dt { /* Rénitialise la largeur en automatique et ajoute un petit margin pour pas que le texte soit collé aux deux points */
width: auto;
margin-right: 2px;
}

#profile-tab-field-profil dl dd{ /* Réinitialise le padding left et le margin left pour que le texte s'adapte à la taille du label */
padding-left: 0;
margin-left: 0;
}

.rpg a[href*="rpgsheet"], .rpg a[href*="rpgsheet"] + br{ /* Fais disparaître le terme "Feuille de personnage, dans le profil dans les messages */
display: none;
}

.profil_pseudo strong{ /* Modifie le pseudo dans les sujets */
font-variant: uppercase;
font-family: 'Alegreya SC', serif;
font-size: 16px
}

/*** fin profil des messages ***/

/****** PROFIL FENETRE ******/
 
.module {
background:url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png) repeat-x #262627;
border:1px solid #101010;
border-radius:10px;
box-shadow:0 0 9px #000000;
}
.signature {
border-radius:10px;
}

div.separator { display:none }
#profile-advanced-right .module .h3 {
  border:none;
  text-align:center;
}
h1.page-title {
  font-size:18px;
  text-align:center;
  margin-bottom:10px;
}
 
/* onglets */
#tabs a span {
  color:#666;
  padding:6px 10px;
}
#tabs a {
  background:#333;
  border:1px solid #666;
  border-bottom:none;
  border-radius:3px 3px 0 0;
  box-shadow:0 6px 4px rgba(255,255,255, 0.15) inset;
  padding:0;
}
#tabs a:hover {
  top:1px;
  background:#222;
}
 
#tabs .activetab a span { color:#666 }
#tabs .activetab a {
  background:#222;
  border-bottom:none;
  margin-bottom:0;
}
#new-message-link a { border:none
}
 
/****** CASE DES TABLEAUX DE FORUMACTIF ******/
 
.row2,.row1 {
background:url(http://imageshack.com/a/img690/452/q962.png) center top repeat-x #0D0C0B;
}

/****** BALISE CODE ******/

dl.codebox {
background:#1E1D1B;
font-size:1em;
padding:3px;
border:1px solid #878787;
border-radius:10px;
}
 
/***** BALISE BLOCKQUOTE ******/
 
.postbody blockquote {
background:#1E1D1B;
border: 1px solid #878787;
border-radius: 10px;
text-align: justify;
padding: 10px;
color: #878787;
margin: auto;
}

.postbody blockquote div {
margin-left: 5px;
font-size: 10px;
font-style: italic;
}

/****** SPOILER ******/

.spoiler_closed, .spoiler_closed.hidden, .spoiler_content, .spoiler_content.hidden {
  background: #000;
  text-align : justify; /* alignement standart d'un spoiler */
  padding:10px; /* espacement entre le bord de votre cadre et votre texte */
}


/***** SELECTION CODE ******/

.selectCode {
float:right; text-transform: uppercase; cursor: pointer;
}
 
/****** BUTTON ET INPUT *******/
 
a.button1,a.button2,button.button2,input.button1,input.button2 {
  background:url(http://imageshack.com/a/img849/7503/zow4.png) #1E1D1B;
  border:0;
  color:#B89E7D;
}
 
/****** CATEGORIES ******/
 
.gauche {
  float:left;
}
.linklist {
  text-align:center; /*pour centrer les liens au dessus des catégories*/
  color: #463F23;
}
.linklist a {
  color: #463F23; /*couleur des liens en-tête et pied de page*/
}
.titre_cat {
        margin-bottom: 15px;
}
ul.topiclist dd.dterm{width:60%; /* retrecir table titre */
}
dd.lastpost{margin-left:20px;  /* marge dernier sujet */
}
dd.lastpost span {margin-left:25px;  /* marge titre dernier message*/
}
.forabg .header dd.dterm { text-align:center /* catégorie au centre */
}

/****** SIGNATURES ******/

  .signature_div img{
    max-width: 400px !important; /*pour redimensionner les signaturess*/
    max-height: 100px !important;
}

/****** QEEL ******/

#i_whosonline + p a.gensmall{ /* Modifie la taille de la légende du QEEL, à modifier par la futur class qui servira à entourer la légende tout en gardant le "a.gensmall"
sauf si la légende est refaite à la main et sans balise "a" ou sans qu'elle est la class "gensmall" */
font-family: 'Alegreya SC', serif;
text-transform: uppercase;
}

/****** PIED DE PAGE ******/

ul.linklist.clearfix li{float: none;} /* Enlève le flottement */
ul.linklist.clearfix{text-align: center; color: #222325;} /* Centre le texte */
ul.linklist.clearfix li.rightside strong:first-child:before {content: " ▴ ";} /* Ajoute une séparation avant "Créer un forum", à remplacer par ce que tu veux */


/****** SELECTEURS ******/

select{Background: #000; color: #C0A171}

/****** SCROLLBAR ******/

-webkit-scrollbar { /* Bloc général de la scrollbar, pour gérer la taille */ height: 8px; width: 8px; }
-webkit-scrollbar-thumb { /* Couleur du petit ascenseur et bords arrondis */ background: #2c444f; border-radius: 15px; }

Merci bien.

[Ange Tuteur]

Ajoutez !important à margin-bottom.

Code:

margin-bottom:25px !important;

Pour le champs du profil ajouter ce code dans votre feuille de style :

Code:

#profile-tab-field-profil dl {
  padding:5px 0; /* Ypx Xpx */
  margin:0;
}

[SweetGumiho]

Merci, je pense que je peux à présent déclarer ce problème comme résolu.