benj0612 Posted March 13, 2010 Share Posted March 13, 2010 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 More sharing options...
jeckyl Posted March 13, 2010 Share Posted March 13, 2010 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 More sharing options...
benj0612 Posted March 13, 2010 Author Share Posted March 13, 2010 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 More sharing options...
jeckyl Posted March 14, 2010 Share Posted March 14, 2010 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 More sharing options...
benj0612 Posted March 14, 2010 Author Share Posted March 14, 2010 Hello,Je vais tester ceci dans l'aprèm, mais, je ne parviens pas à trouver un doc ou des infos concernant ces fameux TPL.Le lien entre les fichiers css/TP/PHP lequel modifier pour tel ou tel résultat.A suivre..B' Link to comment Share on other sites More sharing options...
jeckyl Posted March 14, 2010 Share Posted March 14, 2010 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 More sharing options...
benj0612 Posted March 14, 2010 Author Share Posted March 14, 2010 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 More sharing options...
jeckyl Posted March 14, 2010 Share Posted March 14, 2010 donc il faut créer un identification particulière dans le fichier css.je te conseil de réviser le css avec http://www.alsacreations.com/tutoriels/ qui est une référence. Link to comment Share on other sites More sharing options...
benj0612 Posted March 14, 2010 Author Share Posted March 14, 2010 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 More sharing options...
jeckyl Posted March 14, 2010 Share Posted March 14, 2010 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 More sharing options...
benj0612 Posted March 16, 2010 Author Share Posted March 16, 2010 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 More sharing options...
benj0612 Posted March 28, 2010 Author Share Posted March 28, 2010 up,Quelqu'un ?thxB' Link to comment Share on other sites More sharing options...
benj0612 Posted April 1, 2010 Author Share Posted April 1, 2010 up,Quelqu’un ?thxB’ Link to comment Share on other sites More sharing options...
benj0612 Posted April 4, 2010 Author Share Posted April 4, 2010 Un peu désespérant.. Personne ? Link to comment Share on other sites More sharing options...
nathoudu34 Posted April 5, 2010 Share Posted April 5, 2010 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 More sharing options...
benj0612 Posted April 5, 2010 Author Share Posted April 5, 2010 No problemo Link to comment Share on other sites More sharing options...
jeckyl Posted April 5, 2010 Share Posted April 5, 2010 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 More sharing options...
benj0612 Posted April 5, 2010 Author Share Posted April 5, 2010 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 More sharing options...
jeckyl Posted April 5, 2010 Share Posted April 5, 2010 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 More sharing options...
benj0612 Posted April 5, 2010 Author Share Posted April 5, 2010 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 More sharing options...
nathoudu34 Posted April 5, 2010 Share Posted April 5, 2010 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 More sharing options...
benj0612 Posted April 7, 2010 Author Share Posted April 7, 2010 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 souhaiteMais, le header du block promo change en même temps que le header du block panierPareil 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now