[PHPBB2] CSS : Bordure rose et fond gris

2 participants

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

Résolu [PHPBB2] CSS : Bordure rose et fond gris

Message par Edena Lun 12 Jan 2015 - 22:40

Bonsoir !

Un ami à moi a eu la gentillesse de me fournir un code à mettre dans mon CSS pour customiser mon forum. Le seul hic, c'est que j'aimerais modifier plusieurs choses et étant donné que cet ami est absent, je me tourne vers vous.

Voilà le CSS :
Code:
/*CADRE DU FORUM */
.bodyline{border:7px solid #f2acac;
}
/*FIN CADRE DU FORUM*/

#page-footer
{
  width: 800px;
  height: 137px;
  margin: auto;
  background: url(http://i38.servimg.com/u/f38/19/00/06/13/captur24.png);
  border-top: 3px solid #545454;
}
#page-footer a
{
  font-size: 10px;
  color: #5B77F0 !important;
}
#page-footer a:hover
{
  color: #303030 !important
}



/*Mise en page catégories*/
.cate_titre
{
  width: 98%;
  margin: auto;
  text-align: center;
}
.categorie
{
  width: 98%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #ffffff;
  border-top: 3px solid #4c4842;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  box-shadow: 0px 0px 5px #595959;
  -moz-box-shadow: 0px 0px 5px #595959;
  -o-box-shadow: 0px 0px 5px #595959;
  -htm-box-shadow: 0px 0px 5px #595959;
  -webkit-box-shadow: 0px 0px 5px #595959;
}
.forum
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #ffffff;
  border: 1px dotted #c0c0c0;
  padding: 2px;
}
.forumlink
{
  display: block;
  width: 400px;
  font-variant: small-caps;
  letter-spacing: 2px;
  padding-left: 20px;
  text-shadow: 1px 1px 0px #ffffff;
}
.forumlink a
{
  font-size: 16px;
  border-bottom: 2px dotted #c0c0c0;
}
.description
{
  display: block;
  width: 400px;
  margin: auto;
  font-size: 11px;
  text-align: justify;
  color: #a6a6a6;
}
.illu
{
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid #c0c0c0;
  background: #786B6B;
  padding: 5px;
}

.stats_last
{
  display: block;
  width: 150px;
  margin: auto;
  background: #786B6B;
  padding: 10px;
  border: 1px dotted #c0c0c0;
}
.stats
{
  display: block;
  text-align: center;
  font-size: 10px;
  color: #a6a6a6;
  border-bottom: 1px solid #cacaca;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.last
{
  display: block;
  text-align: center;
  font-size: 11px;
}
.sous_forum
{
  display: block;
  width: 98%;
  margin: auto;
  background: #ffffff;
  padding: 2px;
  text-align: center;
}

/*Mise en page diverses*/.forumline
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #e9e9e6;
  border: 1px solid #000000;
  box-shadow: 0px 0px 5px #595959;
  -moz-box-shadow: 0px 0px 5px #595959;
  -o-box-shadow: 0px 0px 5px #595959;
  -htm-box-shadow: 0px 0px 5px #595959;
  -webkit-box-shadow: 0px 0px 5px #595959;
}

.forumline
{
  width: 98%;
  margin: auto;
}
table
{
  width: 98%;
  margin: auto;
}
/*fin du code*/
/*Code pour certains problèmes*/a:link, a:link hover
{
  text-decoration: none !important;
}
#navig a
{
  font-weight: bold;
  color: #b9b9b9 !important;
  text-shadow: 1px 1px 0px #000000;
}
#navig a:hover
{
  color: #efefef !important;
}

#i_logo
{
  margin-top: 22px;
}
/*Fin du code*/
/*Code de la navigation*/
#navigation
{
  position: fixed;
  z-index: 999;
  height: 30px;
  width: 100%;
  margin-left: -8px;
}
#navig
{
  width: 800px;
  margin: auto;
  text-align: center;
  background: #4c4842;
  border-bottom: 2px solid #939393;
  padding-bottom: 3px;
}
#navig a
{
  font-weight: bold;
}/*Fin du code*/

/*Code pour une petite ombre*/
.bodyline
{
  width: 950px;
  padding: 0;
  background: #c0c0c0;
  box-shadow: 0px 0px 10px #000000;
  -moz-box-shadow: 0px 0px 10px #000000;
  -o-box-shadow: 0px 0px 10px #000000;
  -htm-box-shadow: 0px 0px 10px #000000;
  -webkit-box-shadow: 0px 0px 10px #000000;
}
/*Fin de ce code*/
/*Début mise en page bannière*/
.bodylinewidth
{
  width: 800px;
}

.bodyline
{
  width: 800px;
  padding: 0;
  background: #;
}

.bodylinewidth
{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
}
/*Fin code*/
/* début code slide vertical*/
#acordvert
{
width: 850px;
border-top-style: groove;
border-top-color: #1F1515;
border-right-color: #1F1515;
border-bottom-color: #1F1515;
border-left-color: #1F1515;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
}
#info1
{
width: 850px;
height: 30px;
overflow: hidden;
background-color:#362C2C;
border-bottom: 1px dashed #1F1515;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
#info2
{
width: 850px;
height: 30px;
overflow: hidden;
background-color:#362C2C;
border-bottom: 1px dashed #1F1515;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
#info3
{
width: 850px;
height: 30px;
overflow: hidden;
background-color:#362C2C;
border-bottom: 1px dashed #1F1515;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
#info4
{
width: 850px;
height: 30px;
overflow: hidden;
background-color:#362C2C;
border-bottom: 1px dashed #1F1515;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

#info6
{
width: 850px;
height: 30px;
overflow: hidden;
background-color:#362C2C;
border-bottom: 1px dashed #1F1515;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

#info1:hover
{
height: 250px;
overflow: hidden;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;

}

 #info2:hover
{
height: 600px;
overflow: hidden;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;

}



 #info3:hover
{
height: 1900px;
overflow: hidden;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;

}


#info4:hover
{
height: 1200px;
overflow: hidden;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;

}

#info6:hover
{
height: 500px;
overflow: hidden;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;

}

.titre
{
display: block;
text-align: center;
width: 850px;
height: 30px;
font-size: 20px;
letter-spacing: 2px;
font-family: verdana;
font-weight: italic;
padding-top: 2px;
color:#300
}
.contenu
{
width: 90%;
margin: auto;
background-color: #BBB;
padding: 4px;
color: #300;
font-size: 14px;
text-align: justify;
border-top-style: groove;
border-top-color: #088;
border-right-color: #088;
border-bottom-color: #088;
border-left-color: #088;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
}
/* Fin du code pour le slide vertical*/

.statistiques{
border:0px;
background-image: url("http://up4u.free.fr/images/c9i4q67phs30yc48j1kx.png");
background-repeat: no-repeat;
background-position: center;
height:300px;}

.groupes{
background-color:#4e3939;border: 1px;
-moz-border-radius : 15px 15px 15px 15px;
border-left: 6px solid #301313;
border-right: 6px solid #301313;
height:40px;padding-right:5px;padding-left:5px;padding-bottom:1px;
font-size:12px;font-weight: bold;text-align:center;
text-decoration: none !important;}





.box {
background-color:#1F1515;
color:#363642;
font-size:11px;
margin:0;
padding:3px 10px;
}

.main
{font-family:  serif;
text-transform : uppercase;
text-align: center;
font-size: 100%;
background-color: #363642;
border-bottom: 2px solid #A6A4A4;
color: #FCFCFC;
letter-spacing: 1px;
display: block;}

.main:hover
{background-color: #A6A4A4;
text-align: center;
display: block;
border-bottom: 2px solid #363642;
}


a.imginfo {
  position: relative;
  color: #7d7d7d;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid;
}

a.imginfo span {
  display: none;
}
a.imginfo:hover {
  background: none;
  z-index: 999;
  cursor: help;
}
a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 5px;
  left: 15px;
  background: #363642;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}

.abc {border-bottom: 5px solid #1A100F}
.def {
background-color: #1A100F;
-moz-border-radius:5px;
font-size: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px;
}

.bodyline {-moz-border-radius:20px;}

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

-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }




th {
-moz-border-radius-topleft: 20%;
-moz-border-radius-topright: 20%;
border-top-left-radius: 20%;
border-top-right-radius: 20%;
}

body.chatbox {
background-image:url();
background-repeat:no-repeat;
}

/********* DÉBUT CATÉGORIES ***********/
/* Mise en place du conteneur d'onglets */
#conteneur_onglets_cate {
  /* Taille (largeur et hauteur) */
  width: 90%;
  height: 25px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 30px;
  overflow: visible;
  /* Couleur de fond */
  background-color: rgba(178, 178, 178, 0.8);
  display: none;
  text-align: center;
}

/* Mise en forme des noms d'onglets */
#conteneur_onglets_cate div {
  display: inline-block;
  verctical-align: bottom;
  position: relative;
  bottom: 25px;
  margin: 10px;
  /* Couleur */
  color: #3C4A55;
  font-size: 16pt;
  /* Police d'écriture */
  font-family: 'Dancing Script';
  transition: all ease 1s;
}

/* Effet au passage de la souris sur les noms d'onglets */
#conteneur_onglets_cate div:hover {
  color: #43586B;
  transition: all ease 1s;
}
 
/* CSS pour les onglets */
.onglet_cate {
  cursor: pointer;
}

/* CSS pour retirer le contour de catégories */
.categorie .forumline {
  border: 0px solid;
}

/* Mise en pace du titre de catégorie */
.secondarytitle {
  width: 100%;
  text-align: center;
}

/* Mise en forme du titre de catégorie */
.secondarytitle h2 {
  color: #3C4A55;
  font-size: 20pt;
  font-family: 'Dancing Script';
  letter-spacing: 0px;
  transition: all ease 1s;
}

/* Effet au passage de la souris sur le titre de catégorie */
.secondarytitle h2:hover {
  letter-spacing: 3px;
  transition: all ease 1s;
}

/* Mise en forme du titre de sous-forum 8position) */
.titre_forum {
  width: 90%;
  margin: auto;
  margin-bottom: -10px;
  text-align: left;
}

/* Mise ne forme du lien de sous-forum */
a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
  /* Couleur, taille et police */
  color: #141A28;
  font-size: 16pt;
  font-family: 'Dancing Script';
  /* Mise ne place de l'effet */
  letter-spacing: 0px;
  transition: all ease 1s;
}

/* Effet au passage de la souris sur les liens de sous-forum */
a.forumlink:hover {
  color: #45576B;
  text-decoration: none !important;
  letter-spacing: 2px;
  transition: all ease 1s;
}

/* Contour des sous-forums */
.conteneur_forum {
  width: 730px;
  margin: auto;
  padding: 10px;
  border-radius: 20px;
  /* Couleur de fond */
  background-color: rgba(178, 178, 178, 0.8);
}

/* Countour de la description de sous-froums */
.description_forum {
  display: inline-block;
  vertical-align: top;
  /* Taille */
  width: 440px;
  height: 80px;
  padding: 10px;
  margin: 5px;
  margin-left: 60px;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
  overflow: hidden;
}

/* Position de l'image dans la description */
.description_forum img {
  float: left;
  margin-right: 10px;
  border-radius: 5px;
}

/* Mise en forme du texte dans la description */
.description_forum p {
  width: 320px;
  height: 70px;
  margin: 0px;
  overflow: auto;
  /* Couleur du texte */
  color: #43586B;
  text-align: justify;
}

/* Conteneur des statistiques et dernier message */
.conteneur_stats {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  /* Taille */
  width: 140px;
  height: 90px;
  padding-bottom: 10px;
  margin: 5px;
  overflow: hidden;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
}

/* Arrondi sur l'image de nouveau/pas de nouveaux/verrouillé */
.conteneur_stats .folder_img {
  border-radius: 10px;
}

/* Mise en forme de X messages dans X sujets */
.conteneur_stats .stats {
  text-align: center;
  /* Couleur */
  color: #43586B;
  font-size: 8pt;
  font-family: 'Dancing Script';
}

/* Mise en forme du lien du dernier sujet */
.conteneur_stats .gensmall a {
  color: #3C4A55;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Effet au hover */
.conteneur_stats .gensmall a:hover {
  color: #B2B2B2;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Conteneur des liens déflants du sous-forum */
.conteneur_liens_ss_forums {
  /* Taille */
  width: 610px;
  height: 15px;
  padding-top: 5px;
  margin: auto;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
}

/* Mise en forme des liens vers les sous-forums */
.conteneur_liens_ss_forums a {
  color: #3C4A55;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Effet au Hover */
.conteneur_liens_ss_forums a:hover {
  color: #B2B2B2;
  text-decoration: none !important;
  transition: all ease 1s;
}
/********* FIN CATÉGORIES ***********/

Le forum visé est celui-ci.
J'aurai aimé :
Exclamation - Changer la couleur de la bordure rose en bleu. Bordure qui s'affiche sur chaque côté de la page.
Exclamation - Changer le fond gris en bleu marine. J'ai essayé de passer par les Couleurs mais quand je les change, rien du tout. Une de mes administratrices a elle aussi essayé et a échoué. Je suppose qu'on doit passer par le CSS.

Une capture d'écran pour illustrer :
[PHPBB2] CSS : Bordure rose et fond gris Captur24
En bidouillant le code, j'ai réussi à enlever le cadre vert autour des avatars mais pour le reste, je sèche complètement.

Auriez-vous une solution s'il-vous-plaît ? Smile
Je vous remercie énormément de votre aide éventuelle.

Bonne soirée et bonne année à vous. Very Happy

EDIT : Au cas où vous vous occuperiez de ma demande, pourriez-vous, si possible, m'indiquer les endroits où le CSS a été modifié ? J'aimerais beaucoup apprendre par la même occasion. Merci. Very Happy


Dernière édition par Edena le Lun 12 Jan 2015 - 23:46, édité 1 fois
avatar

Edena
***

Masculin
Messages : 141
Inscrit(e) le : 16/07/2014

Edena a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [PHPBB2] CSS : Bordure rose et fond gris

Message par demeter1 Lun 12 Jan 2015 - 23:04

Vous supprimez
Code:
.bodyline{border:7px solid #f2acac;
}

et

Code:
.bodyline
{
  width: 950px;
  padding: 0;
  background: #c0c0c0;
  box-shadow: 0px 0px 10px #000000;
  -moz-box-shadow: 0px 0px 10px #000000;
  -o-box-shadow: 0px 0px 10px #000000;
  -htm-box-shadow: 0px 0px 10px #000000;
  -webkit-box-shadow: 0px 0px 10px #000000;
}

et
Code:
.bodyline {-moz-border-radius:20px;}

que vous remplacez par
Code:
.bodyline {
width: 950px;
 padding: 0;
background: votre couleur;
border:votre couleur solid 7px ;
box-shadow: 0px 0px 10px #000000;
 -moz-box-shadow: 0px 0px 10px #000000;
 -o-box-shadow: 0px 0px 10px #000000;
 -htm-box-shadow: 0px 0px 10px #000000;
 -webkit-box-shadow: 0px 0px 10px #000000;
-moz-border-radius:20px;
}

background correspond à la couleur de fond du forum et border à la couleur de l'encadrement rose.

Ps : n'oubliez as de modifier "votre couleur" par le code hexadécimal de la couleur que vous voulez.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [PHPBB2] CSS : Bordure rose et fond gris

Message par Edena Lun 12 Jan 2015 - 23:46

Merci énormément Demeter, le problème est résolu. Very Happy
Merci encore et bonne nuit !
avatar

Edena
***

Masculin
Messages : 141
Inscrit(e) le : 16/07/2014

Edena a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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