PERSONNALISATION : Arrondir headerbar, navbar et panel sans images sur phpBB 3.0.x & 3.1.x Question traitée
Posté : lun. 7 sept. 2015 19:10
Salut,
suite à une demande sur phpBB-fr.com. Voici comment arrondir les zonesheaderbar
,navbar
et panel sans utiliser les imagescorners*.png
, ainsi que les onglets dans la page de rédaction d’un nouveau message. Le même modèle peut être appliqué aux onglets du panneau d’utilisateur et de modération.
Ouvrir :./styles/ton_style/theme/common.css
.Trouver : peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.Code : Tout sélectionner
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
}Remplacer par : remplacer les lignes de code précédemment trouvées par celles ci-dessous.Code : Tout sélectionner
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
border-radius: 7px;
}
Ouvrir :./styles/prosilver/theme/colours.css
.Trouver : peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.Code : Tout sélectionner
/* CP tabbed menu
----------------------------------------*/
#tabs a {
background-image: url("{T_THEME_PATH}/images/bg_tabs1.gif");
}
#tabs a span {
background-image: url("{T_THEME_PATH}/images/bg_tabs2.gif");
color: #536482;
}
#tabs a:hover span {
color: #BC2A4D;
}
#tabs .activetab a {
border-bottom-color: #CADCEB;
}
#tabs .activetab a span {
color: #333333;
}
#tabs .activetab a:hover span {
color: #000000;
}Remplacer par : remplacer les lignes de code précédemment trouvées par celles ci-dessous.Code : Tout sélectionner
/* CP tabbed menu
----------------------------------------*/
#tabs a {
/* background-image: url("./styles/prosilver/theme/images/bg_tabs1.gif"); */
background-color: #cadceb;
border-radius: 7px 7px 0px 0px;
}
#tabs a span {
/* background-image: url("./styles/prosilver/theme/images/bg_tabs2.gif"); */
color: #536482;
}
#tabs a:hover span {
background-color: #BACCD9;
color: #BC2A4D;
border-radius: 7px 7px 0px 0px;
}
#tabs .activetab a {
border-bottom-color: #CADCEB;
}
#tabs .activetab a span {
color: #333333;
}
#tabs .activetab a:hover span {
color: #000000;
}Trouver : peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.Code : Tout sélectionner
span.corners-top {
background-image: url("{T_THEME_PATH}/images/corners_left.png");
}
span.corners-top span {
background-image: url("{T_THEME_PATH}/images/corners_right.png");
}
span.corners-bottom {
background-image: url("{T_THEME_PATH}/images/corners_left.png");
}
span.corners-bottom span {
background-image: url("{T_THEME_PATH}/images/corners_right.png");
}Remplacer par : remplacer les lignes de code précédemment trouvées par celles ci-dessous.Code : Tout sélectionner
span.corners-top {
/* background-image: url("./styles/prosilver/theme/images/corners_left.png"); */
}
span.corners-top span {
/* background-image: url("./styles/prosilver/theme/images/corners_right.png"); */
}
span.corners-bottom {
/* background-image: url("./styles/prosilver/theme/images/corners_left.png"); */
}
span.corners-bottom span {
/* background-image: url("./styles/prosilver/theme/images/corners_right.png"); */
}Trouver : peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.Code : Tout sélectionner
.navbar {
background-color: #cadceb;
}Remplacer par : remplacer les lignes de code précédemment trouvées par celles ci-dessous.Code : Tout sélectionner
.navbar {
background-color: #cadceb;
border-radius: 7px;
}Trouver : peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.Code : Tout sélectionner
.panel {
background-color: #ECF1F3;
color: #28313F;
}Remplacer par : remplacer les lignes de code précédemment trouvées par celles ci-dessous.Code : Tout sélectionner
.panel {
background-color: #ECF1F3;
color: #28313F;
border-radius: 7px;
}