Want to change size and place on LOGO

[Doftkompaniet]

Hello dear Sir/Maddam,

I have load up my logo on my prestashop version 1.7.4.4.

But I have a problem, the size of the logo is to small. And the logo is also on the left side and I would love to get it into the middle of the website.

I wonder if there is any chance to do that change with the logo?

Thank you

[Tymek Z]

Do you use Classic theme? If so, you can made some changes in the template code.

Change header_top block code in templates/_partials/header.tpl:

{block name='header_top'}
  <div class="header-top">
    <div class="container">
	  <div class="row">
	    <div class="hidden-sm-down" id="_desktop_logo">
	      <a href="{$urls.base_url}">
	        <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
	      </a>
	    </div>
	  </div>

      <div class="row">
        <div class="position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
        </div>
      </div> 
    </div>

    <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
      <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

And add following code in assets/css/custom.css:

#header .logo {
  display: block;
  margin: 0 auto 1rem auto;
  height: 5rem; /* New height of your logo in rem units */
}

These files are placed in themes/classic directory. Remember that you have to clear the cache in order to see results.

[Doftkompaniet]

5 hours ago, Tymek Z said:

Do you use Classic theme? If so, you can made some changes in the template code.

Change header_top block code in templates/_partials/header.tpl:

{block name='header_top'}
  <div class="header-top">
    <div class="container">
	  <div class="row">
	    <div class="hidden-sm-down" id="_desktop_logo">
	      <a href="{$urls.base_url}">
	        <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
	      </a>
	    </div>
	  </div>

      <div class="row">
        <div class="position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
        </div>
      </div> 
    </div>

    <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
      <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

And add following code in assets/css/custom.css:

#header .logo {
  display: block;
  margin: 0 auto 1rem auto;
  height: 5rem; /* New height of your logo in rem units */
}

These files are placed in themes/classic directory. Remember that you have to clear the cache in order to see results.

Thank you for the answer.

Yes i am using the classic one.

But I am sorry, it have been many new updates since i was using prestashop last time.

You have send many codes here, shall I just copy the whole one and past in?

I don't even know how to reach my css file, i have learned that it have something with child and parent documents to do, but i don't know how to reach the codes.

 

Thank you 

[Tymek Z]

Usually, you can access your theme files via FTP. Modify files I've mentioned above and upload them to server in proper directory. Please read carefully my previous post, I've explained in which directory they should be uploaded. You need to:

• In header.tpl, substitute the old header_top block content with the modified content. Blocks in template files contains HTML markup and are the elements of which your front office is made. For example, the website header with logo and displayTop hook.
• Just add the new code in any place of custom.css file. This file (by default empty) is delivered with every template to provide you with fast way of doing fixes in your CSS code.

[El Patron]

a great way is to use chrome development tools

https://developers.google.com/web/tools/chrome-devtools/

With these tools you can learn how not only to change on your screen real time .css but how to find the .css you are looking for...and more

start with beginners guide....

without these base tools you will not be able to manage the level of change you want.  You can also check out Leo Themes,  they have a very rich tool set built into the theme so you  can manage the look for your front office.  

happy learning, el

[Doftkompaniet]

On 11/25/2018 at 1:14 AM, Tymek Z said:

Usually, you can access your theme files via FTP. Modify files I've mentioned above and upload them to server in proper directory. Please read carefully my previous post, I've explained in which directory they should be uploaded. You need to:

• In header.tpl, substitute the old header_top block content with the modified content. Blocks in template files contains HTML markup and are the elements of which your front office is made. For example, the website header with logo and displayTop hook.
• Just add the new code in any place of custom.css file. This file (by default empty) is delivered with every template to provide you with fast way of doing fixes in your CSS code.

Thank a lot.

I have done the changes now, and i have learned how to change the size of the logo on custom.css. 

And i have also changed the header.tpl.

But i really want to change place of the logo, it is on the left side now and i want it in the middle of the website on top. 

I will attach a file from paint so you can understand what i am talking about.

And when i changes the size to more bigger, it looses the quality because of it is so compact.

Thanks a lot for all help.

Edited November 27, 2018 by Doftkompaniet (see edit history)

[Tymek Z]

Did you upload logo in resolution high enough?

It seems that there are no changes in the header code, did you clear the template cache?

[El Patron]

tip: stop worrying about logo and built your catalog first.  the worry about design lol

[Doftkompaniet]

Yes please, i have cleared the cache now.

And the quality shall be really high of the logo.

Shall the loger theme code you gave me change the place of the logo?

Here is the new code/edited code from partial / header.tpl

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

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
      <div class="row">
        <div class="hidden-sm-down">
          <div class="col-md-5 col-xs-12">
            {hook h='displayNav1'}
          </div>
          <div class="col-md-7 right-nav">
              {hook h='displayNav2'}
          </div>
        </div>
        <div class="hidden-md-up text-sm-center mobile">
          <div class="float-xs-left" id="menu-icon">
            <i class="material-icons d-inline">&#xE5D2;</i>
          </div>
          <div class="float-xs-right" id="_mobile_cart"></div>
          <div class="float-xs-right" id="_mobile_user_info"></div>
          <div class="top-logo" id="_mobile_logo"></div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </nav>
{/block}

{block name='header_top'}
  <div class="header-top">
    <div class="container">
      <div class="row">
        <div class="hidden-sm-down" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
      </div>

      <div class="row">
        <div class="position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
        </div>
      </div> 
    </div>

    <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
      <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

 

Thank you

Edited November 28, 2018 by Doftkompaniet (see edit history)

[Doftkompaniet]

8 hours ago, El Patron said:

tips: sluta oroa dig för logotypen och bygga din katalog först. oroa sig för design lol

Hello,

I have already a website.

But not on prestashop, the website i use now is to old and not changing it size when i visit it on phone and no one can order the cakes, only read information about them.

Now i want to start a eCommerce for it.

Thank you

[Doftkompaniet]

Hello again, 

On 11/28/2018 at 1:17 AM, Tymek Z said:

Did you upload logo in resolution high enough?

It seems that there are no changes in the header code, did you clear the template cache?

 

I have no seen some changes thank to your codes.

The one who helped me to clear the cache was doing it wrong.

Now when i understand it more, i have changed the codes and also cleared the caches and it worked.

Thank you

[El Patron]

Hey stop  worrying about stupid  logo and build your shop catalog. 

if you don't have a catalog and working cart nobody cares  about logo

go do the real work and then come back to logo.  put a pirate flag up or something...

more shops fail because people do the wrong things first...

[El Patron]

@franky.martin

sorry you so sad....but I don't care