Fond opaque - Catégories bords arrondis - Rétrécir la colonne profil

[Kallindra]

Bonsoir,

Mon design est en cours de réfection.
J'aurais besoin d'aide pour 3 points : Opacifié le fond des catégories et arrondir leur bord et rétrécir la colonne du profil.
Pour l'instant le design est en cours de création sur le forum de test que voilà : http://forum-test-kallindra.forumactif.org/
Il sera pour le forum suivant : http://shadowslegends.forumactif.org/

Voici mon CSS modifié :

Code:

/* Centre le nom des forums */
a.forumtitle {text-align:center;display:block;}

/* Centre la description et les sous-forums */
.dterm div {text-align:center;}

/*opacité et bord arrondis des forums*/
        .forabg, .forumbg, .post {
        background-color : rgba(74, 4, 4, 0.5);
        border-radius : 10px;
        box-shadow : 2px 2px 3px #5e0808;
        }

/*espacement catégorie index*/
        .forabg {margin-top:10px;}

/* changer la taille de la cellule image forums/sujets */
        ul.topics dd.dterm {
        padding-left:85px;
        }
        
       dl.icon {
        min-height:85px;}
        
       ul.topics dt {
        padding-left:85px;
        display: block;
        float: left;
        width:70%;
        }
        .row dl.icon dt {
        background-position: 8px 5px;
        min-height: 85px;
        height:auto !important
        }
        
       ul.pmlist dt,ul.pmlist dd.dterm {
        padding-left: 9px ;
        
       }

/*Met le fond à la taille de l'écran*/
        body {
        background-image:url(http://www.mesmedias.com/users/5bcc8ff04e58e1fc32760322d502988e/Fond_1.jpg);
        background-size: 100% auto;}

/*fixer le fond du forum*/
        body{
            background-position: top center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

/* avatar sur l index */
        .mini_ava {
          float: left;
        }
        .mini_ava img {
          width: 40px;
          height: 60px;
          margin: 0 5px;
          border-radius: 10px;
          transition: all 2s;
          -moz-transition: all 2s;
          -webkit-transition: all 2s;
          -o-transition: all 2s;
        }
        .mini_ava img:hover
        {
          width: 80px;
          height: 120px;
        }

/*centrer les éléments du profil*/
        .postprofile {text-align: center;}

/*taille de la police dans les posts*/
        div.postbody {font-size:12px;}

/*centrer la barre des liens du bas de page*/
        #page-footer {
        width:75.8%;
        margin-left:auto;
        margin-right:auto;}

        ul.linklist li.rightside {float:none;}
        #page-footer, div.navbar, div.navbar ul.linklist {text-align:center;}

/*centrer accueil du bas de page*/
        ul.linklist li.footer-home {
        float:none;}
  
       ul.linklist li.footer-home:after {
        content:" | ";}

/*remonter les stats sur le queel*/
.clear {
clear: none;}

        .bouhautbas {
            bottom: 40px;
            right: 10px;
            position: fixed;
            z-index: 100;
        }



/*titre chatbox*/
        body.chatbox #chatbox_header .chatbox-title,
        body.chatbox #chatbox_header .chatbox-title a.chat-title {
            color: #5C0A0A !important;
  text-shadow: #FFFFFF 1px 1px 2px;
        }

/*lien entête chatbox*/
        .chatbox-options li,
        .chatbox-options li a,
        .chatbox-options li label {
          color: #5C0A0A;
  text-shadow: #FFFFFF 1px 1px 2px;
        }

/*texte section affichage chatbox*/
        .chatbox_row_1,
        .chatbox_row_2,
        .chatbox_row_3,
        .chatbox_row_1 a,
        .chatbox_row_2 a,
        .chatbox_row_3 a  {
          color: #A1A1A1;
        }

/*fond chatbox*/
body.chatbox {
    background-color: #5C0A0A;
}
        body.chatbox {
        background-image: url('http://www.mesmedias.com/users/5bcc8ff04e58e1fc32760322d502988e/1600x1200.jpg');
        }

/*arrière texte section affichage chatbox*/
                .chatbox_row_1,
                .chatbox_row_2,
                .chatbox_row_3{
                  background-color:transparent;
              padding: 0px
        }
        .chatbox_row_1 a,
        .chatbox_row_2 a,
        .chatbox_row_3 a {
                  background-color:none;
      padding: 0px
}

/*arrière plan liste membre CB*/
        #chatbox_members {
        background-image: url("http://www.mesmedias.com/users/5bcc8ff04e58e1fc32760322d502988e/CB_font.jpg");
        }

        /*Bloc réponse rapide*/
      
       .sceditor-container.ltr.sourceMode {
        background-color: #6B0D0D !important;
        }
        .sceditor-container.ltr.wysiwygMode {
        background-color: #6B0D0D !important;
}

        /*Partie supérieur contenant les outils*/
      
       div.sceditor-toolbar {
        background-color: #6B0D0D !important;
        }

        /*Partie texte area : fond*/
      
       .sceditor-container iframe, .sceditor-container textarea {
        background-color: #3D140F !important;
        text-align:justify;
        margin:5px !important;
        line-height: 14px;
        color: #824949 !important;
        font-size:16px !important;
        }

/* bordure de l'éditeur */
div.sceditor-container {
border-color: #824949;
}
 
/* bordure entre la barre d'outils et la zone de saisie de texte */
body div.sceditor-toolbar {
border-bottom-color: #824949;
}
 
/* bordure sous les groupes de bouton */
body div.sceditor-group {
border-bottom-color: #824949;
}

        /*Smileys*/
        img.smiley {
        width: auto !important;
        height : auto !important;
        }

/*centrage de l'éditeur*/
        div.sceditor-container  { margin: auto; }

/*Supprimer l'arrière plan de la PA*/
        div.panel.introduction {background:transparent;}

J'ai une petite 10zaine de code javascript, je vous met juste les titres qui sont assez parlants :

Spoiler:

Merci d'avance pour votre aide,
Cordialement,
Bonne soirée,

AdminSL

[Kallindra]

Up please

[Kallindra]

Maj CSS & JS -- Edition 1er post

[Maxmax]

Salut,

Pour l'opacité de tes catégories et arrondir les angles :

Code:

ul.forums {
background-color : rgba(177, 11, 11, 0.5);
border-radius : 10px;
}

Cordialement,

Max

[Kallindra]

Bonjour Max !

merci bien.
Quelle efficacité

Juste trois questions : Y-a moyen que ça englobe le titre de la catégorie ? Est ce normal que je n'arrive pas à changer la couleur du coup parce que je vais choisir un rouge plus foncé ? Enfin est-il possible que ça s'applique aussi une fois arrivé à l'intérieur des forums et dans les topics ?

EDIT : J'ai édité le premier post avec le nouveau CSS
EDIT 2 : J'ai trouvé et compris le protocole RGB

[Maxmax]

Pour que le titre soit aussi englobé et que ça soit également présent dans les sous-forum et topics, supprime le précédent code et rajoute celui-ci :

Code:

.forabg, .forumbg, .post {
background-color : rgba(74, 4, 4, 0.5);
border-radius : 10px;
box-shadow : 2px 2px 3px #5e0808;
}

[Kallindra]

Merci Max.
Ca fonctionne nikel !

J'ai édité le premier post avec le nouveau CSS.

Ne reste plus que la taille de la colonne du profil ^^

[Maxmax]

La colonne profil, c'est lorsque tu es dans un sujet par exemple ?

[Kallindra]

Oui c'est ça le profil à gauche des posts.

[Maxmax]

Alors pour se faire il faut que tu ajoutes plusieurs choses au CSS :
1/ La largeur du profil :

Code:

.postprofile {
width : 15%;
}

Tu peux ajuster à ta convenance le pourcentage.
2/ La largeur du message :

Code:

.postbody {
width : 80%;
}

Pareil tu peux ajuster, j'ai laissé 5% entre le profil et le message.
3/ Il faut que tu mettes fasse en sorte que tes avatars tiennent la colonne profil :

Code:

.postprofile dl dt a img {
max-width : 100%;
}

[Kallindra]

Super Max

Tout fonctionne parfaitement.

Merci beaucoup pour ton aide.