[ Resolu ]Changer le fond et image du module Homecategories

[nathoudu34]

Bonjour à tous !

J'ai téléchargé il y a peu un module nommé "Homecategories" qui consiste a mettre des objets d'une catégorie en page d'accueil avec exactement la mêmes présentation que les produits phares.

( Je remercie en passant la conceptrice de ce module qui a fait du très bon boulot ! )

Comme dit plus haut, ce module reprends le graphisme du bloc produit phare, donc quand on change la couleur du fond produit phare, et bah ca change aussi celui du module categories (et vis versa) !

J'aimerais si possible que ces deux modules aient une image d'en-tête et une couleur de fond différentes l'un de l'autre.
J'ai déjà changer la présentation des produits phares donc pour ce qui est de comment changer la couleur je n'ai pas de soucis, ce qu'il faudrait m'expliquer ici c'est comment séparer les deux modules ?

PS : Petite pub pour la miss : Pour les intéressés vous pouvez télécharger le module Homecategories sur le site de la conceptrice Divine ici :
http://www.prestacrea.com/3-modules

Merci d'avance à ceux qui pourront m'aider =)
Que la force soient avec vous !

[Divine]

Bonjour et merci à toi nathou

Tu peux tout à fait changer l'aspect de ce module de façon à ce qu'il ait son propre graphisme.

Pour cela tu dois aller dans le fichier homecategories.tpl et attribuer une classe différente au module.
Ensuite dans ton fichier global.css tu indiques le style que tu veux appliquer à cette nouvelle classe.

Je sais pas si je suis très claire mais je peux te filer un coup de main si tu n'y arrives pas.

[nathoudu34]

Merci pour ton aide Divine ! Je vais essayer ce que tu me dis et je te tiens au courant !

[nathoudu34]

Alors j'ai essayé et ca marche pour une bonne partie !
Tout ce qui est fond de couleur etc ya pas de soucis !

Par contre pour l'image d'en tête du haut ( sur le thème par défaut elle est appelé block_header_large.gif ) il y a un problème.
L'image reste en background du texte, en faite elle ne dépasse pas de la zone du texte, alors qu'elle devrait faire la largeur du bloc.

Dans homecategories.tpl cette zone est appelé par :

{l s='featured products' mod='homecategories'}

Pour pouvoir changer le fond du background j'ai changé le nombre h4 par h38 (nombre choisi au hasard)
Ce qui donne :

{l s='featured products' mod='homecategories'}

Après dans le global.css j'ai dupliqué tout les codes qui avaient avec h4 et je les ai coller à la suite avec h38...

Ce qui donne a la fin dans le global.css ( je copie le code que me donne Firebug ) :

global.css (ligne 1043) :

#center_column div.block h38 {
background:url("../img/block_header_large.gif") no-repeat scroll left top transparent;
color:#004F61;
height:34px;
width:670px;
}

global.css (ligne 952) :

div.block h38 {
background:url("../img/block_header.gif") no-repeat scroll left top transparent;
color:#374853;
font-family:Helvetica,Sans-Serif;
font-size:1.1em;
font-weight:bold;
height:19px;
line-height:2.8em;
padding-left:0.5em;
padding-top:2px;
text-transform:uppercase;
}

Je sais pas si c'était la bonne méthode mais jai essayé, et ca marche pas, ou peut être que j'ai oublié quelques choses =x A mon avis le soucis vient d'un autre fichier que le global.css ?

Edit : Après visualisation dans Internet Explorer, je vois que l'image "block_header_large.gif" n'apparait mêmes pas ! Donc ca vient bien d'un problème du Background !

Quelqu'un a une idée ?

Merci d'avance !

[nathoudu34]

up up up up up !

[Divine]

Salut,

en fait comme je te l'avais expliqué tu as du attribuer à ton bloc une classe différente.
Donc pour le header, tu gardes h4 mais tu lui attribues cette classe.

[nathoudu34]

Salut !
Merci pour ton aide!
Malheureusement j'ai tout essayé mais rien ne marche =/ J'ai du me planter quelques parts!

Donc comme tu m'as dit j'ai enlever les "h38" donc il reste que les h4.

Dans homecategories.tpl la class que j'ai nommé est :

Donc "products_block2"

Voici le code que je dois changer dans Global.css :

global.css (ligne 1015)
#center_column div.block h4 {
background:url("../img/block_header_large2.gif") no-repeat scroll left top transparent;
color:#4C6200;
height:34px;
width:670px;
}

global.css (ligne 937)
div.block h4 {
font-family:Helvetica,Sans-Serif;
font-size:1.1em;
font-weight:bold;
line-height:2.8em;
padding-left:0.5em;
padding-top:2px;
text-transform:uppercase;
}

J'ai essayé de mettre "#center_column .products_block2 div.block h4 {"
Mais ca ne marche pas =(

Vous pouvez m'éclairer ?
Merci beaucoup =)

[jeckyl]

Salut,

juste pour rappeler un élément.

Les balise H1, h2, ...,h6 servent à définir des titre et à créer une hiérarchie de l'information.

ainsi la structure parfaite d'un document web devrait être :

h1
h2
h3
h4
h5
h6

Mais on peut aussi utilsier les balise pour une hioérarchie plus scolaire :

h1
h2
h2
h2
h3
h1
h2
h3
h3
h2

Mais avant toute chose, la balise h est là pour mettre en valeur un élément d'un site et ne peut aller que de 1 à 6.

[nathoudu34]

Merci Jeckyl pour cette instruction !
Malheureusement je n'ai toujours pas réussi =(
Quelqu'un peu m'aider ?
Merci beaucoup

[Divine]

Hello,

Essaye plutôt ceci: #center_column .products_block2 h4

[nathoudu34]

Merci pour ton aide Divine ! J'ai enfin réussi a faire ce que je veux !
Il me semblait déjà avoir essayé avec cette modification, mais les modifications n'étaient pas apparentes !

Je m'explique :
J'ai bien collé ce que tu m'as marqué.
A première vu il n'y a pas de changement, Mais quand avec Firebug je désactive l'image (background) que je veux changer, il apparait l'image que je veux !

Donc je suppose que sois l'image est en dessous, sois elle apparait en remplacement...

Dans ma tite tête j'ai pensé qu'il fallait y mettre une priorité...
En faisant quelques recherches j'ai vu quand rajoutant !important a la fin de la syntaxe ca la passé en premier !
Donc c'est ce que j'ai fait.

Voici la solution qui marche :

#center_column .products_block2 h4 {
   background: transparent no-repeat top left url('../img/block_header_large.gif')!important;
   height: 34px;
   width: 670px;
   color: #3d3d3d;
}
#center_column div.block h4 {
   background: transparent url('../img/block_header_large2.gif') no-repeat top left;
   height: 34px;
   width: 670px;
   color: #3d3d3d;
}

Un grand merci aux personnes qui m'ont aidé et a toi Divine

Sujet Résolu !!

[tlaqueche]

Bonjour,

Je me permets de me greffer à la discussion car j'ai sensiblement de le même pb qu'avait Nathoudu34.
J'ai réussi à modifier le header et le footer pour un seul module.
Tout s'est bien passé. J'ai bien modifié le tpl et le global css.

Par contre, je n'arrive pas à modifier la couleur de fond de ce module.
J'ai trouvé ou cela se faisait mais mon code ne doit pas être le bon.

Voici le code dans le global css pour modifier la couleur de fond :
div.block .block_content {
border-left: 1px #fb8302;
border-right: 1px #fb8302;
padding: 0.5em 0.7em 0;
background: #fb8302 url('../img/block_bg1.jpg') repeat-x bottom left;
min-height: 20px
}

J'ai modifié ce code par rapport au tpl de mon module dont j'ai changé la class par block_newproducts_block2
Du coup, ça me donne le code suivant pour la couleur de fond modifiée du module :
div.block .block_content block_newproducts_block2 {
border-left: 1px #fb8302;
border-right: 1px #fb8302;
padding: 0.5em 0.7em 0;
background: #fb3245 repeat-x bottom left url('../img/block_bg3.jpg')!important;
min-height: 20px
}

Mais rien à faire, ça ne fonctionne pas, j'ai essayé de faire de nombreuses manip mais rien n'y fait.

Auriez-vous un conseil à me donner please.

Merci beaucoup

[nathoudu34]

Je suis pas sur mais je crois qu'il faut mettre un point devant "block_newproducts_block2"
Ce qui donnerait " div.block .block_content .block_newproducts_block2 "

Je dis peut être des bêtises mais essai on sais jamais =/

[tlaqueche]

Apparemment, ce n'est pas ça.
Merci quand même pour ton aide.

Je vais continuer à modifier le css à taton, on verra bien.

Si quelqu'un a une idée, je suis preneur.

Merci