How can I edit the menu bar and menu text

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Hi Gop,

1. I would like to change my current menu to run vertically instead of horizontally?. Do I have change my template or can i change it another way?

2. How can i upload a font that I'd like to use for my menu text and position it exactly where i want it to be.

Hope you can help.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Lei Ling,

To run a site wide menu that runs vertically you would be best to choose an alternative style with a vert menu.

Within a menu, positioning the text exactly is not something that is offered. This tends to be set within the menu style.

You can upload other fonts to your site.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Thanks Gop,

Can i change the text font in the menu by changing it in the CSS? The option for uploading a font only applies to the text box.

How can I delete the scroll bar on the right on the index page, I managed for it not to appear on the 3 last pages but it's showing on the index page.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok i figured out that if you don't have any widgets on the a page then no scroll bar appears but once you apply 1 widget or more it appears.

Is there anyway that this can be removed permanently?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Lei Ling,

The appearance of the scroll bar you are referring to I think harks back to your query regarding a background image. I'll presume this: so if you have set your background to just fit the screen size of a blank page then by adding anything you will automatically add length to the page and although you may see your content in fact the page may have extended beyond the aperture of the page and thus the sitebuilder recognises this. This is not really a problem per se it's simply a prompt. This may also be different for different viewers with different screen resolutions. Once again you can test this by changing screen res as mentioned in a previous post.

I think setting your background to "no scroll "will lock the image and only scroll the content. This then appears as content scrolling on a fixed background. If you set it to scroll then the content is locked onto the image and if it projects or in facct the reserved area projects beyond the page aperture then the system prompts for scrolling with the appearance of a vertical scroll bar.

This is really hard to balance. It's a trial and error solution and it can drive you mad. Probably it has no effect on your viewers but I understand your desire for perfection. Try, try, try and if it doesn't work and you've given it all you've got then allow it to be.....gracefully :)
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Yes I've opted for the background to be set and the content to scroll. My problem is that the content scrolls right to the very top of the page which I don't want. In my background image I have a 'top banner' type design and the content scrolls over it which looks very untidy:( I guess there's no way to condition the scroll bar to stop in a certain place? haha....:(
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes there is. It's to do with the reserved container area of which I have never modified. Stefan maybe able to get this info for you.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok great!

Stephan the current reserved container area code is as follows:

#container {
/*width: 90%;
margin: 10px auto;
max-width:1024px;
*/

width: 900px;
;
margin: 0px auto;
}

What should I play around with to see if I can set the scroll bar to stop about two thirds from the top section of the page?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Lei Ling

If you have successfully uploaded your custom font and it works with the Text Widget, you can add it to other text sections by editing your Site CSS. You will have different text areas, such as the headlines (h1, h2, h3 ...), header section, sys_text section, etc. The best thing to find out what changes what is to go to your Site CSS, edit some sections and check in the Preview box of the CSS Editor what effect it has.

Styles are all different, so they may have different tag names for text sections.

I'm afraid I don't quite understand what you mean by removing the scroll bar. The scroll bar is automatically shown by your browser if a page is larger than what your screen covers. If you have further questions on this, I will need to know your URL, the website, and the page you are referring to. Thanks.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Stefan,

Re: font yes i have tried editing it in the CSS but maybe I'm getting the code wrong?

An example of the code here with the standard font is:

body {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #333333;
background-color:#FFFFFF;
background-image: url(resources/D01%20Web%20HOME%20CMYK%20-%20test.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}

and I've changed it to:

body {
font-family: "electramaniacal";
font-size: 0px;
color: #000000;
background-color:#FFFFFF;
background-image: url(resources/D01%20Web%20HOME%20CMYK%20-%20test.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}

but not changes are applied. Am i doing something wrong re: code?

Re: scroll bar ok i guess there's not much i can do about that...
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
By the way, I've added the electramaniacal font in all the code not just the body and the menu text has still not changed. Please help with the code above and let me know if it's correct or not.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Lei Ling what may be happening is that you are duplicating the instructions for the body text. You are leaving the original in the first para and then replacing it in the second? You must only place the replacement code in the CSS over-rides and not the original.

This may cause the first ( original)to over-ride the second (custom). This applies to all CSS over-ride code.

This may also have happened way back so you should review all the CSS over-rides and see if the original appears anywhere within the over-rides area.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Gop,

No I'm not placing the original in the over-ride, I've only replaced the new font as below:

body {
font-family: "electramaniacal";
font-size: 0px;
color: #000000;
background-color:#FFFFFF;
background-image: url(resources/D01%20Web%20HOME%20CMYK%20-%20test.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}

Is this correct? The font still does not change.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok, repeating the download from where from the site that I originally downloaded it from? Please confirm...

Trial later this evening great! Would REALLY appreciate this.

Re: IE, the font type for IE is otf and for FF it's ttf. So what you're saying is that I should research the font requirements in IE?

I have uploaded the otf in File Manager but it then cannot be selected as a file. When you click on it, the file does not get selected. What statement in the code are you referring to?

What I did was open up a HTML box, place the code given to me when I convert the file from ttf to otf and still nothing changed.

Sigh...We gotta get this right Gop:(
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Lei Ling,

This is considered a "bulletproof font-face syntax"
Apparently the querystring after the .eot font helps IE not choke. If you don't have .svg or .woff versions of your fonts, just remove those lines.
Ref:http://stackoverflow.com/questions/89...

The generic solution follows. You need to replace your specific font name and the URL of the font file in the code.

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}


I will do the download trial this morning (local time).
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Lei Ling,

I have downloaded the font and applied it to my font folder locally. I was able to use the font within applications such as Word and Photoshop.

I then uploaded the Font through Yola's facility directly as a heading replacement but it would not render. I looked at the file specifically in the file manager and the file is noted but not visible. It defaults to Times Roman.

I then went to Fonts Squirrel to create the various file types and like yourself it gave an error saying that: "the font is corrupt and cannot be converted"

This means that I cannot produce a file font of other file types and I am unable to proceed with this font.

You may be able to find a similar font in the various respositories on the web and try another.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Gop,

I'm not sure what is meant by "bulletproof font-face syntax" ?

I will try the code above and replace it with the font name and url etc...

I'm using FF and IE but will try it on both.

So after you've tried the process and see what I'm having to deal with, you're telling me that there's NO WAY that this font can work on Yola? Why? Is it the font or is it Yola?

I'm really not happy as this messes up everything for me..

:(
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It's the font Lei Ling.
The bullet proof won't work either as the foundation font can't be converted with squrrel.

There is a site with a collection of futuristic fonts of this genre that you may like to review and pick another similar font. There are thousands ou there so you will probably find a suitable replacement.

see: http://www.fontspace.com/category/fut...

I would say that this kind of thing has happened to every adventurous site creator occassionally. As mentioned previously you try and if it can't work out then you need to move on to another solution.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Lei Ling

I will need to have a look at your Yola account, also with regard to your scroll bar issue. Can you please provide your URL? Using your forum e-mail address, I can only find a Yola Free account in our system, and you can't edit the Site CSS with Yola Free.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Stephan, I'm currently on the silver package. All the changes that i've been referring to is not published yet. I've placed a picture on the index page that's currently displayed on the site so long. Everything that I've inquired about has not been published and I cannot publish it until it's sorted. With that being said, there's nothing that you can do if I give you the URL.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Lei Ling

If you're comfortable with giving me your login e-mail (not your password) instead, I will be able to look into your account.

If you want me to do that, can I please ask you to list all your unanswered questions in a 1., 2., 3. list again because I've been losing track about what you need assistance with on this thread. Thanks. :-)
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok will list them now...

Is there any other way I can send it to you besides this thread?

I'd prefer email
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
List:

1. Font issue: Gop is helping me with this, too long to retype.

2. The current reserved container area code is as follows:

#container {
/*width: 90%;
margin: 10px auto;
max-width:1024px;
*/

width: 900px;
;
margin: 0px auto;
}

What should I play around with to see if I can set the scroll bar to stop about two thirds from the top section of the page?

That's it. The font is VERY IMPORTANT!

Thanks!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Lei Ling

I still can't locate your Yola account in our system because I don't have the necessary information like your login e-mail. If you prefer e-mail, you can e-mail our support using our Contact Support Form, but I'd suggest to refrain from contacting us via two channels (forum and e-mail) at the same time because it may cause confusion.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Stephan,

Here you go: delite@starmail.co.za

Thanks.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Lei Ling,

I just noticed something in your code. You have set your font size to 0px; that may mean that no font is displayed as it is always 0 pixels in size. I would change that to say 12 pixels and see what the outcome is. If it works then you can tweak the size to suit your site? maybe??
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Gop,

Yes i saw that too and changed it but still nothing happens...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Thanks.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Gop,

So what do you now, i tried to download it again from the original site and it WORKED on the HEADER font! I guess you gotta keep trying!

Now I'm more determined to get this code right for the MENU text. With that being said, can you check this code for me and give me a code that can be applied on the html text widget with the electramaniacal font? This is the entire menu font in the CSS section of my Yola account.

#menu {
font-family:electramaniacal;
margin: -170px;
margin-left:-30px;
margin-right: 1500px;
font-size: 20px;
border-bottom:none 1px #CCCCCC;
}

#menu ul {
list-style: electramaniacal;
float:left;
margin-left:0px;
padding:10px;
}

#menu ul li {
display: inline;
font-size:larger;
padding-right:20px;
}

#menu ul li a {
text-decoration:none;
font-size:14px;
}
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
If you're referring to the font re: menu, that's the font that's in the code and even if I change it to electramaniacal nothing happens.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. That then presumably is the Yola set over-ride.

You need to look at the sys-txt settings in your over-rides as mentioned above.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok. Please check now. I've replaced it with electramanical.

I've tried that several times and still nothing changes unless I'm replacing the code incorrectly?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
There's an over-ride there as mentioned and this may be the issue now:

<style id='yola-css-fonts-overrides' type="text/css">

@import url('http://fonts.googleapis.com/css?family=Raleway:100|Goudy+Bookletter+1911');.content, #content, .HTML_Default, .Text_Default, .sys_txt {font-family: Goudy Bookletter 1911;}.sys_navigation, #sys_heading, div#heading_wrapper a, div#menu ul, H1, H2, H3, H4, H5, H6, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content_wrapper #content_inner_wrapper h1, #content_wrapper #content_inner_wrapper h2, #content_wrapper #content_inner_wrapper h3, #content_wrapper #content_inner_wrapper h4, #headline_wrapper a,div#menu ul li a, a#sys_heading, .decay, .decay-small, .ys_menu_2 {font-family: Raleway;}
</style>


This is the font that is showing in the menu.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
This is the site CSS code:

font-family: "Lucida Grande","Arial Unicode MS", sans-serif;'

This is what I've changed it to on my other website (which shows the electramaniacal font correctly)

font-family: "electramaniacal","Arial Unicode MS", sans-serif;

What I've noticed is the font in the 'body' css code as above is where the font change takes place and not in the sys_text section. I tested this on the other site and that's where the change takes place. If I remove "Lucinda Grande" the font disappears. If I type in "Electramaniacal" it changes to that font. Note: this is all on the other site and note the one you're looking at now which is not working...
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok, so how do I remove the over-ride? I'm not 100% fimiliar with html code
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
What is the Style of this site?
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Sorry it was on No Frills now and I've just changed it to Clean Slate as this is what I would like to use going forward. I've just republished it.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That font is still carrying through which suggests it is a custom added font.

I don't know how to delete a custom added font. My only solution would be to start a new site with Clean Slate.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok and how would I start a new site? This is a custom domain which I purchased. (Sorry that I'm typing in a new block all the time but the comment button decides to work when it wants to).
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's not a problem.

Unpublish your site.

Delete the current file in your My Yola

Create a new site and publish to your domain. (when you Unpublish the site and then Delete the file it releases the domain back for your use as a fresh domain )
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok let me do that quickly...
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok I've unpublished it and republished it. So what do I do now re: code? Should I deleted the code in the CSS Over-rides and paste the site CSS code in there then change the font and see what happens?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
No. Not correct.

Unpublish
Delete your site completely...gone..goodbye..no trace left.

Create a new file. ie: start from the beginning.

Publish to your custom domain.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
To Delete a Site:

Site>SiteSettings>Site Properties>Delete Site.

To Create a new site:

Site>New Site...
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok once I've selected Unpublish site do I then select Delete site? I'm so scared right now lol...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It's actually not too hard.

It requires that you upload three other electramaniacal font files:

ttf, eot, svg and woff.

Then add some CSS to your site using a fairly new command in HTML @font-face. This then inspects the users browser for what it is and allows the correct font to be used for their specific browser. It's a bullet-proof fix as it is known.

@font-face {
font-family: "electramaniacal";
src: url('resources/electramaniacal.eot');
src: url('resources/electramaniacal.eot?#iefix') format('embedded-opentype'),
url('resources/electramaniacal.woff') format('woff'),
url('resources/electramaniacal.ttf') format('truetype'),
url('resources/electramaniacal.svg#quartzregular') format('svg');
font-weight: normal;
font-style: normal;
}


I still have to work out clearly how to use it though. I would keep it in a safe place and not use it unless you are having issues with specific users browsers.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok, I actually tried uploading the fonts you sent me via email (thanks for that by the way). ttf is the only font that can be selected in File Manager. eot and woff uploads but cannot be selected and svg doesn't download from the email you sent.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
I will deal with that when the need arises...for now I'm sorted regarding the font.

I do have one more question though. How do I place widgets next to each other instead of on top of each other?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Use the Divided column widget. That allows you to add any number of things siide by side; text, images;HTML

You can keep placing additional Divided Column widgets inside each other to end up with as many as you need.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The other font files are in your File manager but can't be specifically selected?
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Now I can delete this post and all these threads? I don't want people to get confused because so much has been said on here.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I wouldn't worry. I doubt that any will work their way through the dialogue for such a specific task. Plus it needs Yola to delete it because there are other posters involved. Forget about it is my suggestion.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Divided column widget great! How come I never saw that there hmmmm...

Can't be selected yes. Can we deal with that on another day? It's almost 11pm on this side of the world:)

Thanks again Gop. Will be on soon as I'm sure I'll be needing your help again...

Ciao for now
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Your 4 hours behind then.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
That's good to know, now I know when to pop on:)