Change Heading Text to Image

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

Is there any way I can change the Page Heading to an image rather than text? I know I can change the Banner image, but I'm looking to change the heading to an image and keep the banner. Any fancy CSS or HTML that can help me with this? Using the Corporate Green template by the way.
Photo of Chaz

Chaz

  • 14 Posts
  • 0 Reply Likes
  • Curious

Posted 8 years ago

  • 1
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Chaz that's pretty easy...

1) Click on the page heading text and the popup box will appear for you to type your heading into.



2) After you edit the file (honeybearheader) name and ALT text paste the following code into the place provided for the heading text.

<img style="margin: 4px; padding: 0px;" src="resources/honeybearheader.png" alt="honeybearheader">&nbsp;



Verify image placement in place of your heading text.



That should do it...

By the way check out any of the logo generators in my tips thread and set the background to transparent PNG. I used the Cooltext.com generator to produce the Honeybearheader.png file you see above.

Happy site building
Ed

If the lady bears don’t find you handsome they should at least find you handy...Please share my website with your friends online....

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Oh and you might not want to use a text/logo generator with the shadow enabled as the shadow makes the image taller and the space between the top of the website and the top of the glossy bar will expand which might look off.

The image below has no shadow while the one above does have a shadow.

Photo of Chaz

Chaz

  • 14 Posts
  • 0 Reply Likes
Works great! ThanX :D
Photo of diego

diego

  • 4 Posts
  • 0 Reply Likes
Hello , sorry im new here and i have a question about this.
When you say "edit the file" you mean edit a header picture outside yola , or aditing someway into the website builder ?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi diego,

I believe that Ed is referring to the image you wish to use - editing this so that it suits your needs by using photo editing program.

Ed, if I'm wrong, please do let us know! Thanks :)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Sanja I already answered below at the bottom in regards to editing the code to reflect the image location... ;)

Ever since GS started hiding replies answering questions became a game of hide and seek. I wish that they wouldn't hide posts and make a person click that damn "View X more comments".
Photo of will.floyd.95

will.floyd.95

  • 3 Posts
  • 0 Reply Likes
Hi, doesn't seem to be working for me :(

How do I edit the ALT text of an image? I've renamed the file honeybearheader, but I've tried using a different name and changing the html accordingly, but all I seem to get on that site is the little blue box with a question mark inside, standing for a failed picture.

Do you know if there are any size requirements?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Will.floyd.95,

Could you please paste the HTML Code you have used on to this forum for us to check out for you.

Please add <!--- to the start and ---> to the end of the code when pasting on the forum as this stops the thread from 'actioning' the code.

Andi
Photo of will.floyd.95

will.floyd.95

  • 3 Posts
  • 0 Reply Likes
<!---<img style="margin: 4px; padding: 0px;" src="resources/gshockonline " alt="gshockonline">  --->

That's the HTML code i've been trying to use. Bascially my picture is a logo which is saved as gshockonline, in my pictures.

The exact location is: Computer>OS:C>Users>Will>My Pictures>gshockonline

I've tried putting that in the 'source' part of the HTML code, but with no joy. It seems to be nearly working because of the little blue box with a question mark inside, but I think a few tweaks need to be made in order to make sure it's correct.

Thanks for your help.

Will
Photo of Parthiv

Parthiv

  • 126 Posts
  • 10 Reply Likes
Make sure the file is uploaded to your site and then change the code to:
<!--
<img style="margin: 4px; padding: 0px;" src="resources/gshockonline.jpg" alt="gshockonline">
-->
You can see I've added a '.jpg' to the end. (You need to have a file extension, so change it to whatever file type the image is.)
Photo of will.floyd.95

will.floyd.95

  • 3 Posts
  • 0 Reply Likes
Thanks Parthiv! That seems to have done the trick! The problem I was having is that the file wasn't uploaded to the site first..such a simple but annoying error!
Photo of Parthiv

Parthiv

  • 126 Posts
  • 10 Reply Likes
No problem! :)
Photo of Richard

Richard

  • 12 Posts
  • 0 Reply Likes
Hi Chaz,

As a newcomer I found this magical and Cooltext is great!

Are there any other like sites for banners etc that we can use?

Cheers
Photo of Parthiv

Parthiv

  • 126 Posts
  • 10 Reply Likes
There are a few others, but personally I feel CoolText is the best.
Photo of diego

diego

  • 4 Posts
  • 0 Reply Likes
Hello , sorry im new and i have a question about this.
When you say "edit the file" you mean edit header picture with a external program or edit into yola builder ?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Diego...

I mean edit the image name... ;)

The code that you should be using is:

For a PNG image

<img style="margin: 4px; padding: 0px;" src="resources/MYIMAGE.png">

or for a JPG image

<img style="margin: 4px; padding: 0px;" src="resources/MYIMAGE.jpg">

or for a GIF image

<img style="margin: 4px; padding: 0px;" src="resources/MYIMAGE.gif">

Just edit the code to reflect the location/file name of your logo and paste it into your header box.

*Always try this on a test page first*

It is best to make your logo as a transparent PNG or transparent GIF so that it does not show it's colored background and ruin the look of your banner.

You can find a ton of free resources to help you create a free logo and even how to make the background transparent if you don't already know how in my tips thread.

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of diego

diego

  • 4 Posts
  • 0 Reply Likes
thanks a lot for the quick response.
i already made my text on cooltext.com with transparency.
can you now tell me the steps to upload logo ?
my code is
but does not work because i think i have to upload the file first.
Photo of Parthiv

Parthiv

  • 126 Posts
  • 10 Reply Likes
I can't see your code, but yes, you have to upload the file first.
Photo of diego

diego

  • 4 Posts
  • 0 Reply Likes
got it , thanks so much.
Photo of Parthiv

Parthiv

  • 126 Posts
  • 10 Reply Likes
We're all glad to be of help! :)