Changing logo size in Edison business theme

[maryanne63]

Hi all

My site uses Edison business theme - I am very happy with it and would prefer not to change it.

However, the place for my logo in the top bar is just not big enough - I add my logo and it is too small to see anything.

Is there some way I can increase the size of the logo please?

www.innovaspace.org

[Adam7]

It is possible through CSS to make it larger, although it's probably just going to make it blurry because the image itself was converted to be smaller:

http://www.innovaspace.org/uploads/4/7/0/6/470660/published/logo-without-tagline_1.png?1495465534

A better solution I've seen people do is to edit the HTML of their page templates and hard-code in a larger image; since any image uploaded when editing a theme isn't made smaller, this allows you to use one that isn't automatically shrunk.

Are you familiar with HTML and CSS, @maryanne63? If not someone here might be able to help with a solution.

[maryanne63]

Wow - thank you Adam for your super quick response!

Unfortunately I am not a whizz on coding, which is why I love Weebly so much - pretty much idiot proof.

If anyone could help I would be extremely grateful.

[BJ5]

I can help with this, although I'll need you to do a couple things:

1. Go to the Theme and click on Edit HTML / CSS

2. On the left next to the Assets folder is a little gear icon. Click on that, then choose the "upload new file" option and upload your image file.

3. Click save on the top right and give your custom theme a name

Let me know the theme you're using and the filename of your image file, and then I can give you the HTML templates to use with each page type so they all use your image.

[maryanne63]

Hi BJ

Many thanks for the help

I have uploaded the file - file name: Logo Without Tagline.png

And I have named the theme InnovaSpace

[BJ5]

Ok, your theme isn't too bad since it only has two page types. What you want to do now is go back to the Theme tab and click on "Edit HTML / CSS" again.  Once there, click on Header on the top left for the Header page template.

If you scroll a little bit you'll see this bit of code: {logo}

Replace {logo} with this:

<span class="wsite-logo">
	<a href="/">
		<img src="http://www.innovaspace.org/files/theme/LogoWithoutTagline.png" style="max-height: 100px;">
	</a>
</span>

Next, click on "No Header" so you're viewing that template instead. Replace {logo} in that template with the above code, then save your custom theme. I don't believe the image above will show until you've republished with your changes.

This should get you a logo about twice the size of what you have now.

[Adam7]

Just to piggyback on @BJ's advice - if you run into trouble you can always switch back to the original version of the theme you edited, @maryanne63.

[maryanne63]

Hi BJ

Many thanks indeed for your help - I do really appreciate it.

I did all you suggested and the logo certainly has grown! It still looks too small though - is there any chance of doubling it up in size again? or is that a step too far?

[bobafett]

@maryanne63"

BJ and Adam are the real 'gurus'.  I am just a dabbler.

I looked at the original logo image.  First of all it is too large (~2400px) and second it has lots of space around it.  I suspect that if you were to use the same image and change the size via html, your header will look very very tall with very tall white space on the top and bottom.  My suggestion would be to make the image smaller and get rid of the space around it.

I am guessing, but if you got rid of that blank space around and made your logo around 150px in size you may not have to do any editing.

Again, I am just a dabbler. Not an expert

[maryanne63 · Accepted solution]

Hi Boba Fett

Many thanks for your suggestion - I have trimmed the white from the image and resized it and is now a bit bigger and looking much better. 

It's been great to have the community input and wonderful that people are wiling to respond so quickly and give some of their time and know-how - my thanks indeed to one and all.

Mary

[Adam7]

Nice work everyone! Glad to see you're happy with the help you got, @maryanne63.

[mrsvaughn]

Hello! I tried this same advise for the haberdasher theme and when I saved my theme, i saw nothing but white. Everything was gone. Any idea what I may have done wrong?

[Bernadette3]

Hi @mrsvaughn 😊

We're not able to troubleshoot custom code, but you can re-apply a standard Weebly theme in order to retrieve the content. 

[PiKL]

Hi BJ,

I am also having difficulty enlarging my logo and went through the steps you outlined for MaryAnne, however it didn't work.  I know nothing about coding.  Would you be willing to walk me through it again?

Best,

Paula

[PENicholson]

I am also using Edison Business theme

Would love to know how to change the navigation menu to transparent

or if not that color then to black