Jump to content

Intégration d'une bannière en .gif


Recommended Posts

Bonsoir à toutes la communauté.

 

Après avoir parcouru le forum en long et en large et n'ayant pas réussi à mettre en place ma banière créer avec Photoshop au format .gif, je viens vers vous pour une nouvelle AIDE.

 

Avant de vous expliquez le plus clairement possible se que je souaite mettre en place, sachez que j'ai essayé de suivre des tuto de se style et autre que j'avais trouvé:

 

http://www.prestasho...__1#entry742427

 

Mon souhait:

 

- Remplacer mon ancienne bannière par une nouvelle créer avec photoshop et enregistré au format .GIF

 

Nouvelle bannière: http://www.imagup.co...1166040251.html

 

- Ma version de prestashop et la: PrestaShop™ 1.4.6.2

 

Le problème que je rencontre et que lorsque je passe par BO>Préférences>Apparence>Logo de l'en-tête, ma bannière en (.gif) se charge mais apparait sur mon site en fixe, comme si elle avait été transformer en (.jpeg) ?

 

1- Y'aurait il un endroit ou il faudrais modifier (via Filezilla) l'extention de la bannière en (.GIF) au lieu de (.JPEG) afin que ma bannière soit pris en charge ?

 

2- Comment définir le chemin de sa bannière ? (Demander dans différents tuto)

 

3- Pourriez-vous me donner le plus simplement la marche à suivre ? (je n'ai pas de connaissance htlm, code ou autre. Juste celle de suivre des explications en essayant de les comprendre au mieux)

 

Je vous donne les 2 codes que j'avais modifié et re-modifié.....

 

Hearder:

 

{*
* 2007-2011 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2011 PrestaShop SA
*  @version  Release: $Revision: 6594 $
*  @license	http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
 <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
 <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
 <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <meta name="generator" content="PrestaShop" />
 <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
 <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <script type="text/javascript">
  var baseDir = '{$content_dir}';
  var static_token = '{$static_token}';
  var token = '{$token}';
  var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
  var priceDisplayMethod = {$priceDisplay};
  var roundMode = {$roundMode};
 </script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
 {$HOOK_HEADER}
</head>

<body {if $page_name eq '404'}id="pagenotfound"{elseif $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
 {if isset($restricted_country_mode) && $restricted_country_mode}
 <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}
 <div id="page" class="container_9 clearfix">
  <!-- Header -->
  <div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
<div id="header_right" class="grid_6 omega">
 {$HOOK_TOP}
 <div id="ban-ibazard">
 <a href="http://www.i-bazard.fr"> </a>
 </div>
</div>
  </div>
  <div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
<div id="left_column" class="column grid_2 alpha">
 {$HOOK_LEFT_COLUMN}
</div>
<!-- Center -->
<div id="center_column" class=" grid_5">
{/if}

 

et le 2ème global:

 

/* ##################################################################################################
PRESTASHOP CSS
################################################################################################## */
@import url("grid_prestashop.css");
/* ****************************************************************************
  reset
**************************************************************************** */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:inherit;font-weight:inherit}
del,ins{text-decoration:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:baseline}
sub{vertical-align:baseline}
legend{color:#000}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{font-size:100%}
a {cursor:pointer}
.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden
}
.clearfix:after {clear: both}
.clearfix {zoom: 1}

/* ************************************************************************************************
  struture
************************************************************************************************ */
#page {}
#header {z-index:10}
#banniere {
background: transparent url('..\prestashop\prestashop_new \img\ban-ibazard') no-repeat top left; /* définir le chemin de votre bannière. */
float: left;
height:269px; /*XXX est la hauteur de votre bannière. */
width: 980px; /*YYY est largeur de votre bannière. */
}
#banniere a {
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
#columns {z-index:1}
 #left_column {}
 #center_column {}
 #right_column {}
#footer {}

/* ************************************************************************************************
  generic style
************************************************************************************************ */
body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background:#fff
}

/* ************************************************************************************************
  xxxxx
************************************************************************************************ */

 

Pour info, l'image de ma bannière est stockée sur mon disque dur Data D:>Site i-bazard>image structure site>nom de ma bannière(ban-ibazard)

 

Merci à vous pour le temps précieux que vous m'accorderez.

Edited by ibazard (see edit history)
Link to comment
Share on other sites

Bon,

 

Tous mes essais depuis cette après-midi sont mauvais. Échec total :wacko:

 

Je me rend compte de l'heure tardive, donc je vais attendre votre aide et reposer un peut mon crane qui ne sait plus quoi faire.

 

Dans l'attente de votre aide,

 

Bye

Link to comment
Share on other sites

Le code du logo se trouve dans ton fichier header.tpl à cet endroit:

<img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

 

En fait, il faut bien comprendre le mécanisme. Ton header.tpl ne fait qu'afficher le fichier logo.jpg rien d'autre. pas un gif, pas un png, non simplement logo.jpg comme indiqué dans le code.

Dons dans le BO, lui il upload ton fichier et le transforme en logo.jpg.

 

Il faut donc que tu transformes le code et que tu mettes le nom de ton fichier. par exemple, tu sauvegardes ta bannières dans le répertoire img:

/img/banniere.gif

Et tu remplaces le code par:

<img class="logo" src="{$img_ps_dir}banniere.gif" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

 

N'oublies pas de désactiver le cache et de forcer la compilation (préférences=>performances)

 

Franck

Link to comment
Share on other sites

  • 2 months later...

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
×
×
  • Create New...