how can i align the page title?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I m using the rounded glass style. So, my page title is on the left side of my banner. I would like to align the page title so that it will be on the right side of my banner or out of banner borders. Is there a way to do so?

http://www.turkishtranslationservices.com
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello oktay,
Can you please tell us what area you are specifically referring to, the very top page heading of "Global Translation Agency - Istanbul-Turkey"? Are just wanting to move it so that it is aligned flush up against the right end of the gray menu area?

Kind Regards,
Emmy
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes
sorry i posted the wrong web address. Here is the website i m working on:

http://turkishtranslationservices.yol...

I want to align "PAGE HEADING" . As you see it is on my banner. I want to move it where i need it. Or to be out of banner borders at least. Is there a way to do so?

And can I change the PAGE HEADING text color?

Thanks in advance.

Oktay
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hello oktay

Thanks for the link. I see that you are a Yola Silver member and so you are able to change the location of the Page Heading and the color by editing the site CSS.

Be sure to uncheck the "Disable Site CSS Overrides" box at the bottom of the Site CSS page so that your site CSS edits show up on the site.

You would edit this section of the site CSS:

div.layout div#sys_banner h1 a {
color:#fff;
padding:0 15px;
margin:0;
text-decoration:none;
}

To change the location, you can add margin values. For example, if you want to move the page heading down, add margin-top: 100px; so that the code above will change to:

div.layout div#sys_banner h1 a {
color:#fff;
padding:0 15px;
margin-top: 100px;
text-decoration:none;
}

You can change the color values too. You can use hex values to change the code. For more help with the web-friendly color codes, see the HTML color code chart.

For more information about CSS, see the W3Cschools tutorials.

Hope this is helpful!

Nazlie
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes
Thank you very much for the precious information.

Have a nice day.

www.turkishtranslationservices.com
Photo of Justine

Justine

  • 751 Posts
  • 45 Reply Likes
It's always a pleasure to help, oktay!
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes
I managed to change the page heading color but could not manage to move the page heading. It moves to left and right but not to top or bottom.

I used lots of versions of these codes below but it does not move to top or bottom:

div.layout div#sys_banner h1 a {
color:#66ccff;
padding:0 15px;
margin-bottom:40px;
text-decoration:none;

div.layout div#sys_banner h1 a {
color:#66ccff;
padding:0 15px;
margin-bottom:0 0 40px 80px ;
text-decoration:none;

Could you please help on that problem?

Thanks in advance.

Oktay
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Oktay,
I'm going to ask Nazlie to take another look at this. She's not online, however when she returns she will be able to take another look at this. Thanks for your patience in the meantime.

Kind Regards,
Emmy
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes
ok. thanks Emmy.
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes
still no answer to my question?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi oktay,
Nazlie will certainly reply to this thread when she returns, which is tomorrow. We certainly appreciate your cooperation with this!
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi oktay

I have looked at the code and I think I see the problem.

Try using this:
div.layout div#sys_banner h1 a {
color:#66ccff;
padding:0 15px;
margin: 0 0 40px 80px ;
text-decoration:none;

I removed the margin-bottom from the code. Now the code will move the text down and to the right. You can change the last number (80) to move the margin further to the right or less to the right. The larger the number, the further to the right it will move.

Hope this works! Let us know if you need more help.

Nazlie
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes
Hi Nazlie,

I have tried your suggestion. It moves to left and right but not up or down. I changed the numbers lots of times but no movements up or down.

What can we do about it?

Thanks in advance.

Have a a nice day.

Oktay
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello oktay,

I took a look in your Site CSS to see why this was not working. It appears that you have copied and pasted all the Site CSS codes into the left-hand side. This makes it difficult for to navigate through all your codes and the codes could be affecting one another. You should only be coping the pertinent pieces you need to tweak your site. Please remove all the codes that you are not using to edit your site. Once you have done this, Nazlie and I would be happy to assist further.
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes
Hi Sanja,

Sorry not to write before, I was on holiday last week. I tried the way you told me and removed all the codes on the left side and just copy-pasted the codes Nazlie had given. Still there is no change. Could you please have a look.

Thanks in advance.

Oktay
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello oktay,

No worries! I hope you had a lovely vacation :)

I took a look at your codes and I believe this is the correct code you need to add to your Site CSS:

div.ys_layout div#sys_banner h1 a {
color:#5dc4d3;
text-decoration:none;
}

div.ys_layout div#sys_banner h1 {
margin:57px 0 0 40px;
font-size:32px;
}

You can adjust the color (#5dc4d3) as needed and the font-size (32px). To move the page heading up and down, adjust the first number in the margin (57px).

Please let me know if you have any further trouble with this.
Photo of turkanemlak

turkanemlak

  • 39 Posts
  • 0 Reply Likes
Now it works fine. Thank you Sanja.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great to hear oktay! It was a pleasure to help.