Help needed: Use of CSS in Fluid / Example of Google Calendar

[Stefan]

Hi,

As Fluid is not only about SSB's but also about it's CSS-customizing
functionality I have a question for Google Reader and our ability to
fit it to our own needs.

Currently my Fluid Google Calender SSB looks like this:
http://twitpic.com/933uq

Nice so far but not really a desktop application because it still has
the header bar (Email, Kontakte, etc.) on it's application.

So I've worked through the last 4 hours to get rid of this header bar
and haven't succeeded unfortunately, it's still there, no matter what
code I inject.

Let's see what I've tried.

Version 1.
Gcal Header removal.user.js
// ==UserScript==
// @name Gcal Header Removal
// @namespace http://fluidapp.com
// @description Hides Gbar Header of Google Calendar
// @include http://www.google.com/calendar/*
// @include https://www.google.com/calendar/*
// @author
// ==/UserScript==

(function () {
GM_addStyle("#guser, #gbar, #gbh, .gbh, .nQ6QTe, .qWFFaf,
div.XoqCub.a3hTGd div.IY0d9c div.XoqCub.EGSDee, div.XoqCub.XPj4ef
div.IY0d9c div.XoqCub.EGSDee,div.XoqCub.I94Sdc div.IY0d9c
div.XoqCub.EGSDee, div.XoqCub.zU8Nkb, .slwyWc {display: none;}
div.XoqCub div.IY0d9c div.XoqCub.EGSDee:first-child {width:17px!
important;}div.XoqCub.oi23Hf div.XoqCub:first-child {margin-right:
10px;} #mothertable {margin: 0px; padding: 0px;} div.tYBwhe input
{margin-left: 137px;} #nav.noprint, #nb_0 {width:155px;} #nb_0 {width:
140px;} #canvas_frame{margin-bottom:5px; border-bottom: 5px solid
#999999;} html.e7Tcgd {overflow-x:auto!important;overflow-y:auto!
important;} div.XoqCub.aWL81 {margin-right:0!important; padding-right:
0!important;}td.eWTfhb, td.eWTfhb:last-child div.XoqCub, div.yxEQwb
{width:205px!important;} #Google Calendar ");
}
})();

Version 2.

// ==UserScript==
// @name Hide Gbar
// @namespace http://fluidapp.com
// @description Hide Header Bar
// @include *
// @author Someone
// ==/UserScript==

/* removes entire top google bar */
div#gbar,

{ display: none !important; }

Version 3.
}

/* hide google bar and replace it with text */
/* div#gbar {
visibility: hidden;
/*display: none !important;
} */

/* removes entire top google bar */
div#gbar,#guser,#gbarl,#gbarc {
display: none !important;
}


None of these 3 worked, even though version 1 works perfectly in
Greasemonkey Firefox and Version 3 works perfectly in Mailplane.app

Is this due to the fact that Fluid interprets this code differently
than the other 2 applications or due to the fact that I just made a
mistake in my scripts?

Thanks for helping out, I'll post the result to Userscripts.org once
we've fixed that header issue.

Best regards,

Stefan

[Stefan]

Ups, I forgot to say that it seems that #gbar is the object we want to
hide.

Thanks for helping out!

Stefan

[Ephilei]

Wow, I was doing the exact same thing today and ran into the exact
same problem. I thought it was because I suck at javascript.

The problem exists on every *google.com/* site.

> > // @descriptionHideHeader Bar

> > // @include     *
> > // @author      Someone
> > // ==/UserScript==
>
> > /* removes entire top google bar */
> > div#gbar,
>
> > {  display: none !important; }
>
> > Version 3.
>
> > }
>

> > /*hidegoogle bar and replace it with text */

[Stefan]

Ha! I thought the same of my CSS/Javascript knowledge ;-)

I don't have this Problem with Gmail as I'm using Mailplane and the
CSS script (more or less the same as I've tried for Google Calendar &
Fluid.app) works like a charm.

Let's see if anybody can hook us up with help!

@Todd
I think this is a general problem where Ephilei and I could support
and test a fix. You wanna help?