How to use CSS with yola?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
How can we use CSS with yola.
for example i want to do this http://www.dynamicdrive.com/style/css...
i want some tear shaped background n some text linked to Url..
Please lend me a helping hand :)
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
  • exploring

Posted 9 years ago

  • 1
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Monica,

CSS files are uploaded to the "Resource" folder of your site. However, your custom styles are not auto-loaded for you. You will need to add them with the HTML widget.

e.g.:

<link href="resources/your-custom-style.css" rel="stylesheet" type="text/css" media="screen" />

You add your files manually with the HTML editor. The advantage is that you can use the same stylesheet across multiple pages - edit the one file, and your changes reflect on all the pages. As such your files will be included after the default template files and will over-ride the default.

Please note that this is an option for advanced users and we will not be able to assist you if your CSS edits break your site. If you unsure of how to proceed, we recommend that you try this on a blank test site first before attempting it on a website which contains your valuable content.
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
it can break my site..
now this sentence has scared me to try it :(
will think whether i need to use it or not..
Thanks for info.
btw, do u have any help for putting up a background image behind my text, links etc?
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
It is possible to set a background color for your text, but this will require a little bit of HTML coding. Here is some code that you can use:

<div style="border: 2px solid red; width: 400px; height: 211px; background-color: pink;">This is where your text goes</div>

You can drag a text widget onto your page, click on the little HTML icon on the Edit Toolbar and paste in that code. Here is what the various pieces of the code do, each of which you can change to suite what you are trying to accomplish:

1. Width is how wide the area will be.
2. Height is how tall it will be.
3. Border is how thick it will be should you choose to have one, and after that you put the color of the border in this case solid red.
4. Background-color is the color of the background. If you want to be more precise about the color you can replace this with a hex value. For example, if you replace the word "pink" with the hex value:#63B8FF you will get a light blue color block. For a list of hex values see: http://cloford.com/resources/colours/...
5. You can put the text you wish to appear where you see: "This is where your text goes".
6. Click OK.

You can change the various pieces to make it the size and color that you prefer.

Note: Because this is in a text widget, you can also type directly into the text widget instead of putting the text you wish to appear in the HTML code. You can also highlight the text and use the Edit Toolbar to change its various attributes such as color and size.
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
Kershnee.. I m in love with you.. ha ha :D
thanks alot..
i would just now find out if there is a possiblity of rounded corners!
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Would it matter where this html widget with the css is put so it would apply to all pages? I mean does it need to be at the top or bottom of the home page?
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Monica, please note that Kershnee said you can try out your CSS on a test site. That's a good plan - copy your page to a test site, and try out the CSS there. If it works, then apply the CSS to your actual site.
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
But she also said "they wont be able to assist me if it breaks"
Thats what scared me most! if i lose it, i will lose it all without a hope to get it back :(
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi Monica - that's why we recommend that you try it out on a test page or test site. That way if it breaks, it doesn't matter and we can try and find out why there was a problem before you add it to your site.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
I think the word "breaks" is perhaps not the best one to use in this context. It's how people who write code professionally talk to each other, but it's not really such a great word for us non-professionals to use.

I'm not a professional either, so I don't want to get too deeply into this. BUT nothing would be 'broken' in any permanent sense. Your CSS code might not work correctly -- and then you could just remove it! You wouldn't really 'lose' anything -- all your files and stuff would still be there.

Again, I think the think to do is to create a test site -- use one of your five Yola sites for that purpose. Try out some CSS at the test site. That will give you lots more confidence than anything else.

Good luck! If you go the test-site route, you'll definitely come back a more exerienced Web-designer.
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
Thanks people for encouragement.
Will try it out.. Thanks :)
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Where are the replies to this question? The statistics say that 9 replies have been made, and the company has marked it as answered. I cannot, however, see any replies at all.
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
I apologize for repeating my question, but since it wasn't answered.

"Would it matter where this html widget with the css is put so it would apply to all pages? I mean does it need to be at the top or bottom of the home page? "

Thank you
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
My apologies, we missed your question. I would suggest adding the HTML widget towards the top of the page.
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Thank you, Kershnee.