Advanced Tips for Tweaking a Yola Style!

  • 6
  • Idea
  • Updated 8 years ago
There are many ways in which you can make a style from Yola's Style Gallery uniquely yours. We have a fantastic tutorial called Personalize your Style which shows you how to add your own custom background and/or banner.

For those who would like to customize their style even further and aren't afraid to get their hands dirty by digging into HTML, please try these tips:

1. First, understand how our styles are coded. You can see the CSS coding for any style by doing the following:

In your Sitebuilder, go to your "Preview" page and right-click. On the menu that comes up, select This Frame > View Frame Source. Now you'll see all the CSS coding that was used to create your style!

OR

Go to your published site and right-click. On the menu that comes up, select "View Page Source".

2. Identify which areas you would like to modify. As a general rule of thumb, you'll see things like:

body {code is in here}
This controls the main content area - how it is set up and the default font color, size and type used.

#sys_banner {code is here}
This determines the size of the banner area used.

#menu {code is in here}
This targets your navigation menu, the font, color and size used.

3. Tweaking the identified area
Once you've identified the area that you wish to alter, you need to apply the new code to your Sitebuilder. Let's use the banner code for example. We can alter the size of the banner so that it's a bit smaller in width and taller in height. The code we need to change is the following:

#sys_banner {
width: 954px;
height: 183px;
margin: 0 auto;
position:relative;
}

In the Sitebuilder, drag over an HTML Widget and place in the following:
<style type="text/css">
#sys_banner {
width: 800px;
height: 200px;
}
</style>

This should alter your banner area size!

The best way to learn how this works is to create a test site, and start playing around with the codes and seeing how your page changes! Always be sure to enclose the code in style tags: <style type="text/css">your code goes in here</style>.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
  • hoping this information is helpful!

Posted 8 years ago

  • 6
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for this Sanja! This will be helpful to lots of people that are scared about learning HTML (I was at fist too now I am good at it :)) There are lots of other codes too in there you just hve to find them but remember you cant use css to hide the Yola banner at the bottom, it is against the Yola TOS and may result in account termination or get your site shut down, here is the Yola TOS: http://yola.com/terms
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thank you for this reminder to not use the CSS to hide the Yola Link at the bottom of the website.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem. Just wanted to let everyone know :)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
a small tip for anyone who does change there page in any way using CSS, HTML or JAVASCTIPT should do it on a test page! (i just click on "save as" on the page i want to change and test it on the duplicate page and if it doesn't break the page then i put it on the proper page and delete the duplicate one)
im sure we've all put a code on a page and broken it =S
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
That's a great tip, Alex. I tend to keep a whole site just for testing code and widgets.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i used to but i turned it into a proper website
Photo of dyfed

dyfed

  • 55 Posts
  • 0 Reply Likes
This is great stuff. There are lots of sites out there available to those who use Blogger (hiss!) on how change the code - but nothing on Yola. So a bid thank you!

Any chance of you including a detailed tutorial on this?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I don't think they have a tutorial on this but i am creating a tutorial site (for Yola sites) to add HTML, CSS, and JavaScript codes to your page and it will all be tested so it wont break your page and it will only break your page if you have another element on the page that makes it do that (thats very rare though).

Sincerely,
Nathan
Photo of dyfed

dyfed

  • 55 Posts
  • 0 Reply Likes
Look forward to it, Nathan! Brilliant!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks I will announce it on this forum when I got it done!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I notice now the CSS is written on the page (not linked to as an external file) Is that some kind of move towards CSS editing?

Hope so.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello, they should use external CSS style sheets because it makes the page load faster and people can't see the css right when they view the source they have to try to find the link to it. It must be something to do with the editor. Maybe someday they will allow us to edit the site's HTML source.

Sincerely,
Nathan