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: CSS Google Page Creator