Bienvenue sur le forum de la communauté EzCom !

Ce forum vous propose des traductions pour
les extensions et les styles dédiés à phpBB 3.1.x.

Une fois inscrit, nous vous invitons à consulter le sujet
EDITO : Bienvenue sur EzCom.

Bonne visite.

PERSONNALISATION : Arrondir headerbar, navbar et panel sans images sur phpBB 3.0.x & 3.1.x  Question traitée

Echanges autour de phpBB.

Modérateur : Âmes d'EzCom

Avatar de l’utilisateur

Auteur du sujet
Raphaël
Chef de projets
Chef de projets
Messages : 1787
Enregistré le : 24 octobre 2014
Réputation : 20
Localisation : Marseille
Race WoW : Humain
Classe Wow : Guerrier
Genre WoW : Masculin
Niveau WoW : 1
Guilde WoW : Guilde des rataouilles
Âge : 35
Sexe : Homme
Drapeau : France
Zodiaque : Scorpion
Contact :
Statut : En ligne

PERSONNALISATION : Arrondir headerbar, navbar et panel sans images sur phpBB 3.0.x & 3.1.x  Question traitée

Messagepar Raphaël » lun. 7 sept. 2015 19:10

Salut,

suite à une demande sur phpBB-fr.com. Voici comment arrondir les zones headerbar, navbar et panel sans utiliser les images corners*.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;
}

Traduire en



Contenu publicitaire :

Avatar de l’utilisateur
tomberaid
Graphiste
Graphiste
Messages : 28
Enregistré le : 18 mars 2015
Réputation : 20
Sexe : Non spécifié
Statut : Hors ligne

PERSONNALISATION : Arrondir headerbar, navbar et panel sans images sur phpBB 3.0.x & 3.1.x

Messagepar tomberaid » lun. 7 sept. 2015 21:51

Hello
Si tu veux être au plus près des arrondis des images corners, il faut appliquer un border-radius de 7px (comme dans prosilver 3.1.x) et non de 5px.
Attention la propriété border-radius n'est pas reconnu dans les vieux navigateurs (IE8 et inférieurs).

Cordialement

Traduire en



Avatar de l’utilisateur

Auteur du sujet
Raphaël
Chef de projets
Chef de projets
Messages : 1787
Enregistré le : 24 octobre 2014
Réputation : 20
Localisation : Marseille
Race WoW : Humain
Classe Wow : Guerrier
Genre WoW : Masculin
Niveau WoW : 1
Guilde WoW : Guilde des rataouilles
Âge : 35
Sexe : Homme
Drapeau : France
Zodiaque : Scorpion
Contact :
Statut : En ligne

PERSONNALISATION : Arrondir headerbar, navbar et panel sans images sur phpBB 3.0.x & 3.1.x

Messagepar Raphaël » lun. 7 sept. 2015 22:59

Super merci !

je corrige le premier message. ;)

Traduire en



Contenu publicitaire :


  • Sujets similaires
    Réponses
    Vues
    Dernier message
  • EXTENSION : Theme Control Panel for Mobbern - Panneau de contrôle du style Mobbern Fichier(s) joint(s)
    par Raphaël » jeu. 13 août 2015 05:43 » dans Présentations des extensions
    4
    5049
    par Raphaël Voir le dernier message
    ven. 13 mai 2016 23:15
  • PERSONNALISATION : Style - PBTech - Ajouter une légende Fichier(s) joint(s)
    par Nosfe » mer. 16 sept. 2015 15:20 » dans phpBB & Co
    5
    2450
    par Nosfe Voir le dernier message
    ven. 18 sept. 2015 20:47
  • PERSONNALISATION : Ajouter un menu dans le header avec le style prosilver SE (Spsecial Edition) Fichier(s) joint(s)
    par hamidouki-dz » jeu. 1 oct. 2015 14:51 » dans phpBB & Co
    3
    2580
    par Raphaël Voir le dernier message
    sam. 3 oct. 2015 01:39
  • PERSONNALISATION : Page de redirection personnalisée Fichier(s) joint(s)
    par hamidouki-dz » sam. 3 oct. 2015 02:50 » dans phpBB & Co
    13
    3446
    par Raphaël Voir le dernier message
    sam. 10 oct. 2015 22:54
  • PERSONNALISATION : Extension - Topic Descriptions
    par dje8269 » lun. 12 oct. 2015 23:30 » dans phpBB & Co
    7
    3675
    par Raphaël Voir le dernier message
    mer. 14 oct. 2015 02:47

Retourner vers « phpBB & Co »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité