[RESOLU] Thème d'origine -> Changement Logo -> Remonter center_column & transparence logo en png

[marsono]

Bonjour,
Je suis en prestashop 1.4
J'ai mis un logo de 190x190 px
Entre le haut de la page et center_column il y a un vide.
J'ai bien cherché sur le forum, je n'ai pas trouvé comment remonter center_column ?

CF shoot d'écran

Merci de votre aide.

@+

ps : j'ai simplement rajouter dans le global :

#editorial_block_center img {
display: none;
}

[marsono]

Salut à tous,
Sincèrement, là, je bloque !

Je bloque aussi pour rendre le logo en png transparent.

Merci de votre aide

@+

[Rom Soul]

C'est une histoire de CSS :
même si c'est un "rectangle invisible", ton logo fait partie d'un calque qui occupe toute la largeur de la page, et "interdit" au contenu de la colonne centrale de remonter .

Je ne garantis pas la syntaxe, mais le + simple serait peut-être de définir ton logo comme positionné de façon absolu :

a#header_logo
{ position: absolute;
top: 0px; left: 0px;
display: block;
width: 190px; height: 190px;
background-color: transparent;
z-index: 100;
}
Mais quand ta colonne centrale va remonter, tes colonnes latérales aussi, et celle de gauche risque de se retrouver cachée par le logo, il te faudra rectifier sa marge supérieure :
#left_column { margin-top: 120px; } /* a ajuster ! */

De même la partie droite de ta bannière (contact, plan du site, etc.) risque de venir se caler à gauche, sous le logo puisque le positionnement absolu aura extrait ce dernier du flot de données... Donc tu auras peut-être besoin aussi de rajouter ça :
#header_right { float: right; } /* et non plus left !!! */
ou au choix :
#header_right { margin-left: 190px; width: 650px; /* ajuster */ }

... C'est le problème avec les CSS... Quand on touche un truc, ya tout qui bouge

Bon courage Marsono,
une fois la manip achevée, n'oublie pas de vérifier si ça rend pareil sous d'autres navigateurs,
a+

[marsono]

Salut et merci Beginner,
Le problème maintenant c'est que le logo flotte dans une position fixe par rapport à la page web : cf photo jointe
Il n'est pas possible de faire cela par rapport à #page {..... ?

Merci
@+

[Rom Soul]

C'est carrèment possible ( j'avais oublié un bon vieux piège du positionnement absolu) : pour cela il faut juste que le calque #page soit positionné en relatif, ajoute :
#page { position: relative; }
... sans quoi le logo se positionne en absolu non pas par rapport à son conteneur #page mais par rapport au premier conteneur parmi ses ancêtres qu'il trouve de "fiable". (sacrés CSS)

ça devrait mieux marcher, non ?

Avec plaisir, les Beginners aident les Beginners

[marsono]

MAGNIFIQUE Beginner !!
Tu as 14 messages a ton actif et tu donnes déjà de SUPERS bonnes réponses très précise !! Sans jouer à la devinette su genre "google est ton ami"
Ça change des anciens qui font de la rétention d'information envers les nouveaux qui débutent sur prestashop !!

Par contre pour la transparence di logo en .png ça marche pas !

MERCI ENCORE !!!

@+

[Rom Soul]

MAGNIFIQUE Beginner !!
Tu as 14 messages a ton actif et tu donnes déjà de SUPERS bonnes réponses très précise !! Sans jouer à la devinette su genre "google est ton ami"
Ça change des anciens qui font de la rétention d'information envers les nouveaux qui débutent sur prestashop !!

Par contre pour la transparence di logo en .png ça marche pas !

MERCI ENCORE !!!

@+

Ben ça fait chaud au coeur tes remerciements, c'est d'autant plus avec plaisir !
J'ai le statut de beginner sur ce forum parce que je ne me suis mis à Prestashop que depuis peu, mais concernant les CSS, ça fait quelques années que je pratique ...

Sinon je comprends les "anciens", comme tu dis. J'aime autant qu'ils gardent leurs forces pour des cas vraiment épineux, et laissent à des gars moins "pointus" (genre moi) les problèmes à leur portée... et on ne peut tout de même pas demander aux anciens de passer leurs journées à dépanner bénévolement les gens... si ça trouve ils ont des vies, des familles, des maisons, des emplois, que sais-je !)

Pour la transparence du logo, la règle suivante aurait du faire l'affaire :

a#header_logo
{ background-color: transparent;
}

Essaye avec celle-là temporairement :

a#header_logo
{ background-color: Red;
}

Vu que dans le thème prestashop par défaut, la couleur de fond est blanche, peut-être la transparence est-elle déjà présente, mais sans apparaître ? Avec ça, tu devrais en avoir le coeur net !


= = = E D I T = = =

Au temps pour moi, ça ne marchera pas... Quand tu définis le logo de ton site dans le back office de Prestashop, même si tu fournis une image au format PNG, Prestashop a la facheuse manie de la convertir en JPG, ce qui fait bien sur sauter toute transparence. ça part d'un bonne intention (optimiser le poids de l'image, je suppose), mais dans ton cas c'est contrariant.
Je vais te retrouver la manip que j'ai faite il y a quelques temps, et je pense que ça peut en intéresser d'autres.... à de suite.

[Rom Soul]

Je comptais expliquer quelle ligne de header.tpl modifier, puis quelles règles CSS ajouter pour définir le logo PNG en background-image du div header_logo, mais ça a l'inconvénient de compliquer les éventuels changements de logo ultérieurs (qui ne peuvent du coup plus s'effectuer via le back-office), et puis surtout... j'ai déniché beaucoup plus simple !!!

RDV sur ce thread :

_module__envoyer_des_png_transparant__sending_png_with_transparency

Inutile d'installer le module dont il est question pour régler ton problème, par contre trouve la technique géniale d'un certain unanim (encore un beginner doué ) : il suffit de renommer ton fichier logo.png en logo.jpg, puis, dans le rép [prestashop_racine]/img/ de remplacer le fichier logo.jpg par ton nouveau logo.jpg .

Ouaip' ! un changement de format ! Apparamment le navigateur "comprend" la feinte et affiche correctement la transparence !)

Tiens-moi au courant si ça marche, et tu pourras rajouter [RESOLU] à notre thread.
Sinon, j'expliquerai ma technique moins rapide.

[marsono]

Salut,
Le module dont tu parles n'a pas l'air de s'installer dans la 1.4

Mais le coup du logo.png renommé logo.jpg ça fonctionne..... Une bizarrerie de l'informatique tellement bizarre que l'on y pense pas !!

@+
Et merci encore !!

PS : je ne suis pas encore tombé sur un PB assez pointu que que les pointures me parlent !!

[Rom Soul]

Je n'ai pas eu l'occasion de tester le module, je te renvoyais vers le thread en question juste pour la technique de unanim qui y figure...Par ailleurs si tu souhaites utiliser des images avec transparence ailleurs sur ton site, la feinte du renommage a aussi l'air de fonctionner pour les images des articles, catégories, etc... simple et génial, je crois que c'est clair

PS : je ne suis pas encore tombé sur un PB assez pointu que que les pointures me parlent !!

T'inquiète, ça va venir à une prochaine !

[marich]

Bonjour,

j'ai tenté la transformation de mon logo de cette façon et ca ne marche voici ma démarche exacte :

J’ai travaillé mon logo sous prestashop , enregistré en .PNG. Puis en dehors de prestashop , j’ai renommé mon fichier logo.png en logo.jpeg.png .

Je suis allée dans le Back office et j’ai chargé le logo à partir de apparences , préférences .. je suis ensuite allée dans le header.tpl du thème et j’ai changé la terminaison comme ceci :

{$img_ps_dir}logo.png?{$img_update_time}

{$HOOK_TOP}

et maintenat quand j’affiche ma boutique j’obtiens une entete sans logo juste le nom du fichier et pas d’image. Je précise que pour le moment je travaille en localhost .

Svp aidez moi Merci

[Rom Soul]

Salut marich,

Pour utiliser en haut de tes pages un logo transparent, il n'est pas nécessaire de modifier header.tpl : si c'est la seule modif que tu as faite dans ce fichier, et qu'elle ne marche pas, je te recommande en premier lieu de rétablir la version initiale de header.tpl

Une fois ton logo au point au format PNG, il te faut le renommer de logo.png en logo.jpg (et non pas logo.jpeg.png !).

Si tu bosses sous Windows et que l'explorateur ne t'affiche pas les extensions de fichiers, il te faut le lui demander... ( je ne sais plus ou ça se règle. Cherche sur Google "afficher les extensions de fichier" au besoin). En modifiant l'extension, tu auras droit à un "avertissement" de Windows, mais n'aie crainte, il couvre juste ses arrières

Avec ton nouveau logo "déguisé en JPG", va ensuite écraser le fichier logo.jpg existant dans le répertoire IMG/ (pour une boutique sur un serveur distant, faire la manip avec un logiciel de FTP)
Nota Bene : il ne faut pas sélectionner le nouveau logo via le back office, ça ne marchera pas !

Et c'est tout, jette un oeil sur le front office, ton logo avec transparence devrait être en place... Si ce n'est pas le cas, c'est peut être à cause de ton header.tpl !

Bon courage, tiens-nous au courant

[DeyDDy]

Bonjour a vous,

Attention!!!le fait de changer le logo

comme l'explique Rom Soul peut amené quelques problèmes(non pas pour dire que cet astuce est fausse),je m'explique:

j'ai aussi employer la même technique pour mon site, suite a un test je me suis retrouver bloqué au processus de commande avec une page blanche > ,après quelques recherches j'ai compris que cela venait du logo que j'avais transformer JPG/PNG

Cela provient peut être de mon thème ou autres,toujours est-il que le problème existe et vous conseil de testé avant la mise en prod.

ce thread était la bonne occasion pour en parlé et prévenir d'un éventuel bug que vous pourriez rencontrer. ;-)

@Bientôt

[mathieu1984]

bonjour,

 

je ne trouve pas comment faire remonter mon logo

 

 

http://www.aventure-equipement.fr/

 

merci