How do I move the position of the page header on the banner?

  • 1
  • Question
  • Updated 5 years ago
  • Answered
The arrows to drag it don't appear as with the widgets, and attempting to drag only opens the page to edit it. I found the code to change the colour and font -- is there code (or another method) to move the position?
Photo of habannah

habannah

  • 4 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Justine

Justine

  • 751 Posts
  • 45 Reply Likes
Hi habannah,

This question requires feedback from our HTML team. I have referred your question to them and they'll get back to you within 48 hours.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Habannah,

If you could share your URL, I may be able to provide you with the necessary CSS code to move the header.

Could you also share with me whether you are a Yola Free user or a Yola Silver user.

Kind Regards,

Andi
Photo of habannah

habannah

  • 4 Posts
  • 0 Reply Likes
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Where would you like it to be positioned?

Top / Middle / Bottom
Left / Right / Centre

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Bottom Left: (Without the <!--- and --->)
<!---

<style type="text/css">

#sys_banner h1 {
margin-left:-600px;
margin-top:100px;
margin-right:0;
padding: 0px;
}

</style>

--->

Add this to every page on your website and it will move the text to the bottom left of the banner image! You can also change the color of the text by adding:

color: #000; /*Add this after the Padding:0px*/ Html Color Codes can be found here

You can change the font:
font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans serif;

You can change the font size
font-size: 14pt;

Hope this helps.

Andi
Photo of habannah

habannah

  • 4 Posts
  • 0 Reply Likes
Thanks, but your answer is too complicated for me :( I want the text to appear on the bottom of the banner, in the centre. I already have this coding in there (without the <!--- and --->):

<!--- <center><a xmlns="http://www.w3.org/1999/xhtml">&lt;font color="#cc9900" face="Verdana" size="4">Julie Dupuis, Natural Nomad</font></a></center> --->

Everything is already perfect, except I want the text at the bottom of the banner, not the middle. Are you able to tell me exactly what to input, using what I've already got (or improving it if it was wrongly done)?

Thanks again!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Habanna,

Try this code: (Without the <!--- and --->)

<!---

<centre><a xmlns="http://www3.org/1999/xhtml" style="margin-top:100px;"><font color="#cc9900" face="Verdana" size="4">Julie Dupuis, Natural Nomad</font></a></center>

--->

This code is the same as you have stated above but, it adds a 100px Margin to the top - pushing the text to the bottom of the banner.

Hope this helps you,

If you need any further clarification, please let me know.

Andi
Photo of habannah

habannah

  • 4 Posts
  • 0 Reply Likes
Thanks, Andi! I had to make a few adjustments to the wording and layout of the code, but it worked out really well! :)

This is what ended up working best (without the <!--- and --->):

<!---<center><a xmlns="http://www3.org/1999/xhtml" <style type="text/css"> #sys_banner h1 { margin-top:80px; } </style><font color="#cc9900" face="Verdana" size="4">Julie Dupuis, Natural Nomad</font></a></center>--->

If you want to check it out, I paid for the domain name so the link changed: JulieDupuis-NaturalNomad.com

Cheers!
Photo of Angel

Angel

  • 11 Posts
  • 0 Reply Likes
Hello,

I'd like to move my header but i'd prefer to use CSS if you could help. Thank you.
Photo of Angel

Angel

  • 11 Posts
  • 0 Reply Likes
I would just like to move the header down a bit. Its really up high on the page and i prefer it being by the nav bar. thanks again.
Photo of Peter Williamson

Peter Williamson

  • 6 Posts
  • 0 Reply Likes
I need to use CSS to move my header to the bottom center of my banner for all pages.

I am a Yola Silver member. Please help!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Peter

In order for us to be able to assist you, please provide your URL. I'll be happy to check what I can do for you.
Photo of Peter Williamson

Peter Williamson

  • 6 Posts
  • 0 Reply Likes
Hi Stefan,

Here's the current URL (I am waiting to buy after I'm finished editing it): http://ampm2013.yolasite.com

I want it to look like this (iWeb image):
Photo of Peter Williamson

Peter Williamson

  • 6 Posts
  • 0 Reply Likes
I'd also like the banner to move up, so there's not an awkward space where the header used to be...
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Peter

I've tinkered around a little for you, and I think what I set up on a test page on your website should be close to what you're trying to achieve.

The test page is named "Yola Support Test", it's not in your main menu, and you can delete it yourself at any time.

To achieve the design you want, you will need to add your banner image to the page heading section by using HTML code. The picture needs to be recropped to fit in perfectly – your best bet is to do this with an external image editing tool, such as the free Pixlr Editor, and then upload it to Yola.

The desired font type of the page heading may be a bit of a problem – it's probably best if you add it to your image with the image editing tool as a fix part of the image.

Lastly, you will need to undisplay the banner image and overlay area. To make this effective on just the test page for now, I've added the necessary code inline to an HTML Widget. To apply it to all pages you will need to add it to the Site CSS Editor.

If you need any further assistance, please let me know.
Photo of Peter Williamson

Peter Williamson

  • 6 Posts
  • 0 Reply Likes
Thank you Stefan, that helped a lot!