Loading Profile...
I'd like to change the main fonts
How do I change the fonts of the buttons or the main one in the text widget, or in any other part of the site?
I’m unsure
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The best answer from the company
-
Just a word about editing the CSS - unless you know CSS you can easily break your page. Often everything looks fine at first, but when you navigate to another page and come back again the problem can manifest.
There is some useful advise on this thread, but before you use any of this code, please test it on a new page, or better yet - a new test site - before applying it to a page with content you have been working on.
We share this cautionary advice all the time, but I am posting it here as the suggestions made on this thread are particularly risky.
Very sorry that my word of caution comes too late for one person who has lost a lot of hard work. We are all really sorry when this happens and wish we could turn back time and make it all better again. (Engineers are working on a time travel device as we speak)
The company says
this answers the question
-
Inappropriate?Hello TiagoJ7,
At this time it is not possible to change the font attributes of the menu buttons or the headers located in the banner image as these are set by the style.
You can change the attributes of font in a text widget such as the style, color and size! To do this please highlight the text you would like to change and make the changes using the edit toolbar.
Please let us know if you have further questions.
Kind Regards,
Emmy -
Inappropriate?Hi
I'm sure there are a couple of methods to change the default font color/size of the menu buttons (and to make them change color when you hover over with your mouse).
I have done this on my site www.bodyfocus.net.au let me know if this is what you're after and i will post code.
michelle17 Comments Add a comment
This answers the question
-
Hi Michelle
Would you mind sharing your code? I'm always eager to learn new tricks! =) -
hi littleus
this is the code i have used. i have it in a separate html widget on each of my pages, but it will only change the appearance of your main text if you are using html widgets, not text widgets.
michelle
<!--
<!--<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #666666;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #88CC00;
}
a:link {
color: #666666;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: underline;
}
a:hover {
color: #88CC00;
text-decoration: none;
}
a:active {
color: #666666;
text-decoration: underline;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}
-->
--!>
--!> -
Thanks so much Michelle. Can this be applied to any template or only specific ones?
-
It's not what I'm looking for, but it's a nice thing to add. Thanks.
-
hi littleus - i haven't tried my code on any other template except cleanslate...
i did manage to add a background image to the default menu by adding the following code to my original above (and change the font style, weight, etc)
<!--
span.button {
background-image: url('resources/button.gif');
background-repeat: no-repeat;
background-position: center center;
border: 0px; padding: 20px 0px 20px 0px;
white-space: pre;
font-weight: bold;
font-style: italic;
}
--!>
you need to add <!--<span style="button"> menu item </span>--!> in the 'edit menu' section - the same method as in the link you posted below. you need to adjust with the spacing before and after your menu heading (what the white-space: pre is for), and the padding so the image fits.
i've only just had quick play around, but it seems like you can change the default menu's font style/weight/colour/background or even add text as an (background) image. i've been hesitant to move away from the default menu because i read google can't tell what images are, and that text is always better for SEO. i know others here have used various menu generators, but i'm going to experiment with this method further because i'm unsure (i did see boomer's caution below too so my method may not be good either)
... anyway it's always fun trying out new stuff :) -
hi Michelle,
The text vs image SEO stuff seems to be true but there is another trick and that is to give your image a very descriptive name. Search engines are very aware of file names. -
thanks peter - i didn't know about the file names. i'll have to edit the ones i have with this in mind!
-
Me too !
-
Michelle - that code doesn't work for me. =(
You said to insert a Widget box and paste that code.... nothing happens? -
Hello Marcela,
Are you removing the < !-- and the -- > at the beginning and end? Also, can you try pasting the code into an html widget to see if that makes a difference. The html widget is a blue circle on the Content Sidebar. -
Thanks Emmy, that DID work. However, how can I change the font to 'Bradley Hand' and made the default colour WHITE and the hover over colour RED?
-
for the hover colour change = a:hover { color: #e72f35
thats a red color code -
for the white default change style 1 or style 2 colour code to #ffffff ,thats the color code for white - i don't know which 1 its is as ive never used this code , just try 1 of them has to work. where it says veranda change that to bradley hand - it may or may not work, i don't know if it will recognise it
CSS almost reads like normal text - white= #ffffff / red= #e72f35
Lee. -
Ok the RED worked... The white didn't.. =(
You said to either paste #ffffff in stye 1 OR 2, right??
Neither work... even pasting the code in both styles doesn't work. =(
UPDATE: Ok i changed all the colour codes to #ffffff (apart from the hover colour) and it worked...
Now it's on to the font style....................... -
Marcela.. it looks like you have too many "f". Make sure there's only 6 "f"s.
-
Yes I have only 6 f's... it's worked. Thanks.
I'm having trouble changing the font though, anyone know how I can do this?? I'm wanting Bradley Hand in Bold.
Thanks -
im not sure if bradley hand is a font that is recognised in code by browsers. It would be easier doing it from within the editor - or is it the menu fonts your trying to change?
-
Menu Fonts...
Home
About
etc... -
Inappropriate?@tiagoJ7 - what is it exactly you want to achieve - maybe i can help.
The above changes the CSS of the page, but if that does not work there will be another workaround - Lee.
2 Comments Add a comment
This answers the question
-
Each style has its own colors, fonts, banners (or banner's size), etc. I'd like to be able to make my own style. My own colors, banners, fonts,... Since I can't do that, perhaps I could change some things in my chosen style, like the default font in the buttons, or the font I have available first right when I create a new Text Widget.
-
i see what your saying - i think some extra design features are on the way soon - in the mean time you can get imaginative with some of the more basic styles - Styles like cleanslate and no frills offer almost a blank page - remember you can (from the 'edit menu') drag all the pages out of the menu and then add them back as links in whatever style you like - I personally was not happy with the options i was given so i moved out all the menu pages and started fresh - See my site here
Share your URL when you get something down, its always easy to say "this is how it is now - how can i get it to do this"
Were always here to offer advice.
Hope this helps... Lee.. -
Inappropriate?In your text widget.. there are a list of fonts that you can use. You can also use html for your fonts.
-
Inappropriate?Hi Tiago,
You can change the font of a text widget.
You can't change the fonts of the items in your auto menu
When you add a text widget you will notice the text option bar becomes apparent
You can select Font type, size and colour, styles: Bold, underlined, italic.
Alignment: Left justified, centered, right justified.
You can manipulate the menu facility and add your own. this would allow you to choose and menu type button you wish.
-
Inappropriate?To create an individualised menu you can remove all pages from the main menu then add a menu that you have created yourself. This can be done with any number of menu creation facilities which are freely available.online.These allow you many options like various font styles, animations, rollover styles etc.The choice is almost limitless.
the trick here is if you require a horizontal menu then you pick a style from the Yola options that offer a vertical menu.
If you require a vertical menu then you choose a style with a horizontal menu.
I will locate one of the tutorials from the library here and post it for you.
Goodluck. with this. -
Inappropriate?Hi TiagoJ7, Peter has given you some good advice here.
You can also have a look at some sites created by other users
over here: http://forsite.synthasite.com/
Look at the website section.
1 Comment Add a comment
This answers the question
-
Oops, I've just noticed that my mouseover's on the website templates
are no longer working. SynthaSite has changed the URL's of the template
images to yola.com/template_resources/......... -
Inappropriate?I know all that about the fonts. I just wanted to be able to change the font of the buttons in the navigation. About the Text Widget, I just would like to know if I can put a different font available the first time I start typing in a new one.
EDIT:
To Peter: Does that allow me to edit my pages however I want, even if those options are not provided by Yola? Can you explain to me how it works and what it does?
3 Comments Add a comment
This answers the question
-
change the default text of the page? - maybe its a CSS style you could add - similar to whats printed above - maybe Boomer can answer that, hes good at that kind of thing - BOOMER
-
Hi tiago,
Menu styles can be manipulated infintely if you create your own. even the font . That;s because the font is converted to an image by some of the menu creators.
You are still constrained by fontstyle of text within the body of typed text. Once again if it's really important to change the font type you can use something else eg photoshop, create an image of the text and place it as an image onto your page(s)
A lot have done this with headings and tables. -
It is possible to change the page heading "a little" with some basic HTML tags.
<!--
<b>I am bold</b>
<i>I am italicized</i>
registered trademark symbol ®
-->
But changing the menu font - I don't know. -
Inappropriate?I don't know if this will help but take a look at this thread:
http://getsatisfaction.com/SynthaSite...3 Comments Add a comment
This answers the question
-
I didn't see this when you posted it littleus. It's a good workaround for style , size and colour. Difficult for font, because of the nature of computers identifying available fonts installed
-
Just tried changing the menu font colour and size using the above method.
Yes, it does work, but I would use extreme caution though.
I think with the wrong code it's possible to break or lose the page !! -
Thanks Boomer. That's a good caution.
-
Inappropriate?Here's a mini tut on creating your own menu
{Yola have produced a template picker whcih allows you to choose the menu based on various selection criteria.
http://www.synthasite.com/synthasite-...}
Creating your own menu
1. Identify all the categories to be used in your menu.
2. Create a page for each of these pages. Add a "New Page" when the dialogue appears uncheck "Show in navigation" Type in the name of the new page on the upper line.and then click OK
3. It is easier to use lower case characters exclusively for naming your pages. Any spaces in the page name will be filled with the "-" character automatically.
4. Create your menu. It is easier to use one of the online menu creators for this purpose. You follow the directions. At some point there will be two things that you will have to transfer from the menu builder to your website builder.
These will be the images generated for your buttons and these are uploaded into your "FileManager".
The other will be the HTML code generated for your menu and this you copy using either the little copy facility provided or by using keyboard strokes CTRL+C. Either of these copies the code into your clip board of your computer. You then go and place an HTML widget from the side bar of your websitte builder to the place you wish to display your menu and Paste the code you had copied from the menu builder This can be done using the keyboard strokes CTRL+V
5. Save your page.
6. You must place the HTML code in every page you wish your menu to appear. Save each of these pages as you go.
7. Update your site.
Now you should see your menu and it should function. -
Inappropriate?Thanks everyone. I'll take a look at all this when I have the time. I'm a little too busy right now.
BTW, I like the font in Cleanslate. Exactly, what can I edit in that style? The background? The palette? The banner, I know I can.
I’m confident
-
-
Inappropriate?Hi tiago,
You can change the background in any style so yes to this.
You can change the colour palette.
Because this style has a horizontal menu that means that you could easily create your own vertical menu with this style.
I don't know what effect changing the background and the banner would have?
Goodluck with all of this. -
Inappropriate?Very interesting topic with a lot of interest - Tiago has had some great advice, I think the conclusion being - Yola should roll out the CSS control features ASAP. I for one am looking forward to complete page control without workrounds. I'd also love a borderless blank page template.
Lee.
I’m excited for the future
1 Comment Add a comment
This answers the question
-
Thanks everyone. I have taken notice of this thread and will let our developers know that you are interested in being able to edit the CSS of the style sheet.
-
Inappropriate?Just a word about editing the CSS - unless you know CSS you can easily break your page. Often everything looks fine at first, but when you navigate to another page and come back again the problem can manifest.
There is some useful advise on this thread, but before you use any of this code, please test it on a new page, or better yet - a new test site - before applying it to a page with content you have been working on.
We share this cautionary advice all the time, but I am posting it here as the suggestions made on this thread are particularly risky.
Very sorry that my word of caution comes too late for one person who has lost a lot of hard work. We are all really sorry when this happens and wish we could turn back time and make it all better again. (Engineers are working on a time travel device as we speak)
The company says
this answers the question
3 Comments Add a comment
This answers the question
-
dear all - i'm very sorry for whomever used the code i posted and has lost their work. i should heave made more clear that the button code was only an idea i had after looking at a previous thread. i am currently using the code from my original post on my live sites but this doesn't mean it's compatible with all templates or that i wont have trouble in future.
again i am very sorry for the trouble this has caused. -
Hello Michelle,
You are very kind to say this. You certainly are in no way responsible for the misfortune of this happening. There is a lot of luck in what we do especially when we move outside the normal aspects of building.
You have discovered a really interesting avenue to explore and you certainly couldn't foresee all the things on anyones page that may or in most cases will not interact. If we stopped this sort of exploration we'd never realise the variations possible in this exciting activity. -
Hi Michelle
I totally second what Peter has said. One of the most exciting thing about this forum is all the clever workarounds that people find to customize their sites. We are really grateful when people share what works for them. It is what keeps people coming back here time and time again and we just LOVE IT! There is absolutely no harm in experimenting with code as long as you do it on a test site or page, and not one that has your valuable content. Also, the code might be fine but when people copy and paste they accidentally miss a portion or make a minor mistake when they edit it. It can happen so easily to novice users as well as experienced coders. This is why I put my word of caution as a company response. It was my fault for not doing this right away. The title of this thread is very inviting and I suspect a lot of users will read it, so I want to make sure people take the proper precautions when editing CSS. I also want to reassure you that we were able to get all of Marcela's content back so that story has a happy ending. Please keep sharing your ideas as you develop your site. And of course, anyone who experiments with code does so at their own risk and there is absolutely no come back on the person who shared the idea! -
Inappropriate?Hi Monique,
A question in the same line. i noted with interest your recommendation to have a trial site. It's a temptation to have simply a trial page on your open site and what you say makes perfect sense.
My question relates to the possibility of a specific interaction with "bad code". Have you ever noticed a bad code that can't be reproduced as a stand alone and is "specific" to a page of a site?1 Comment Add a comment
This answers the question
-
Good question. I haven't come across a case where code on one page affects content on another page, but I have seen bad code make the entire site unable to load in the editor. The safest would be to: test the code on a test site. The test page should contain other content so that you can see how the code interacts. If everything looks good, go to your "real" site. Save a copy of the page you want to apply the code to. Test it there. If it all looks good, save the test page, navigate to other pages of your site and then open your test page again. Make sure the page test page also works in preview mode and on your published site. If possible look at it in different browsers. Once you are satisfied, apply the code to your final page. Hopefully this will cover all bases.
EMPLOYEE
CHAMP
EMPLOYEE
CHAMP
EMPLOYEE
