Indenting text in the heading text

  • 1
  • Question
  • Updated 7 years ago
  • Answered
OK, so I have managed to change the size and colour of the heading text on my website and have added a second line of text reading "Unlocking The Heart Of England" But it isn't in line with the main heading text, I have tried HTML to indent the second line of text but it wont move across can anybody help on this issue please?
The site is www.24-7lockouts.co.uk
Photo of Mark Woody Woodfield

Mark Woody Woodfield

  • 16 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mark Woody Woodfield,

I see what you mean. Did you try using:

 

For extra space? Try putting this right in front of the text on the header editing dialog:

    

You can keep adding more of those or less, just as much as you need. the "nbsp" stands for "No break space" which means no line break, just a space.

Hope this helps.

Kind regards,
Nathan
Photo of Mark Woody Woodfield

Mark Woody Woodfield

  • 16 Posts
  • 0 Reply Likes
Hi Nathan,

Thank you for your reply, I have done this but now the second line of text has moved down now, which was another problem I had when trying to indent.

Kind regards
Woody
Photo of Mark Woody Woodfield

Mark Woody Woodfield

  • 16 Posts
  • 0 Reply Likes
ps I have left the home page with the code
and the other pages without the code so you can see.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mark,

Did you add any extra <br /> tags? It looks like there is an extra <br /> tag. I viewed your source and it looks like this is what you entered into the heading:


<font color="#848484" face="Arial Black" size="8">24-7 Lockouts Ltd</font><p>&nbsp;&nbsp;<font color="#848484" face="Arial Black" size="2">Unlocking The Heart Of England<br></font><br></p>


Is that what you have in there? If so, the problem is the <p></p> wrapped around the text which is causing an extra line break.

Could you try removing the paragraph tags and see if that works?

Kind regards,
Nathan
Photo of Mark Woody Woodfield

Mark Woody Woodfield

  • 16 Posts
  • 0 Reply Likes
Hi Nathan,

I have removed the p & /p now and added a br tag which should by rights bring the second line of text up closer to the main body of text but it hasn't unfortunately, which is why I added the paragraph tags in the first place, as this did bring the text up closer, (strange but true lol)
if I leave the br tag out it just goes on the end of the first line of text and then goes across the image in the header.

Ideally I would like the second line of text starting at the 2 in 24 and just directly underneath the main heading if possible!

Kind regards
Mark
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mark,

Could you try replacing your current header code with this one:


<font color="#848484" face="Arial Black" size="8">24-7 Lockouts Ltd</font><br />&nbsp;&nbsp;<font color="#848484" face="Arial Black" size="2">Unlocking The Heart Of England</font>



You might need to add a couple more of those &nbsp; things for some extra space.

Please let me know how this goes for you.

Kind regards,
Nathan
Photo of Mark Woody Woodfield

Mark Woody Woodfield

  • 16 Posts
  • 0 Reply Likes
Hi Nathan,

I have copied and past the above code into the home page but alas the second line of text is still too low :(
The indentation is fine but not the paragraph or line break distance from the main heading of text.

Kind regards
Mark
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Mark,

In addition to the code that Nathan suggested you try, you also need to change the default text size in your Site CSS. Here's the code you need:

div.layout div#sys_banner h1 {
font-size:8px;
}

That should close up the gap. You will need to add a couple more &nbsp; to your page heading to shift the bottom line over to the right a bit so that it aligns with the "2".

I hope that helps!
Photo of Mark Woody Woodfield

Mark Woody Woodfield

  • 16 Posts
  • 0 Reply Likes
Hello Sanja,

Thank you for your reply and input, brilliant its sorted it all out thank you.

Nathan, thank you too my friend for assisting me, between the both of you we've got it all sorted and I'm very happy.

Kind regards
Mark
Photo of Mark Woody Woodfield

Mark Woody Woodfield

  • 16 Posts
  • 0 Reply Likes
Ok, maybe a little bit of jumping the gun here, as now it seems I cant publish my site or is this a problem with Yola at this time?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, this is a problem with Yola. Stay updated here: Yola is experiencing a DoS Attack.

Nathan
Photo of Mark Woody Woodfield

Mark Woody Woodfield

  • 16 Posts
  • 0 Reply Likes
yes I read some of the other posts, its now published Nathan, thank you and all is well ;-)
Photo of Once Upon A Sheep

Once Upon A Sheep

  • 7 Posts
  • 0 Reply Likes
Can I ask details of how this was accomplished please? Since I can't seem to edit the html I'm at a loss as to where to add things like br tags or nbsp ?

Or should I start a new topic since this one is from five months ago?

Thanks.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello,

Thanks for your question. In order to edit your site CSS, you will need to upgrade your account to Yola Silver. Please let us know if you have any further questions!
Photo of Once Upon A Sheep

Once Upon A Sheep

  • 7 Posts
  • 0 Reply Likes
Brianna,

I do have a Yola Silver account. However, my question is not just about the css but also how this particular user was able to add a subtitle (or tagline) under his header as I do not see a place to do that nor have I been able to find a tutorial regarding this.

I will begin a new topic specific to my problem. Thanks for your time.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Once Upon A Sheep

If you want to add a tagline to the header title, you can add HTML directly into the box provided. So for example, if your heading is: My Website and you want a tagline, you would add it like this:

My Website <br /> My tagline

I hope that answers your questions. Let us know if you need more help.

Nazlie