Logo au format SVG

[Lynda]

Bonjour,

Je souhaiterais mettre le logo sur le header au format SVG. Comment faire ?

Merci.

[Mediacom87]

Bonjour,

https://github.com/PrestaShop/PrestaShop/pull/23959

[Lynda]

Merci pour le lien mais je ne comprends pas comment faire. N’y aurait-il pas un tutoriel ?

[Alexandre Carette]

Bonjour vous utilisez quel theme ?

cdt

[Mediacom87]

Il y a 3 heures, Lynda a dit :

Merci pour le lien mais je ne comprends pas comment faire. N’y aurait-il pas un tutoriel ?

Les fichiers et les codes à modifier sont précisés sur cet onglet : https://github.com/PrestaShop/PrestaShop/pull/23959/files

[Lynda]

J'utilise un thème payant. Merci pour le lien Mediacom, je vais regarder ça.

[Mediacom87]

il y a 39 minutes, Lynda a dit :

J'utilise un thème payant. Merci pour le lien Mediacom, je vais regarder ça.

après comme le suggère @Alexandre Carette il suffit de modifier le code du template pour y insérer l'appel de votre logo au format SVG et configurer ses dimension à l'aide de css.

[Lynda]

En effet, ce serait surement plus simple, mais ça ne marche pas.

J'ai modifié cette partie dans le header.tpl :

 

{block name='header_logo'}
                <img src="/img/logo.svg" alt="Logo"/>
            {/block}

 

Merci pour votre aide.

[Alexandre Carette]

Salut,

ca ne s'insère pas avec des balises img... ouvre ton svg avec un navigateur, chrome par exemple et copie le code source que tu vas par la suite coller dans ton header, tu regles la taille avec les valeurs de height et width.

cdt

Edited August 24, 2021 by Alexandre Carette (see edit history)

[SmartDataSoft]

9 hours ago, Lynda said:

En effet, ce serait surement plus simple, mais ça ne marche pas.

J'ai modifié cette partie dans le header.tpl :

 

{block name='header_logo'}
                <img src="/img/logo.svg" alt="Logo"/>
            {/block}

 

Merci pour votre aide.

 

 

Vous pouvez suivre cet article. En suivant cet article, je suis en mesure d'afficher svg dans mon thème enfant.

 

<a href="#" >
<object class="logo" data="https://www.mysite.com/img/logo.svg" width="186" height="235"  type="image/svg+xml">
<img src="https://www.mysite.com/img/logo.png" width="186" height="235"  alt="Logo " />
</object>
</a>

https://www.jotform.com/blog/svg-clickable-71346/

 

Merci

[Lynda]

Merci pour ce lien, SmartDataSoft, mais à quel endroit précisementl dois-je coller ce code ? Ci-dessous le code dans mon fichier header.tpl. Est-ce que le code doit remplacer cette ligne : {include file='_partials/logo.tpl'} ?

Merci.

 

<header id="header">
{if (isset($pktheme.header_builder) && ($pktheme.header_builder == 1))}

    {hook h='displayHeaderBuilder'}
    
{else}

    {block name='header_banner'}
      <div class="header-banner">
        {hook h='displayBanner'}
      </div>
    {/block}

    <div class="header-top">
        <div class="page-width flex-container container">

            {block name='nav'}
                {hook h='displayNav'}
            {/block}

            <div class="main-search-link">
                <a href="#" class="js-main-search-link s-link">{l s='Search' d='Modules.Searchbar.Shop'}</a>
            </div>

        </div>
    </div>

    <div class="header-main relative">
        <div class="page-width flex-container container">

            {block name='menu'}
                {hook h='displayMenu'}
            {/block}

            {block name='header_logo'}
                {include file='_partials/logo.tpl'}
            {/block}

            <div class="header-right-side relative">
            {block name='header_nav'}
              <div class="header-nav">
                {hook h='displayTop'}
              </div>
            {/block}

            {block name='search'}
                {hook h='displaySearch'}
            {/block}
            </div>

        </div>
    </div>
    
{/if}
</header>

[SmartDataSoft]

Vous utilisez un thème tiers, leur structure est différente Oui il faut mettre le code   {include file='_partials/logo.tpl'}

 

Merci