Java and more
Roberto's Blog about Java, OSS, Soccer, Lazio, Travel and more.
Monday, September 18, 2006
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:
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
- 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
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: Firefox Mozilla
According to the schedule, after 6 Candidate Release, today will be released the definitive version of Firefox 1.5.0.7.
Tags: Firefox Mozilla