Change header and navigation font, text size, etc?

  • 2
  • Question
  • Updated 7 years ago
  • Answered
Is there a way to change font and size of header text and navigation at this time?
Photo of Daria

Daria

  • 25 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 2
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Daria,

Yes, this is possible. For the header text, just click on the header text and a box will pop up. Then, put this in:


<font size="3" color="black" face="arial">TEXT GOES HERE</font>



Thats how you change the font size and color of the header.

Now for the navigation...

Click "Edit Navigation" A box will pop up. For each page, click "Settings". For the "Navigation Text" put:


<font size="3" color="black" face="arial">NAVIGATION TEXT HERE</font>



That's it! You can change "3" with the size you want, you can change "black" with the color you want, and you can change "arial" with the font you want. Also, remember to replace the uppercase text with the actual text you want in there.

I hope this helps

Nathan
Photo of Daria

Daria

  • 25 Posts
  • 0 Reply Likes
Thanks a bunch!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome! :)
Photo of Danny

Danny

  • 3 Posts
  • 0 Reply Likes
Is this the same place you would edit if you wanted to change the hover color? Im new to this and not sure if this is correct, basically when Im on my page I'd like the txt to change color when I hover over it?

Also, I have put txt down the side of my page (like a navigation), but when I add the links to each txt, some have a hover and some dont??
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello Danny,

All this is possible but it's not a plug-in feature. It requires some knowledge of HTML and CSS so if these aspects are familiar to you then it can be done.

If you decide to experiemnt then you really have to do it on a trial page and preferably a trial site. It can crash your site if there's something gone wrong. So when you get it right in your trial feature then you can copy and paste it into your active site.

Generally the hover, visited etc status is part of the style of the template. It is possible to change the defaults and it's easier now than it used to be.

View your page source code to see what it's set at and then copy the style sheet into notepad.

The hover on your menu items is different to link hovers. It uses either a Title attribute or an alt attribute as well as the primary title effect. So basically it's a tooltip. It is possible to change both the background and the text colours of the tooltip but it requires more coding still.
It may be worth your while looking at yola codesite under the groupings of tooltips. There's a really good one in there that I have used extensively for a similar purpose:"Cool DHTML tooltip script"- © Dynamic Drive DHTML code library. If you can't find it in the code site then you will locate it in dynamicdrive.com.
Make your changes and then paste the changed style at the highest accessible point of your page. This will then over-ride the default styling to your preferences.

It's a good practice to keep a copy of what you are working on right in front of you. People find that they lose their focus of the bigger picture if they work straight to the screen with multiple crashes and oversights. You can pre-emptively scan for potential conflicts and over-sights by having it all there. It's good practice.

If you paste it below a placeholder you may find that the default CSS will kick in again. One of the purposes of CSS is to have it cascading so that the most lower changes affect items below it and higher elements are styled by CSS styling above that.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, you don't have to paste it into notepad, you can just insert an HTML widget on the page with this in it:


&lt;style type="text/css"&gt;

CSS here

&lt;/style&gt;


Also, it doesn't have to be added at the highest point. It can be added any where if you want it to, but it is easier to access when it is at the top. I have posted some CSS to change the links' colors!

--
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi everyone! If you want to change the color of the links on hover, you can use some CSS! You can either change the links in the menu or the whole site. here is the CSS to change the color and style of the links in the menu:


&lt;style type="text/css"&gt;

#menu a:link, a:visited {

color:black;
text-decoration:none;
font-weight:normal,
}

#menu a:hover, a:visited:hover {

color:grey;
text-decoration:none;
font-weight:normal;
}

&lt;/style&gt;


Just insert this code into an HTML widget on the page.

You can change the colors and everything.

-For text-decoration, here is what is accepted: underline and none

-For font-weight, here is what is accepted: bold and none

Fir color, you can use any regular color or HEX code. For HEX color picker, go to: http://colorpicker.com and drag the picker around and then copy the HEX number and when you paste it in put a '#' in front of the numbers (without quotes) That will change the color to what you selected on that site. You can also just use regular colors (like black, green, etc.)

This will change the colors of the links in the navigation only. If you want it to change the color of all of the links on the page, take put "#menu" in front of the a:link, etc. and it will change to all links on the page!

I hope this helps!
Nathan
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Think I know that Nathan. !
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Sorry, I thought you where asking how to change the link colors of hover. I change it to "Hello everyone!"
Photo of Danny

Danny

  • 3 Posts
  • 0 Reply Likes
cheers for all the info guys, i will give it a go
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
I know this is an old post, but I wanted to comment on Nathan's suggestion for changing the header text.

Yes, there is. For the header text, click on the header text and a box will pop up. Put this in:

TEXT GOES HERE

Thats how you change the font size and color of the header!


That will work, but it will also change how your page reads in the search engines. It would be better to use the followup suggestions by making the changes to your header tag in a css file and uploading it to your file manager.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, that's exactly what I do now. I haven't used those old font tags for a long time now! :)
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
I know this topic is old, but I tried changing the header text's font but it didn't work, the size did, but not the font, I want the font Trebuchet, and after copying the code, I changed arial to trebuchet, but no change.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Sajid-M,
This could be browser specific, some browsers don't render certain fonts. Can you tell us what the URL is for the page you changed this on as well as what browser you are viewing your site in. Thanks.

Kind Regards,
Emmy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Sajid-M,

I think I know the problem. Back then, when I posted that, I wasn't that experienced in HTML. But, since then, I have gotten a lot better. I now know HTML, CSS, jQuery (a JavaScript library), and PHP.

Instead of using the font tag, I suggest using this:


<span style="font-size: 14px; font-family: Trebuchet, sans-serif; color: black;">TEXT GOES HERE</span>



You can change those values to whatever you want, but making sure that you keep the px at the end of the font-size and keeping the semicolons and other little symbols. And, of course, change "TEXT GOES HERE" to the text you want in your head text.

I hope this helps.

Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Sajid-M,

Please let us know if Nathan's suggestion helped!
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Sorry for not getting back sooner, but I was occupied, I tried the new code, and it definitely worked, I'm not sure if it is Trebuchet, as the M in Make is not the same as the one in the text below, but it's still good, thanks very much!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm so pleased to hear all is working now!