3R Technologic

WebTechnos

Entries feed - Comments feed

13 Aug 2010

Get round corners back in GMail

By r3gis on Friday, August 13 2010, 11:34

I'm not really a fan of the round corners. But as it sounds to stress a lot of people ( :p )... There is an easy solution to get the rounded corner back in your GMail... and even better... remove the ads :)

I know that other solution exists (using Greasmonkey for example) but this one is technically interesting and show the power of Firefox

So, first of all, use Firefox :D (use Firefox 4.0 if possible but that's not necessary for the trick)
Go to your user profile :
  • Windows Vista et Seven : C:\Users\UserName\Appdata\Roaming\Mozilla\Firefox\
  • Windows 2000/XP : C:\Documents and Settings\UserName\Application Data\Mozilla\Firefox\Profiles\
  • Windows 9x/Me : C:\Windows\Application Data\Mozilla\Firefox\Profiles\chrome\ or C:\Windows\Profiles\UserName\Application Data\Mozilla\Firefox\Profiles\
  • Windows NT 4.x : C:\Winnt\Profiles\\Application Data\Mozilla\Firefox\Profiles\
  • Unix/Linux : ~/.mozilla/firefox/
  • Mac OS X : ~/Library/Mozilla/Firefox/Profiles/ or ~/Library/Application Support/Mozilla/Firefox/Profiles/
Then go in a folder named [some-random-letters].default/chrome/

Here create a new file named (the name is important) userContent.css
This file will allow you to customize every content shown by Firefox.
In this file paste the following code :

@-moz-document domain(mail.google.com){
.p {
	-moz-border-radius-topleft : 10px;
}
.q {
	-moz-border-radius-topright : 10px;
}

.i {
	-moz-border-radius-bottomleft : 10px;
}
.j {
	-moz-border-radius-bottomright : 10px;
}

.mq{
	-moz-border-radius:5px 5px 0 0;
}

.z8 {
	-moz-border-radius : 5px;
}

.nZ{
	-moz-border-radius:5px 0 0 5px;
}

.mq {
	display:none;
}

table.Bs.nH.iY > tr > td:nth-child(3){
	display:none;
}

/*
table.Bs.nH.iY > tr > td:nth-child(2){
	display:none;
}
*/ 


}

You can notice that the media like query @-moz-document is used. (See http://www.w3.org/TR/css3-mediaqueries/)
This is the same type that @media or @print followed by a query. In this query we specify that we want the enclosed css to be applied only on domain mail.google.com.
Then there is a lot of selector, .i, .j, .p and .q matches the borders divs. (Has certainly previously a rounded sprite background).
.mq match the top ads banner and finally the two last tables td for side ads (not really sure this is a good idea to select these one like that since it can hide other parts of the interface...but for now seems to work at least with my configuration).

no trackback

3 May 2010

HTML5 / CSS3 / SVG experiments

By r3gis on Monday, May 3 2010, 17:10

I've made some tests with this promising features of the HTML5, CSS3 and SVG.

Here is my test page : http://www2.r3gis.fr/blog

It's powered by Django (if you don't know this web framework, just try it, you'll never want to rewrite a line in php after that ;) ).

Browser state of the art :

  • Fully compatible with firefox 3.7a5 (nightly build).
  • Chrome(ium) also support it (but i found some bugs in the implementation of HTML5 in webkit, I'll probably open bugs when the site will be finished).
  • Opera 10 support almost everything but not gradient (which has a deep impact since i use it as background).

What I tested :

  • An XHTML page to allow inline SVG inclusion.

This is the way I choose to include my svg button since firefox doesn't support yet <img /> with svg src.

  • CSS 3 gradient background.

It is really easy to use. you can choose your gradient orientation (gecko and webkit doesn't supports the same parameters but it's easy to do anyway)
Another point I noticed (but I may have missed something) is that the gradient is not regenerated when a tag height changed (for example my background) the gradient height is not re-computed and is duplicated at the bottom.

  • CSS 3 transitions (I know in the example i made too much transition on mouse over ;) )

This feature is just fantastic. All javascript is now absolutely useless (javascript frameworks are not so awful now but it's still javascript). Here the only thing you have to do is add a css class and the magic of (-webkit-/-moz-/)"transition" does the transition.
The only thing is missing for me is to allow transition between for example height :0px; and height : auto;. I found a work around by using max-height:0px and max-height;10000px; (where 10000 is a very big value). The transition time is not respected between 0px and the height auto, but at least we have a transition.

  • Canvas with 2d context (I used processing js to make the dev easier). Unfortunately since it doesn't allow transparent background I didn't include it in the example.
  • Inline SVG buttons (I'm a svg fan ;) ).

Thanks to the template system of Django it's easy to include a svg (directly generated by inkscape).
The cool stuff is that doing that, your svg document obey the rules defines in the master CSS. (It could be valuable to change you icon colors for example).
Another cool feature is to use CSS3 transition on your inline SVG !! Wahoo. Just by changing the :over class of my lines in my buttons I make it bolder and I changed the color. Just with a css class, and with a transition.
This feature only works with firefox 3.7 for now. But it introduce a real usage for your svg buttons in the webpage (and besides your buttons are scalable!).

  • CSS 3 border-radius, one of the firstly adopted feature (and waited for since a long). The end of the sprites and of these headaches with multiples divs/table.
  • CSS 3 box-shadow and text-shadow : same as for the last point. One personal note on the cool feature that enable to use multiples shadow and also inset shadows. With this feature you can now render complext generics buttons just using this and gradients. No more bitmap !!!
  • @font-face. What's a pleasure to be able to embed your own font ! You'll be sure that the user will see your website with your font. (There is a bug with chromium when using @fontface and css3 transition although ;) )

What I have not yet tested but that I'll test :

  • CSS 3 transformations (that should allow to deform parts of the webpage)
  • Webgl (canvas with 3d context) demos I've seen are really impressive
  • SVG animations (I know that it is not yet well supported by firefox but should be by chrome... at least for events that starts an animation (i'd like to write the less javascript as possible - not because i don't know how to write javascript to do this kind of stuff, just because I want to experiments new browser features))

Just a last word... If you are using internet explorer..... Go out of there, you're contributing the fact the web is such a poor place.... Download either Firefox, Chrome / Chromium, Safari or Opera....

no trackback