How to Change Logo Size in Blogger Emporio Theme

correct Logo size in blogger emporio theme

That was not too long ago when Blogger introduced 4 new and modern themes for its users. These themes are Soho, Cotempo, Notable and Emporio.

All these themes are responsive and can be customised to your liking.

Finally, Blogger users can have a responsive blog which is necessary to increase mobile usability and also good for SEO.

These themes have ended the need of finding a custom template (of many bloggers)  which was a headache.

Emporio theme was most suitable for my blog. So I applied it.

But there is a bug in the Emporio Theme, which I did not find out until I uploaded InfoSmush logo.

The problem was: logo looked too big.

Logo stretched to cover the whole header part.

This was a major problem because I had a logo for InfoSmush before I decided to apply the Emporio theme. I had to find a way to change the size of my logo. So I took the help of Google

But sadly, after hours of searching, I didn’t find any solution. This forced me to come up with my own way out of this mess.

And after a little poking around I found a permanent solution and thought I should share with other bloggers like you.

Follow these steps to change the size of your logo:



First upload your logo (when you change your theme, your logo is removed).

1. Select “ Instead of title and description”.
Emporio Blogger logo show instead of title

Why?

If you choose the first option which is “Behind title and description” and make your blog's title transparent, your logo might look good on a laptop but not on mobile screen. Your logo won’t be responsive.

If you choose "Have a description placed after the image/logo"  there will be no Text heading in the header bar.

So select the 2nd option and hit Save.

2. Next step is to edit your theme, for this go to Theme>Edit HTML.
Edit your blogger theme

On the next page you will see a box with codes. Click anywhere in the box> Press Ctrl+F. This will open a search bar in the top right corner. In the search bar copy and paste “header-image” (without the inverted comma) and Hit ENTER.

Now scroll down a bit and find the codes in the rectangle as shown in the screenshot:

Now we need to change "max-width: 100%". Logo covers the whole header part because it is set to 100%.

Change the max width percent according to your logo.

In my case, I have changed the max width to 60%. Because if I set it lower than that, it will look too small on mobile.

I tried this trick on Emporio theme, so I’m not sure whether it will work with other themes or not. But you can definitely try.

Important.


Don’t go messing around with the HTML codings. 

It may corrupt your theme! And sometimes it is so badly damaged that nothing can fix it.

My theme got corrupted too.

 I tried everything to correct it, but nothing worked. In the end, I had to transfer all my posts to the other blog and delete the old one. Believe me, you don’t want to go through all that hassle.

Share this post to help other bloggers.

If you have any question ask me via comment.


Comments

  1. I don't have a search engine that helps me find that area of the HTML. :-/

    ReplyDelete
    Replies
    1. You don't need a search engine.

      This feature is built in all browsers. Just press Ctrl+F.

      Delete
  2. I was literally wondering to do the same thing and I am sure that it is not that hard to find out. Everything has been described with all the detail that is basically required.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Respected Himanshu sir,

    Thanks for providing such a nice and simple trick, it 100% works on Emporio theme. But will you please provide me same trick over Notable Theme?

    I will wait for your reply sir.
    Thanks

    ReplyDelete
  5. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

    ReplyDelete

Post a Comment