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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Kallindra le Mar 6 Mai 2014 - 21:44

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:

Bannière défilante
Modifier stats QEEL
Désctiver WYSIWYG par défaut
CB à gauche
Ascenceur
déplacer le PA au dessus de la barre de lien en bas de page
profil : pseudo & rang au dessus de l'avatar
Avatar sur l'index

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

AdminSL


Dernière édition par AdminSL le Jeu 8 Mai 2014 - 21:14, édité 5 fois

Kallindra
# Tropactif #

Féminin
Messages : 1277
Inscrit(e) le : 04/03/2013

http://darkdawnsymphony.forumgratuit.org/
Kallindra a été remercié(e) par l'auteur de ce sujet.

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

Message par Kallindra le Mer 7 Mai 2014 - 22:55

Up please

Kallindra
# Tropactif #

Féminin
Messages : 1277
Inscrit(e) le : 04/03/2013

http://darkdawnsymphony.forumgratuit.org/
Kallindra a été remercié(e) par l'auteur de ce sujet.

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

Message par Kallindra le Jeu 8 Mai 2014 - 16:19

Maj CSS & JS -- Edition 1er post

Kallindra
# Tropactif #

Féminin
Messages : 1277
Inscrit(e) le : 04/03/2013

http://darkdawnsymphony.forumgratuit.org/
Kallindra a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Maxmax le Jeu 8 Mai 2014 - 16:38

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

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

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

Message par Kallindra le Jeu 8 Mai 2014 - 17:36

Bonjour Max !

merci bien.
Quelle efficacité Very Happy

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 Wink

Kallindra
# Tropactif #

Féminin
Messages : 1277
Inscrit(e) le : 04/03/2013

http://darkdawnsymphony.forumgratuit.org/
Kallindra a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Maxmax le Jeu 8 Mai 2014 - 19:03

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;
}

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

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

Message par Kallindra le Jeu 8 Mai 2014 - 19:21

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 ^^

Kallindra
# Tropactif #

Féminin
Messages : 1277
Inscrit(e) le : 04/03/2013

http://darkdawnsymphony.forumgratuit.org/
Kallindra a été remercié(e) par l'auteur de ce sujet.

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

Message par Maxmax le Jeu 8 Mai 2014 - 19:25

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

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

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

Message par Kallindra le Jeu 8 Mai 2014 - 19:53

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

Kallindra
# Tropactif #

Féminin
Messages : 1277
Inscrit(e) le : 04/03/2013

http://darkdawnsymphony.forumgratuit.org/
Kallindra a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Maxmax le Jeu 8 Mai 2014 - 20:23

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%;
}

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

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

Message par Kallindra le Jeu 8 Mai 2014 - 21:13

Super Max

Tout fonctionne parfaitement.

Merci beaucoup pour ton aide.

Kallindra
# Tropactif #

Féminin
Messages : 1277
Inscrit(e) le : 04/03/2013

http://darkdawnsymphony.forumgratuit.org/
Kallindra a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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