I want a more customized website

  • 1
  • Question
  • Updated 9 years ago
  • Answered
How do I change the CSS on a yola site? I want to learn how to customize the website and not use the templates. What are the steps involved to do this

thanks
Photo of Shaina Tsan

Shaina Tsan

  • 1 Post
  • 0 Reply Likes
  • curious

Posted 9 years ago

  • 1
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Hi Shaina,

I'm sure that a staff member will reply to your question at some point. In the meantime, however, you will be able to learn a great deal about the answer by just plugging "CSS" into the search box to the left of the "Start a topic" button. As you'll see, the news might not be exactly what you want to hear, but is mostly good.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Hello Shaina, Keara, above is right. I find best way and most of the designers do this, is design the whole website from scratch. which sounds like what you wish to do. Just find a template from Yola that enables you to change both background and banner. Then use the 1 column layout - hey presto! you can then do whatever you like with your site and design from 'bottom up'. Hope this is what you were after. Can add all sorts of things and make it look like your own total design, - which of course it will be - totally customised as you wish.
JenC
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Shaina

Right now you need to select your style from our style library. We are currently working on adding a wider variety of styles/templates with more customization options.

Currently you can change the banner image, color palette and background image on some of our styles. We want to make more options available like this, and one of our future plans is to allow you to develop your own CSS style if this is something that interests you. However, this functionality is going to take significant engineering on our part, so it is still a little ways into the future. In the meantime I hope you can find a style to suit your needs.

This tutorial may help you: Personalize your Style. You may also be interested in this link: Yola Style Guide. It has a handy filter function for you to see which style you might like. You can also check out this site forsite.synthasite.com, where one of our Yola users has added a page to his site comparing our styles.

I hope that information helps you in finding ways to customize your sites. Please let us know if you have further questions.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
FWIW, I have often been amazed at how Yola users have been able to customize the available templates. I suppose there are a few things you cannot do with them - but not too many!

On the subject of CSS, there is a CSS upload option that becomes available with Yola Pro. I don't know much about it. Perhaps someone could explain just what can be done with it, and the extent to which it expands (or doesn't) the ways one can customize templates.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
For example, I myself would never have guessed that both MCAT Prep and Abbotsford Golf both use the same template.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Keara

Just to let you know, you do not need Yola Silver to use CSS on your site. You can upload CSS for things like menus, adding content to your page such as text boxes, photo galleries to name a couple. You can also use CSS to tweak the existing CSS but it is not possible to upload a CSS template.

It's is definitely amazing how much can be done with these sites! I have created 3 sites - each of them completely different from each other but use all the same template: SqueakyClean.

Here are my examples if you're interested!

http://www.yoladesigns.com/dandelion-...
http://www.yoladesigns.com/retro
http://www.yoladesigns.com/boxy
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
On your last link listed (/boxy), are you using of the Yola widgets for the scrolling photos? Very nicely done.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Margie

Thanks! The scrolling boxes you see is HTML coding. This is available through here: http://yolacodes.yolasite.com/his6
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Sanja, I have read in several places that it is necessary to have Yola Pro (or, presumably, Silver) in order to do certain types of CSS things. Here is a thread which suggests that -- http://forum.yola.com/yola/topics/upl.... I obviously don't know which is true. It is confusing when there is conflicting information on these topics.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Keara

Yes.. you're right.. definitely conflicting messages! The link that you provided contains incorrect information. At that particular time, we didn't realize that CSS uploads were also available with Free accounts. We have since learned that it is! :)
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
The way I implemented changes to Yola's css styles and added some of my own.
caveat: requires Yola Pro/Gold

Using Firebug in Firefox,is the easiest way to see the entire Yola css files, which you can then copy. Now you can see all their classes and id's.

Make any changes or additions you want.

Assign your own filename to it and upload it to your file manager as a separate style sheet. The original Yola style sheet is still there so there's no damage if you mess something up.

You the need to link to your style sheet on each page. I just put it in the first html widget. It's not perfect as the link really should be between the head tags, but it works.

If anyone has a better suggestion, I'd love to hear it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You've hit the nail on the head! Just to clarify - this is only with Yola CSS stylesheets - it is still not possible to upload other CSS based templates.

As I'm sure you all already know this, but please be sure to try this on a test page! I'd hate for your page end up not working due to incorrect coding.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Margie, that looks interesting. One thing: I'm pretty sure you meant Yola Pro/Silver. (Yola Pro has recently been converted to Yola Silver; there is no Yola Gold at present.)

On the CSS, I'm just curious - how does the style sheet in File Manager over-ride the Yola style sheet?

(Also, I've never used Firebug. Is it difficult? super-easy? somewhere in between?)

Thank you for your suggestions!
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
You're right, Keara! I meant Yola Pro/Silver. Sorry about that. Maybe someone could edit my post?

Regarding the CSS, the style sheet added below the original in the page overrides the one above it.

Firebug is a free Firefox add on. I'm sure it has far more features than I know how to use, but I get by. So "somewhere in between". LOL You could search for a Firebug tutorial and go from there.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Sanja, thank you for the clarification! That is good to hear. :-)
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
To sum up, or try to - you can change the banner (usually); the background (usually); and make many other changes by uploading your own stylesheet. You can add boxes. You can do cool things with pictures. You can design your own navigation menus, including fly-out menus. You can have roll-over buttons and other stuff of that kind. Anything else??