Widget du portail: image en fond de barre

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 le 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



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
****

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

http://oric-concours.forumactif.org/
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 le 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
+ Hyperactif +

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

http://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 le 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
****

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

http://oric-concours.forumactif.org/
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 le Dim 28 Juil 2013 - 11:39

Mettre les codes dans le CSS


FANCH 56
+ Hyperactif +

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

http://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 le 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
****

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

http://oric-concours.forumactif.org/
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 le 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
+ Hyperactif +

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

http://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 le 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:


maximumuse
****

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

http://oric-concours.forumactif.org/
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 le Dim 28 Juil 2013 - 16:59

Ok alors c'est pas pour pb2


FANCH 56
+ Hyperactif +

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

http://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 le 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
+ Hyperactif +

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

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 le 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
****

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

http://oric-concours.forumactif.org/
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 le 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
+ Hyperactif +

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

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 le Dim 28 Juil 2013 - 17:29



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
****

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

http://oric-concours.forumactif.org/
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 le Dim 28 Juil 2013 - 17:31

@maximumuse a écrit:

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
+ Hyperactif +

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

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 le 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
****

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

http://oric-concours.forumactif.org/
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 le Dim 28 Juil 2013 - 17:39

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

Code:
text_color: white;

maximumuse
****

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

http://oric-concours.forumactif.org/
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 le 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
+ Hyperactif +

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

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 le Dim 28 Juil 2013 - 17:44

arf même avec color, le texte reste noir

maximumuse
****

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

http://oric-concours.forumactif.org/
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 le 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
+ Hyperactif +

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

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 le 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
****

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

http://oric-concours.forumactif.org/
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 le 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
+ Hyperactif +

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

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 le 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
****

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

http://oric-concours.forumactif.org/
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 le 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
+ Hyperactif +

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

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 le 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
****

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

http://oric-concours.forumactif.org/
maximumuse a été remercié(e) par l'auteur de ce sujet.

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


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