Widget du portail: image en fond de barre

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 8:28

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

Widget du portail: image en fond de barre Widget11

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

voilà est ce possible  ?  merci d'avance Wink


Dernière édition par maximumuse le Dim 28 Juil 2013 - 18:14, édité 2 fois
maximumuse

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par FANCH 56 Dim 28 Juil 2013 - 10:29

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

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 11:25

Merci beaucoup je vais essayer tout ça Very Happy 

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

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par FANCH 56 Dim 28 Juil 2013 - 11:39

Mettre les codes dans le CSS

Widget du portail: image en fond de barre Captu126
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 16:12

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)

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

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par FANCH 56 Dim 28 Juil 2013 - 16:34

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

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 16:43

bah non rends toi compte par toi même, rien ne change ni avec le premier code, ni le dernier: Confused  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:

Widget du portail: image en fond de barre Ccs_mi10
maximumuse

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par FANCH 56 Dim 28 Juil 2013 - 16:59

Ok alors c'est pas pour pb2

FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par Self Dim 28 Juil 2013 - 17:02

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 Smile.
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 17:13

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

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');
}
maximumuse

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par Self Dim 28 Juil 2013 - 17:21

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 Smile.

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');
        }
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 17:29

Widget du portail: image en fond de barre Bg_pag10

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

chez moi le titre est inchangé, un dégradé de gris bleu What a Face 
maximumuse

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par Self Dim 28 Juil 2013 - 17:31

maximumuse a écrit:Widget du portail: image en fond de barre Bg_pag10

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

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

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

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 17:36

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

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 17:39

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

Code:
text_color: white;
maximumuse

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par Self Dim 28 Juil 2013 - 17:41

maximumuse a écrit: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 Smile .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 17:44

arf même avec color, le texte reste noir
maximumuse

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par Self Dim 28 Juil 2013 - 17:48

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 Smile .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 17:58

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

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par Self Dim 28 Juil 2013 - 18:04

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é Wink .

Cordialement Smile .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 18:07

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

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par Self Dim 28 Juil 2013 - 18:09

maximumuse a écrit: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 Wink .

Bonne soirée =) .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget du portail: image en fond de barre

Message par maximumuse Dim 28 Juil 2013 - 18:13

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

merci à tous les 2 et bonnes vacances !
maximumuse

maximumuse
****

Masculin
Messages : 296
Inscrit(e) le : 25/09/2005

https://www.forum-discussion.net
maximumuse a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum