phpBB-fr.com

[6art]

Salut la communauté, j'aimerai savoir s'il est possible d'intégrer la bannière parfaitement dans le header en gardant les rebords arrondis, de façon à ne plus voir le header, j'ai pensé à le faire passer du vert au blanc (je ne sais pas quel fichier et script retouché pour le faire), mais ça ne résoud pas le format de la bannière trop petite:

http://www.fifaclub.fr/images/headerbanniere.jpg

Comment procéder?? merci

édité par Jester, suppression des balises IMG

[wana4329]

Salut,

La banniere sera une image fixe dont la taille sera en fonction du width de la page header de ton style ( - qq pixels pour les marges)
Pour les bords arrondis fais une transparence sous le format gif ... avec photoshop ou psp

Bien a toi

[6art]

yes, dans quel fichier puis je modifier la taille "width", index.php???

[wana4329]

Re,

En théorie pour un prosilver c'est dans theme/common.css
Il peut y avoir des modifications en fonction des styles prosilver like

documentation-phpbb3/sujet128701.html

[6art]

Re, Je galère sur ce coup, car je ne vois vraiment aucun changement en suivant l'exemple à suivre:

/* Main blocks
---------------------------------------- */
#wrap {
width: 1100px;
margin: 0 auto;
padding: 0 20px;
}

ça ne donne rien en enrigistrant les modif'.

Voici le contenu de common.css:

Code: Tout sélectionner

/* General proSilver Markup Styles
---------------------------------------- */

* {
   /* Reset browsers default margin, padding and font sizes */
   margin: 0;
   padding: 0;
}

html {
   font-size: 100%;
   /* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
   height: 100%;
   margin-bottom: 1px;
}

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   background-image: url("{T_THEME_PATH}/images/fond.jpg");
   background-attachment: fixed;
   background-repeat: repeat;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0;
   padding: 12px 0;
}

h1 {
   /* Forum name */
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   margin-right: 200px;
   color: #FFFFFF;
   margin-top: 15px;
   font-weight: bold;
   font-size: 2em;
}

h2 {
   /* Forum header titles */
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: #3f3f3f;
   font-size: 2em;
   margin: 0.8em 0 0.2em 0;
}

h2.solo {
   margin-bottom: 1em;
}

h3 {
   /* Sub-headers (also used as post headers, but defined later) */
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   border-bottom: 1px solid #CCCCCC;
   margin-bottom: 3px;
   padding-bottom: 2px;
   font-size: 1.05em;
   color: #989898;
   margin-top: 20px;
}

h4 {
   /* Forum and topic list titles */
   font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
   font-size: 1.3em;
}

p {
   line-height: 1.3em;
   font-size: 1.1em;
   margin-bottom: 1.5em;
}

img {
   border-width: 0;
}

hr {
   /* Also see tweaks.css */
   border: 0 none #FFFFFF;
   border-top: 1px solid #CCCCCC;
   height: 1px;
   margin: 5px 0;
   display: block;
   clear: both;
}

hr.dashed {
   border-top: 1px dashed #CCCCCC;
   margin: 10px 0;
}

hr.divider {
   display: none;
}

p.right {
   text-align: right;
}

/* Main blocks
---------------------------------------- */
#wrap {
   width: 800px;
   margin: 0 80px;
   padding: 0 20px;
}

#simple-wrap {
   padding: 6px 10px;
}

#page-body {
   margin: 4px 0;
   clear: both;
}

#page-footer {
   clear: both;
}

#page-footer h3 {
   margin-top: 20px;
}

#logo {
       width: auto;
       padding: 10px 13px 0 10px;
}

a#logo:hover {
   text-decoration: none;
}

/* Search box
--------------------------------------------- */
#search-box {
   color: #FFFFFF;
   position: relative;
   margin-top: 30px;
   margin-right: 5px;
   display: block;
   float: right;
   text-align: right;
   white-space: nowrap; /* For Opera */
}

#search-box #keywords {
   width: 95px;
   background-color: #FFF;
}

#search-box input {
   border: 1px solid #b0b0b0;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
   padding: 1px 5px;
}

#search-box li {
   text-align: right;
   margin-top: 4px;
}

#search-box img {
   vertical-align: middle;
   margin-right: 3px;
}

/* Site description and logo */
#site-description {
       width: 100%;
       text-align: center;
}

#site-description h1 {
   margin-right: 0;
}

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;
}

.navbar {
   background-color: #ebebeb;
   padding: 0 10px;
}

.forabg {
   background: #b1b1b1 none repeat-x 0 0;
   margin-bottom: 4px;
   padding: 0 5px;
   clear: both;
}

.forumbg {
   background: #ebebeb none repeat-x 0 0;
   margin-bottom: 4px;
   padding: 0 5px;
   clear: both;
}

.panel {
   margin-bottom: 4px;
   padding: 0 10px;
   background-color: #f3f3f3;
   color: #3f3f3f;
}

.post {
   padding: 0 10px;
   margin-bottom: 4px;
   background-repeat: no-repeat;
   background-position: 100% 0;
}

.post:target .content {
   color: #000000;
}

.post:target h3 a {
   color: #000000;
}

.bg1   { background-color: #f7f7f7;}
.bg2   { background-color: #f2f2f2; }
.bg3   { background-color: #ebebeb; }

.rowbg {
   margin: 5px 5px 2px 5px;
}

.ucprowbg {
   background-color: #e2e2e2;
}

.fieldsbg {
   /*border: 1px #DCE1E0 solid;*/
   background-color: #eaeaea;
}

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
   font-size: 1px;
   line-height: 1px;
   display: block;
   height: 5px;
   background-repeat: no-repeat;
}

span.corners-top {
   background-image: none;
   background-position: 0 0;
   margin: 0 -5px;
}

span.corners-top span {
   background-image: none;
   background-position: 100% 0;
}

span.corners-bottom {
   background-image: none;
   background-position: 0 100%;
   margin: 0 -5px;
   clear: both;
}

span.corners-bottom span {
   background-image: none;
   background-position: 100% 100%;
}

.headbg span.corners-bottom {
   margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
   margin: 0 -10px;
}

.rules span.corners-top {
   margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
   margin: 5px -10px 0 -10px;
}

/* Horizontal lists
----------------------------------------*/
ul.linklist {
   display: block;
   margin: 0;
}

ul.linklist li {
   display: block;
   list-style-type: none;
   float: left;
   width: auto;
   margin-right: 5px;
   font-size: 1.1em;
   line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
   float: right;
   margin-right: 0;
   margin-left: 5px;
   text-align: right;
}

ul.navlinks {
   padding-bottom: 1px;
   margin-bottom: 1px;
   border-bottom: 1px solid #FFFFFF;
   font-weight: bold;
}

ul.leftside {
   float: left;
   margin-left: 0;
   margin-right: 5px;
   text-align: left;
}

ul.rightside {
   float: right;
   margin-left: 5px;
   margin-right: -5px;
   text-align: right;
}

/* Table styles
----------------------------------------*/
table.table1 {
   /* See tweaks.css */
}

#ucp-main table.table1 {
   padding: 2px;
}

table.table1 thead th {
   font-weight: normal;
   text-transform: uppercase;
   color: #FFFFFF;
   line-height: 1.3em;
   font-size: 1em;
   padding: 0 0 4px 3px;
}

table.table1 thead th span {
   padding-left: 7px;
}

table.table1 tbody tr {
   border: 1px solid #cfcfcf;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
   background-color: #f6f6f6;
   color: #000;
}

table.table1 td {
   color: #6a6a6a;
   font-size: 1.1em;
}

table.table1 tbody td {
   padding: 5px;
   border-top: 1px solid #FAFAFA;
}

table.table1 tbody th {
   padding: 5px;
   border-bottom: 1px solid #000000;
   text-align: left;
   color: #333333;
   background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name      { text-align: left; }
table.table1 .posts      { text-align: center !important; width: 7%; }
table.table1 .joined   { text-align: left; width: 15%; }
table.table1 .active   { text-align: left; width: 15%; }
table.table1 .mark      { text-align: center; width: 7%; }
table.table1 .info      { text-align: left; width: 30%; }
table.table1 .info div   { width: 100%; white-space: nowrap; overflow: hidden; }
table.table1 .autocol   { line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
   float: right;
   width: auto;
}

table.info td {
   padding: 3px;
}

table.info tbody th {
   padding: 3px;
   text-align: right;
   vertical-align: top;
   color: #000000;
   font-weight: normal;
}

.forumbg table.table1 {
   margin: 0 -2px -1px -1px;
}

/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts
   Also see tweaks.css */
.column1 {
   float: left;
   clear: left;
   width: 49%;
}

.column2 {
   float: right;
   clear: right;
   width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
   float: left;
   width: auto;
   text-align: left;
}

.right-box {
   float: right;
   width: auto;
   text-align: right;
}

dl.details {
   /*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
   font-size: 1.1em;
}

dl.details dt {
   float: left;
   clear: left;
   width: 30%;
   text-align: right;
   color: #000000;
   display: block;
}

dl.details dd {
   margin-left: 0;
   padding-left: 5px;
   margin-bottom: 5px;
   color: #828282;
   float: left;
   width: 65%;
}

/* Pagination
---------------------------------------- */
.pagination {
   height: 1%; /* IE tweak (holly hack) */
   width: auto;
   text-align: right;
   margin-top: 5px;
   float: right;
}

.pagination span.page-sep {
   display: none;
}

li.pagination {
   margin-top: 0;
}

.pagination strong, .pagination b {
   font-weight: normal;
}

.pagination span strong {
   padding: 0 2px;
   margin: 0 2px;
   font-weight: normal;
   color: #FFFFFF;
   background-color: #bfbfbf;
   border: 1px solid #bfbfbf;
   font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
   font-weight: normal;
   text-decoration: none;
   color: #747474;
   margin: 0 2px;
   padding: 0 2px;
   background-color: #eeeeee;
   border: 1px solid #bababa;
   font-size: 0.9em;
   line-height: 1.5em;
}

.pagination span a:hover {
   border-color: #d2d2d2;
   background-color: #d2d2d2;
   color: #FFF;
   text-decoration: none;
}

.pagination img {
   vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
   display: block;
   float: right;
   width: auto;
   margin-top: 0;
   padding: 1px 0 1px 15px;
   font-size: 0.9em;
   background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
   background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
   background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
   float: right;
   width: auto;
   padding-left: 5px;
   margin-left: 5px;
   margin-top: 10px;
   text-align: right;
}

.copyright {
   padding: 5px;
   text-align: center;
   color: #555555;
}

.small {
   font-size: 0.9em !important;
}

.titlespace {
   margin-bottom: 15px;
}

.headerspace {
   margin-top: 20px;
}

.error {
   color: #bcbcbc;
   font-weight: bold;
   font-size: 1em;
}

.reported {
   background-color: #f7f7f7;
}

li.reported:hover {
   background-color: #ececec;
}

div.rules {
   background-color: #ececec;
   color: #bcbcbc;
   padding: 0 10px;
   margin: 10px 0;
   font-size: 1.1em;
}

div.rules ul {
   margin-left: 20px;
}

p.rules {
   background-color: #ececec;
   background-image: none;
   padding: 5px;
}

p.rules img {
   vertical-align: middle;
}

p.rules a {
   vertical-align: middle;
   clear: both;
}

#top {
   position: absolute;
   top: -20px;
}

.clear {
   display: block;
   clear: both;
   font-size: 1px;
   line-height: 1px;
   background: transparent;
}

Merci pour le coup de main
lien: http://www.fifaclub.fr/

[Jester]

Bonjour, si tu as suivi le tuto ça devrait fonctionner. Est ce que tu rafraichis via le panneau d'admin le theme du style quand tu touches aux CSS ?

Déjà rien que le logo est pas à la bonne taille... là il fait 650px de large sur 150 alors que l'image fait 1100px à l'origine. Est ce que tu as changé la valeur et l'extension de ton image site_logo dans le fichier imageset.cfg du dossier imageset ? (là aussi faut rafraichir le imageset du style via le panneau d'admin).

[6art]

oki merci je vais tester tout ça

[6art]

Voila le contenu d'imageset.cfg

Code: Tout sélectionner

#
# phpBB Imageset Configuration File
#
# @package phpBB3
# @copyright (c) 2006 phpBB Group
# @license http://opensource.org/licenses/gpl-license.php GNU Public License
#
#
# At the left is the name, please do not change this
# At the right the value is entered
# For on/off options the valid values are on, off, 1, 0, true and false
#
# Values get trimmed, if you want to add a space in front or at the end of
# the value, then enclose the value with single or double quotes.
# Single and double quotes do not need to be escaped.
#
#

# Images
img_icon_contact_pm = icon_contact_pm.gif*20*28

img_icon_post_edit = icon_post_edit.gif*20*58
img_icon_post_quote = icon_post_quote.gif*20*54

img_icon_user_online = icon_user_online.gif*58*58
img_icon_user_offline = icon_user_offline.gif
img_icon_user_search = icon_user_search.gif

img_button_pm_forward = button_pm_forward.gif*25*110
img_button_pm_new = button_pm_new.gif*25*96
img_button_pm_reply = button_pm_reply.gif*25*96

img_button_topic_locked = button_topic_locked.gif*25*96
img_button_topic_new = button_topic_new.gif*25*96
img_button_topic_reply = button_topic_reply.gif*25*96


image site_logo ??? j'ai beau cherché, quelqu'un peut m'aider??

La taille de mon image, même à 2000px elle ne dépassera pas les 650px car certainement le script précise 650px mais où le trouver car je ne sais pas encore dans quel fichier modifier le width. merki!

PS: après avoir suivi le tuto et après avoir rafraichit, le header vert reste présent sauf la partie arrondie du bas :s

[Jester]

A mon avis tu t'es trompé de fichier imageset.cfg, il ne s'agit pas de celui dans le répertoire Fr mais celui qui se trouve dans le répertoire imageset tout simplement.

Avec prosilver on trouve ce code :

Code: Tout sélectionner

# Images
img_site_logo = site_logo.gif*52*139

C'est donc un gif de 139 par 52 (attention les valeurs sont inversées dans le cfg). Tu dois donc y mettre png et la taille de ton image.

Pour les modifs de couleurs, header etc. c'est dans colours.css qu'il faut les faire.

[6art]

ça en devient génant,

Code: Tout sélectionner

# Images
img_site_logo = site_logo.png*204*800
img_poll_left =
img_poll_center =
img_poll_right =
img_icon_friend =
img_icon_foe =

Je suis désolé d'insisté, mais ça ne donne aucun changement au niveau du format de la bannière. Elle était bien à 650 en largeur j'ai testé en mettant 800 et en rafraichissant un coup le thème via le paneau d'administration, ça donne rien

c'est le thème qui doit être ardus surement, si quelqu'un à la réponse à mon problème, en attendant je vais continuer à chercher dans les pages de script. merci

le site en question: http://fifaclub.fr

[Dakin Quelia]

Bonsoir,

Tu es sûr que tu fais bien le rafraîchissement du pack d'images (onglet Styles) et le vidage du cache (onglet Général)?

A bientôt,

[6art]

rolala je suis un ane, avec un rafraichissement du pack d'images ça le fait, merci maintenant il faut que j'efface le header moche de dérrière en vert

[Dakin Quelia]

Ce que je te conseille plutôt, c'est justement de modifier la classe headerbar plutôt que de changer le logo.

Ouvre le fichier styles/{TONTHEME}/theme/common.css.

Cherche:

Code: Tout sélectionner

.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;
}

Remplace par:

Code: Tout sélectionner

.headerbar {
   background-image: url('tonimage.png');
   background-repeat: no-repeat;
        color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;
}

Ainsi, tu conserves cette classe.

N'oublie pas de rafraîchir le thème (onglet Styles) et de vider le cache (onglet Général).

[6art]

j'ai testé avec ça:

Code: Tout sélectionner

.headerbar {
   background-image: url('http://www.fifaclub.fr/styles/fifaclub/imageset/site_logo.png');
   background-repeat: no-repeat;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;
}

mais apparement j'ai encore du oublier un truc

[Dakin Quelia]

Normal car la classe existe en deux exemplaires: une dans common.css et une dans colours.css.

Donc, pour remédier à ça, ouvre le fichier colours.css.

Cherche:

Code: Tout sélectionner

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}


Remplace par:

Code: Tout sélectionner

.headerbar {
   color: #FFFFFF;
}


N'oublie pas de rafraîchir le thème (onglet Styles) et de vider le cache (onglet Général).