Insert Company Logo...?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi

Is it possible to insert my Company Logo onto my webpage just below the Navigation Menu?

Website : www.seaviewflowers.co.uk

Thanks.
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
  • not sure...

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Hello, yes, there is way! First, drag and drop an HTML widget at the top of the page on your site. Then, paste this code into it:

<style type="text/css">
#logo {
position:absolute;
top:65%;
right:10%;
}
</style>

<div id="logo"><img src="URL-OF-LOGO" width="50px"></div>

You will need to position it to fit your needs. To change how far it is from the top, change the number of percentage it is by changing the number in "top" in the CSS. To change how far it is from the right of the page, change the number of percentage in the "right". Thats it! It should be right below your menu once you position it correctly!

I hope this helps!

If you have any problems of questions, let me know!

Sincerely,
Nathan

-->
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Thanks for that :-)
How do i add the logo picture from my PC to this HTML?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, upload it to your File Manager first on your site, and then, put in the URL, it will be something like this (the resources/ has to be there):

resources/YOUR-IMAGE-NAME.JPG

The all capital part is the image name in the file manager. To get the url, just right click on the image and click "View" then copy the URL of that page in the address bar and paste it into the HTML code. But, delete everything before "resources/..." in the url you put in the code.

Hope this helps!
Nathan
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Hi - Got that on, but i have a couple of questions if its ok?

Can the background of the image blend (transparent) in with the websites background colour?
Also is there a way to enlarge the image?

I have it on my Home page only at the moment.
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Mmm, its not showing on my website.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, you'll have to create a png image that has a transparent background. If you have Photoshop or Paint Shop Pro, you can accomplish this. Check this Google Search out: How to take background out of image
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, if you want to enlarge the image, just change "50px" to whatever you want. Example: "100px" Always keep the px at the end though. Did you say the image isn't showing up? If it isn't let me know.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Uh, that's strange. Are you sure you have resources/ in front of the image name? Also, what is showing up? Nothing? Can you publish the website so I can take a look?

Regards,
Nathan
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Yes i have :

img src="resources/Thistle%20-%20LOGO.JPG" width="275px">

Its showing up fine on Yola even when published - but not on the WWW.

Its published, but not showing. :-(
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, can you please wrap your code in <!-- and --> Thanks.

EX:

<!--

Code here

-->

Maybe if you try removing the %20's and add spaces where those are instead? Like this, add this code: (Don't copy <!-- or -->, just code in between them)

<!--

<img src="resources/Thistle - LOGO.JPG" width="275px">

-->

Oh, is your logo a .JPG? Did you copy that directly from the url bar? What is the FULL url of your image?

Also, can you right click on the logo in the file manager and click on "Rename" and take out all of the spaces? Then, go into this HTML code above and take out the spaces.
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Yes its .JPG.
No i copied the resources/ThistleLOGO.JPG.
Full URL = http://sitebuilder.yola.com/sites/D0d...
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
I have renamed it with no spaces.
Im a little confused with the first part you have said in your last comment. (the !'s and replacing the %20's with spaces?)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Seaview Flowers

I see that Nathan has been helping you out here (thanks Nathan!)

I just wanted to check in to see if further assistance is still needed?
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
I still cannot get it to show, im unsure what im doing wrong? :-(
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, what I mean is that to get code to display on this forum, you have to wrap the code in <!-- and -->

Like this:

<!--

Paste the code here

-->

The <!-- and --> is just for on this forum so we can see the code. You see, when you put code in without <!-- and -->, it renders on the page. So if you put an img tag without <!-- and--> wrapped around it, it will show the image instead of the code. Thats what I mean, sorry to confuse you! :)

Can you paste the exact code (copy every part of the code from the HTML widget) and paste i in here. But, put <!-- before the code and after the code put -->

--
Nathan
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Im so so confused now. Nothing seems to be working.

I have the following HTML :

<!--

<style type="text/css">
#logo {
position:absolute;
top:500%;
right:-73%;
}
</style>

<div id="logo"><img src="resources/ThistleLOGO.JPG" width="275px"></div>

-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, instead of using -73%, you can replace

right:-73%

with

left:73%

So, instead of using the - percentage, you can use left instead which might be easier to position.

But, since I see you are talking on email, I'll let Sanja help you with this for now.
Photo of astroman

astroman

  • 9 Posts
  • 1 Reply Like
Hi, Seaview. Excuse me butting in! Your site looks lovely. Just a thought regarding the css - I see you have top:500% - did you mean 500 or 50 etc?
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Thank you :-)

No 500% is putting the image in the correct place - below my navigation menu.
Photo of astroman

astroman

  • 9 Posts
  • 1 Reply Like
Hello again! Just looking at the Page Source view of your website, I see there is the following line in your customised bit of html

-->

which I don't think should be there. Try removing it from your html (it's the last line, after the "slash-div" in chevrons.
Photo of Seaview Flowers

Seaview Flowers

  • 99 Posts
  • 3 Reply Likes
Tried this but nothing still.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Is the HTML code all one color or different colors in the HTML widget? If ti is all like a yellowish color, that means it is commented out and you will need to remove the "<!--" from it in the HTML widget.

The <!-- and --> is only for this forum so you can see the code on the forum.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Seaview Flowers

I am sorry to hear that this is still not being resolved. Would you mind emailing support@yola.com ATTN: Sanja so that I can help you further?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Seaview Flowers

Just wanted to let you know that I received your email in support. I'll continue working with you from there.