Pageflakes How-To and Troubleshooting Guide

Using CSS

Developers can use CSS when developing flakes. When writing CSS, you should use rules that apply only to your flake without affecting the appearance of other flakes or pages. To do this, use CSS classes and avoid global selectors.

Here is an example of a CSS rule that can interfere with the appearance of other flakes:


td
{
    padding-top: 5px;
}

This style affects all <td> elements in the current page. Although this style may work correctly, other flakes using table cells may be affected by this style.

Instead of using a global selector, use classes with selectors:


td.class_name
{
    padding-top: 5px;
}

This style applies to your flake without affecting other flakes.

You can create instance-specific styles for flakes. These apply only to elements which are specific to the instance and do not affect any other flakes or any other instances of the same flake. Using instance-specific styles can be done by adding _PAGEFLAKES_ before all selectors.


#_PAGEFLAKES_data
{
/*Styles here*/
}
The following code uses both class names and instance-specific
  CSS for a very simple "HelloWorld" flake. 
<html>
  <head>
    <title>HelloWorld</title>
    <style id="_PAGEFLAKES_MyFlakeStyles">
    #_PAGEFLAKES_container
    {
           font-family: Verdana;
           font-size: 18px;
    }
    h1._PAGEFLAKES_header
    {
           color: green;
    }
    </style>
    <script id="HelloWorld_flake" type="text/javascript"><![CDATA[
    function HelloWorld(id) {
           this.load = function(flakeInstance) {
           }
    }
    ]]></script>
    <script id="_PAGEFLAKES_Instance"
  type="text/javascript"><![CDATA[
    var _PAGEFLAKES_ = new HelloWorld('_PAGEFLAKES_');
    ]]></script>
  </head>
  <body>
  <div id="_PAGEFLAKES_container">
    <h1 class="_PAGEFLAKES_header">Hello World</h1>
    </div>
  </body>
</html>