Jump to content

Comment modifier séparément le design d'un seul module ??...

benj0612
 Share

Recommended Posts

benj0612 Newbie

benj0612

Posted
Posted

Hello la room,

Ma question consiste à trouver le moyen de modifier le visuel d'un module et un seul.

Je sais modifier les éléments (..themes\prestashop\img) mais si je modifie par exemple le fichier "block_header" il va s'appliquer à la plus part des autres modules.

Je ne sais pas comment (simplement) modifier par ex le design du bloc Newsletter.

Merci à vous (je n'ai pas trouvé de réponse sur le forum:p)

B'

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

Salut,

normalement la question tombe sous le sens si tu souhaite modifier le design d'un seul élément il faut appliquer un design à ce seul élément.

Je m'explique.

Le block xxxxx est défini dans son tpl avec un id ou une class e qui permet de différencier le design et d'appliquer les changement sur lui et pas sur les autres ce qui est le cas du panier ou mon compte.

Link to comment
Share on other sites
benj0612 Newbie

benj0612

Posted
  • Author
Posted

Merci de ton retour.

Ma question tombe sous le sens pour un super lapin !

La notion d'ID me dépasse et les TPL je ne les retouchent pas pour le moment. Plus obscure pour moi que les CSS.
Je suis "Apprentice" avec deux étoiles ;)

Donc pour ma news letter, j'ai ouvert le TPL du module Newsletter. Est-ce juste ?
What else ?

Le voici :

<!-- Block Newsletter module-->


{l s='Newsletter' mod='blocknewsletter'}



{if $msg}

{$msg}


{/if}
<form action="{$base_dir}" method="post">

<input type="text" name="email" size="18" value="{if $value}{$value}{else}{l s='your e-mail' mod='blocknewsletter'}{/if}"></p>



{l s='Subscribe' mod='blocknewsletter'}
{l s='Unsubscribe' mod='blocknewsletter'}

<input type="submit" value="ok" class="button_mini" name="submitNewsletter" />


</form>



<!-- /Block Newsletter module-->

Merci.

B'
Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

Salut,

si tu ne veux pas modifier la structure du module tu n'as rien à faire dans le tpl.

Pour modifier la présentation d'un élément il suffit de modifier son css.

Ainsi pour ce block en utilisant firebug (dont il existe un excellent tuto sur le forum intégration) tu peux retoucher le block et tester tes modifications avnt de les mettre dans le global.css de ton thème.

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

Salut,

Prestashop est construit sous la forme d'un MVC (modèle vue contrôleur) ce qui permet de séparer le code du design ainsi le php c'est le code, le tpl c'est la structure et le css c'est le design.

Donc le css est séparé du reste pour pouvoir justement le gérer facilement tout est dans le même fichier global.css de ton thème.

Link to comment
Share on other sites
benj0612 Newbie

benj0612

Posted
  • Author
Posted

Hello,

Hmmmm ok je vois :)

Sinon, c'est ce qui me semblait, firebug m'indique la ligne 838 pour n'importe quel entête (par ex) des modules de ma page.

Ça appelle donc la même image *.gif. Donc si je modifie le fichier *.gif ça me modifie tous les header des modules (sauf panier et promo comme d'hab)

SO ?

B'

Link to comment
Share on other sites
benj0612 Newbie

benj0612

Posted
  • Author
Posted

Je l'ai en favoris, il m'a déjà rendu service en effet :)

Mais pour mon cas, avec les connaissance que j'ai je n'y vois pas de réponses sauf erreur ou omission.

Quelque chose m'échappe, mais peut être que quelqu'un pourra développer pour expliquer :)

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

tu dois avoir un endroit un appel vers ton block spécifique de newsletter avec comme référence #newsletter_block_left si cela n'existe pas tu peux le créer et ensuite tu mets à l'intérieur les modifications à apporter.

Link to comment
Share on other sites
benj0612 Newbie

benj0612

Posted
  • Author
Posted

Hi,

J'ai bel et bien un beau bloc :

/* Block newsletter */
div#newsletter_block_left div.block_content { padding: 1em 0; text-align: center }
div#newsletter_block_left div.block_content p { padding: 0.3em 0; text-align: center }
div#newsletter_block_left div.block_content input.button_mini { margin: 1em auto 0em auto }

Mais alors je ne suis as parvenu au résultat escompté.

Someone ?

B'

Link to comment
Share on other sites
  • 2 weeks later...
nathoudu34 Newbie

nathoudu34

Posted
Posted

J'ai aussi demandé il y a une semaine a faire les mêmes motifs que toi, et je n'ai pas u de réponse bien précise =(
Si tu trouves la solution peux tu m'en faire par ici ?
Je ferais de mêmes de mon coté =)

Voici le liens de ma question :
http://www.prestashop.com/forums/viewthread/49540/integration/changer_le_fond_et_image_du_module_homecategories/

Grâce aux réponses j'ai réussi a changer la couleur de fond des blocs, mais malheureusement j'ai pas réussi a changer l'image d'en tete .GIF ( Ce que tu demandes )

J'espère qu'on trouvera la réponse !!

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

Bonsoir,

Franchement je trouve qu'en 3 semaines vous auriez pu trouver seul.

On rappel l'utilisation importante de firebug pour chercher et trouver l'image correspondante au fond 'un bloc.

Puis vous créez la même en changeant la couleur du dégradé et vous remplacez l'ancienne par la nouvelle.

Link to comment
Share on other sites
benj0612 Newbie

benj0612

Posted
  • Author
Posted

Ce message me parrait bien inutile.. d'autant que j'ai bien utilisé firbug.

Aussi, modifier un seul bloc, par exemple celui du panier séparément du bloc promo je n'y parviens pas.
En effet dans img si je modifie le fichier, les deux prennent la MAJ.

D'ou ma question...So..

Merci aux autres pour vos pitstes :)

B'

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

D'où ma réponse plus avant expliquant qu'il fallait extraire le css de ce bloc pour lui appliquer une mise en page particulière.

A part le faire à ta place je ne peux pas l'expliquer mieux qu'en français.

Je t'ai dit comment faire, où te former, au bout d'un moment on peut le faire à votre place si vous ne souhaitez pas le faire vous même.

Link to comment
Share on other sites
benj0612 Newbie

benj0612

Posted
  • Author
Posted

Je n'y suis pas parvenu.
J'ai bien noté le css de l'élément bloccart par ex.

A l'intérieur pas d'appel d'une image de fond juste celui d'un icone.
J'ai testé de remplacer le dit background par background: #bdc2c9 url('../img/PANIER.jpg') repeat-x bottom left;
Ca ne fonctionne pas et ce n'est à la base pas mon job.

Comment le modifier ?

Merci de vos réponses.

Link to comment
Share on other sites
nathoudu34 Newbie

nathoudu34

Posted
Posted

J'ai réussi de mon coté =)

Regarde sur le liens que je t'ai posté un peu plus haut.

Tu y trouveras surement la solution !

En gros dans le fichier tpl de ton module tu dois avoir un code du genre :



Pas avec les memes noms bien-sur...

Tu remplaces la classe par un autre nom : ici j'ai mis block products_block2



Ensuite dans ton global css tu dupliques les codes que tu as envi de changer et tu changes un des doubles avec le nom de la class que tu as mis dans le tpl. Ca ca marche pour la couleur de fond du module par exemple.

Pour l'image du header du bloc, tu dupliques le codes et tu rajoutes le nom de la class s'il y est pas déjà. Ensuite tu rajoutes le code : " !important " Ce code permet de mettre la priorité sur ton image.
Voici un exemple :

Le code de base :

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



Je duplique,je rajoute ma class (ici .products_block2) et je met le !important :

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



Pour le !important met le bien juste apres ton lien url et n'ajoute rien derrière.

J'espère t'avoir aidé ;)
Link to comment
Share on other sites
benj0612 Newbie

benj0612

Posted
  • Author
Posted

Top les explications, j'ai avancé et compris certains fonctionnement.

J'ai encore un petit soucis :

D'abord, voici mon code :

/* block exclusive benj */
#left_column div.exclusive benj, #right_column div.exclusive {

background: transparent url('../img/block_footer_myaccount.jpg') no-repeat bottom left;
border-bottom: transparent;
}

div.exclusive benj h4 {
background: transparent url('../img/block_header_myaccount.jpg') no-repeat top left !important;
color: white
}

div.exclusive benj h4 a { color: white }
div.exclusive benj li { margin-top: 0 }
div.exclusive, div.exclusive benj a { color: #595A5E }
div.exclusive .block_content {
background: #bdc2c9 url('../img/block_bg_myaccount.jpg') repeat-x bottom left !important;
border-left: transparent;
border-right: transparent
}

-------------
J'ai beau ajouter des "benj" apres "div.exclusive", mon bloc promo prend les images aussi, SAUF le footer de mon bloc qui est bien gris comme de base, et comme je le souhaite

Mais, le header du block promo change en même temps que le header du block panier
Pareil pour l'image du 'corps' de ces deux blocks.

----------

J'espère avoir été clair :)

Quelqu'un y vois une astuce ?

Merci.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...