Monday, September 18, 2006

Travelling mommy - Ciccini Viaggiatori

Cristina's first post on Ciccini Viaggiatori Blog.
Travelling mommy - Ciccini Viaggiatori

Thursday, September 14, 2006

Using custom stylesheets in Google Page Creator

Recently I was trying to find a way to use a custom css in Google Page Creator to realize a more personalized page. This is what I found:

  • Log to your Google Page Creator account.
  • Create an Home Page. Select whatever look and layout you prefer.
  • Start to edit the page.
  • Select one element of the page (i think the ideal is the subtitle) and click on the Edit HTML link.
  • Now insert this little fragment of code right after the real content that you want to display in the subtitle:

    <script language="javascript">
    var h = document.getElementsByTagName("head")[0];
    h.innerHTML=h.innerHTML+
    "<link rel=StyleSheet href=\"/style_override.css\" type=\"text/css\">";
    </script>
  • Click on Save changes
  • Click on Publish and wait for the page to be published
  • Click on Back to page manager
  • Write locally a CSS file and rename it to style_override.css
  • From the page manager upload the CSS file
  • You are now ready to view the custom styled page


This method relies on javascript so it will work only if you have it activated in your browser; it consits of simply accessing the head element of the document via the DOM ( document.getElementsByTagName("head")[0]; ). After that it simply adds a string containing the <link> tag to the innerHTML of the head element. Since this new content will be appended to the "google imposed" css it will override the existing css rule.

Here is a live example:
This is an example of the result of the method.

And this is the same page without the custom style

As you can see I only changed the padding of the left column to 5px but the possibilities are infinite and are limited only by our fantasy.

I hope that somebody will find this little trick useful.
Let me know if you have question or just leave me a comment.

Bye.

Tags:

Firefox 2 Beta 2

Firefox 2 Beta 2 has just been released. As always with beta this is a release reccomended only to developers and testers.

According to the schedule, after 6 Candidate Release, today will be released the definitive version of Firefox 1.5.0.7.

Tags: