Bienvenue sur le forum de la Communauté EzCom !

En ces lieux, nous vous aidons à mettre en place et à personnaliser votre forum phpBB 3.1.x, 3.2.x, 3.3.x & 4.0.x grâce à :

Une fois inscrit.e, vous pouvez :

Dernières nouvelles :

Coup d’œil : « EzCom Blog » idéal pour trouver des conseils et des services pour son forum phpBB !

Soutenir le projet de la Communauté EzCom.

Image Tu as un forum et tu veux aussi un site web ? Regarde par ici.

Welcome on the Ezcom Community board! | English visitors, may I help you? Image | Make a donation to EzCom.

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

Assistance & documentations pour phpBB et son environnement.

Modérateurs : Graphistes, Traducteurs

Avatar de l’utilisateur
Raphaël
Chef de projets
Chef de projets
Messages : 2996
Enregistré le : ven. 24 oct. 2014 18:02
Localisation : Marseille

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

Image Tu as un forum et tu veux aussi un site web ? Regarde par ici.

🔍 Recherches :
Questions : ✚ Extensions présentées 🎨 Styles présentés ★ Toutes autres questions

📖 Documentations :
✍ Traductions : Demander Proposer

Contenu publicitaire :

Avatar de l’utilisateur
tomberaid
Graphiste
Graphiste
Messages : 108
Enregistré le : mer. 18 mars 2015 14:49

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


Avatar de l’utilisateur
Raphaël
Chef de projets
Chef de projets
Messages : 2996
Enregistré le : ven. 24 oct. 2014 18:02
Localisation : Marseille

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

Image Tu as un forum et tu veux aussi un site web ? Regarde par ici.

🔍 Recherches :
Questions : ✚ Extensions présentées 🎨 Styles présentés ★ Toutes autres questions

📖 Documentations :
✍ Traductions : Demander Proposer

Contenu publicitaire :


  • Sujets similaires
    Réponses
    Vues
    Dernier message
  • PERSONNALISATION : Captcha pour le formulaire de contact Fichier(s) joint(s)
    par ym_trainz » sam. 28 mai 2016 00:48 » dans Support pour phpBB
    7
    34788
    par ym_trainz
    ven. 2 nov. 2018 14:22
  • PERSONNALISATION : Notification - Modifier le contenu des e-mails
    par Bernard 77 » lun. 6 mars 2017 19:28 » dans Support pour phpBB
    6
    19805
    par Bernard 77
    jeu. 9 mars 2017 10:13
  • PERSONNALISATION : Message de modération du contenu & du titre des messages
    par pboulanger » mer. 17 mai 2017 23:01 » dans Support pour phpBB
    13
    20559
    par Raphaël
    jeu. 28 sept. 2017 13:45
  • PERSONNALISATION : Mettre en valeur les statistiques du nombre de messages, sujets et vues Fichier(s) joint(s)
    par Raphaël » mar. 22 août 2017 20:43 » dans Support pour phpBB
    0
    27068
    par Raphaël
    mar. 22 août 2017 20:43
  • PERSONNALISATION : BBCODE - Message important | Important message Fichier(s) joint(s)
    par pboulanger » mar. 23 janv. 2018 11:44 » dans Support pour phpBB
    1
    18842
    par Raphaël
    sam. 17 févr. 2018 03:19
  • PERSONNALISATION : Afficher l’image du forum à coté de son titre lors de leur consultation Fichier(s) joint(s)
    par rammstein » ven. 4 mai 2018 11:46 » dans Support pour phpBB
    5
    19829
    par rammstein
    ven. 4 mai 2018 22:16

Retourner vers « Support pour phpBB »

Qui est en ligne

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