Widget du portail: image en fond de barre

[maximumuse]

Bien le bonjour, j'aimerais personnaliser le portail et pour cela modifier ses widgets, j'ai rien trouvé dans le PA qui ne propose que des changements de couleur pour le forum.

voila un widget standard et ce que je souhaite  changer: le fond du titre



j'aimerai changer la couleur pour une image (ou un dégradé de couleurs)

voilà est ce possible  ?  merci d'avance

[FANCH 56]

Bonjour

Voici quelques codes CSS pour les widgets

Tu pourras changer le background -image

Code:


/* ************ CENTRER TOUS LES TITRES DES WIDGETS ****************** */

div.module h3 {

text-align: center;
}


/* ************ HAUTEUR DES CASES DE TITRES DES WIDGETS *************** */

.module .maintitle h3 {

 line-height: 20px;
}

/* ************* MARGE DES CASES DES TITRES DES WIDGETS ***************** */

.module h3 {

 margin-top:5px;
}

/* ************* CHANGER L'ENCART CONTENANT LE TITRE D'UN WIDGET ************** */

.module .maintitle {

  padding:1px;

  background-image: url('http://acbpr.fr/cb/techno/rubanor3deux.jpg');
}

/* ************ COULEUR DE FOND DES WIDGETS ********************************* */

.module .box-content {

 background-color: #F0F0F0;
}

/* ************* COULEUR DES TITRES DES WIDGETS ******************************* */

.module .maintitle h3 {

 float: none;

 font-size: 1em;

 color: #19233C;
}

[maximumuse]

Merci beaucoup je vais essayer tout ça  

il me faut modifier le CSS existant ou rajouter du code à la suite ?

[FANCH 56]

Mettre les codes dans le CSS

[maximumuse]

J'ai rajouté ce code en bas du CSS

Code:

/* ************* CHANGER L'ENCART CONTENANT LE TITRE D'UN WIDGET ************** */
 
.module .maintitle {
 
  padding:1px;
 
  background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/bg_pag10.jpg');
}

les widgets n'ont pas changé, malgré une vidange de cache et actualisation du navigateur (FF)

c'est ici http://cinema.forums-actifs.com

[FANCH 56]

Là tu as mi une image dans la barre de titre, il faut mettre cette image plutôt ici. En changeant background-color par backgroun-image.

Dans la barre de titre, c'est une couleur

Code:


/* ************ COULEUR DE FOND DES WIDGETS ********************************* */
 
.module .box-content {
 
 background-color: #F0F0F0;
}

[maximumuse]

bah non rends toi compte par toi même, rien ne change ni avec le premier code, ni le dernier:   ya un truc qui foire, j'ai corrigé mon profil, ce forum est en phpBB2 et non pas phpBB3, j'ignore si ça aide.

Code:


/* ************ image DE FOND DES WIDGETS ********************************* */
 
.module .box-content {
 
background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/bg_pag10.jpg');
}

Je précise que j'ai bien le message de confirmation:

[FANCH 56]

Ok alors c'est pas pour pb2

[Self]

Bonjour.

Il s'agit en fait de la répétiton de l'image de fond qui fait 25 pixel de hauteur alors que la cellule fait 28 pixel.
Il faut donc réduire la cellule à 25 pixel avec :

Code:

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
    height: 25px;
}

à placé dans la feuille de style CSS.

Bonne soirée .

[maximumuse]

Merci de transpirer sur mon problème, mais rien ne bouge  

voilà le code rajouté en fin de feuille CSS:

Code:


td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
            height: 25px;
        }

/* ************ image DE FOND DES WIDGETS ********************************* */
 
.module .box-content {
 
background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/bg_pag10.jpg');
}

[Self]

Bonjour.

Je ne vois plus ou est le problème sur votre forum, les cellules et l'image de fond s'aligne, je ne vois plus la répitition.
Essayez de vider le cache de votre navigateur.

Cordialement .

EDIT: oups, je viens de m'apercevoir que je n'avais pas bien compris votre problème :/ .

essayez donc de supprimé les deux ancien code et de mettre celui-ci:

       

Code:

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
            height: 25px;
            background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/bg_pag10.jpg');
        }

[maximumuse]

vous voyez cette image de fond dans les titres des widgets ?

chez moi le titre est inchangé, un dégradé de gris bleu  

[Self]

vous voyez cette image de fond dans les titres des widgets ?

chez moi le titre est inchangé, un dégradé de gris bleu   

J'ai édité mon message au dessus de votre dernier.

[maximumuse]

ha oui OK cette fois c'est bon mais évidemment cette image est trop grande pour cette barre, merci les gars, je vais peaufiner ça, je viendrai mettre dans résolu quand ça sera le cas

[maximumuse]

bah regardez donc, mais comment je mets le titre en blanc ?

Code:

text_color: white;

[Self]

bah regardez donc, mais comment je mets le titre en blanc ?

Code:

text_color: white;

Non, on à pas besoin du text il faut simplement mettre:

Code:

color: white;

Cordialement .

[maximumuse]

arf même avec color, le texte reste noir

[Self]

Vous l'avez bien mis dans ce code?

Code:

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
            height: 25px;
            background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/bg_pag10.jpg');
        }

Comme cela:

Code:

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
            height: 25px;
            background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/bg_pag10.jpg');
            color:white;
        }

Si c'est le cas, essayez avec un:

Code:

!important

Comme cela:

Code:

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
            height: 25px;
            background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/bg_pag10.jpg');
            color: white !important;
        }

Cordialement .

[maximumuse]

oui j'avais tout bon, et même avec ! important, le texte reste noir . Le code semble priorisé qq part, car avant de voir apparaitre mon image de fond je vois bien qu'il y a tj la couleur précédente qui s'affiche pdt 1 seconde.

Code:

/* Widget du portail: image en fond de titre */
td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
          height: 25px;
          background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/fond10.png');
          color: white !important;
        }

[Self]

Dans ce cas essayez plustôt d'ajouté ce code:

Code:

.module-title {
    color:white;
}

Bien sur supprimé la ligne "color: white !important;" dans le code précdement donné .

Cordialement .

[maximumuse]

ha ben voila, bravo, je poste le code final
je suppose que pour la taille du titre il faut rajouter font-size:

Code:

/* Widget du portail: image en fond de titre */
td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
          height: 25px;
          background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/fond10.png');
          }
.module-title {
          color:white;
        }


[Self]

ha ben voila, bravo, je poste le code final
je suppose que pour la taille du titre il faut rajouter font-size:

Code:

/* Widget du portail: image en fond de titre */
td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
          height: 25px;
          background-image: url('http://i33.servimg.com/u/f33/11/06/67/90/fond10.png');
           }
.module-title {
          color:white;
        }


Font-size devrais fonctionner dans .module-title .

Bonne soirée =) .

[maximumuse]

Oui oui, c'est parfait, on peut enfin bidouiller ces widgets du portail !  

merci à tous les 2 et bonnes vacances !