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:

12 Comments:

At 8:10 am, Blogger EzySetup said...

I love this suggestion, however it isn't working in IE for me. It works fine in Firefox. Take a look at the test page shown below. In IE, I receive the error, "could not set the innerHTML property. Invalid target element for this operation."

Any ideas?

Thanks in advance,
Andrew

The page is:
http://60minuteweb.googlepages.com/red_splat

 
At 9:53 am, Blogger broklanders said...

Sorry but I'm on Linux and I don't have IE. You can try to put an alert to watch what is returned by the call document.getElementsByTagName"head").
Let me know.

 
At 3:50 pm, Blogger estelle said...

Thanks for the tip! Google Page Creator is great, but the templates are pretty awful.

Would be fab if your little javascript trick also worked on IE. If you come across another solution, please let me know ;)

 
At 2:21 pm, Blogger dirtbikejunkie said...

I found in IE that after trying to set head.innerHTML fails. instead you can use the following IE specific method:

document.createStyleSheet( 'my.css' );


I have a js I load to work with both IE and FF

if ( document.createStyleSheet )
{
document.createStyleSheet( 'my.css' );
}
else
{
var newSS = document.createElement( 'link' );
newSS.rel = 'stylesheet';
newSS.type="text/css";
newSS.href= "my.css";
document.getElementsByTagName( "head" )[0].appendChild( newSS );
}

 
At 10:42 pm, Blogger amhey said...

If you right click (at least in Firefox) on the Page Created page in Edit mode there are a bunch of Web Developer options that show up including the original .css file.

 
At 2:24 am, Blogger xartle said...

Awesome work guys! You just saved me from having to hack this out myself. :) Thanks!

 
At 11:07 pm, Blogger Dave said...

This comment has been removed by the author.

 
At 11:09 pm, Blogger Dave said...

In sitemanager; just upload your html & css files using the "Uploaded Stuff" widget on the right.

Create a blank home page in page creater and paste in a redirector script in one of the elements (i use footer);

[CHEVRON]script language="javascript"[CHEVRON]
window.location.href = "yourpage.html"
[CHEVRON]/script[CHEVRON]

it's not perfect and you should maybe add stuff on this default homepage to link to your custom pages if the Javascript fails. It's also worth observing googles indexing behaviour there after to see how your site gets indexed. without a "proper" homepage it may not like you.

D.

 
At 4:00 am, Blogger puertoboricua said...

Can i use this "scripts" to setup Lightbox in googlepages.What i mean is using the head scripts and mix it with the body scripts from Lightbox.If you can figure out if this (Lightbox) can be implement in Lightbox let me now,thanks.

 
At 6:47 am, Blogger pbsl said...

you have nice site. thanks for sharing this site. various kinds of ebooks are available here

http://feboook.blogspot.com

 
At 1:48 pm, Blogger rosy said...

Very informative article, thank you for your suggestions and tips.
Web Designer Web development

 
At 5:05 am, Blogger kimberly said...

When I bought my computer and I didn´t know how to use java graphics, so I decided looking for information in a webside and I found an useful information that helped me a lot.. Now I am interested in to do the best investment and I found a webside very useful and interesting called costa rica investment opportunities , I think it´s a very wonderful site.

 

Post a Comment

Links to this post:

Create a Link

<< Home