css

CSS Background Transparency

The Right Way is obviously CSS 3.0: rgba(R,G,B,ALPHA), but since only Safari supports CSS 3.0 currently (to the best of my knowledge, but you bet IE does not) the "right way" is out of question.

Moving on.

You can, also, try using the combined CSS properties:

filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;

and think to yourself: "OK, I used three properties for one thing, so the cross-browser demons should be happy, right? What can possibly go wrong?"

Well, demons are demons because they are evil and more goes wrong than possibly could. Namely, all child elements of the div, the background of which you just made transparent, will also become transparent. Even if you have no children divs: all your text, within the div, will be transparent and I can bet that was not something you wanted!

What to do? What to do? You rush to Google and find all kinds of MMFW-CSS (make-me-feel-worse, CSS) tricks that do not help. Like the one suggesting the inside elements should not really be children of the initial div, but be overlapped using, nothing less than, an absolute positioning. Yeah, like that really helps: adding the pain of absolute positioning to the already existing list of pains with your page's CSS!

But do not despair! There's a way to the light!

With no further delay, here is the workin'-kickin' solution, tested in most browsers:

Fix: Garbled TineMCE Windows in Drupal

A lot of nice Drupal themes have HTML body styled with fancy backgrounds. Unfortunately, most of the theme authors do not test their themes with a popular WYSIWYG editor module TinyMCE. If they did, they would notice how bad the text entry window looks with their themes on:

As you can see, the body background affects TinyMCE text entry window, as well. This is because that "window" is actually a separate HTMl document with its own body that also gets affected by the style setting. Ouch!

The fix is trivially easy, now that we know what's going on. Edit the theme's style-sheet, to add an instruction:

body.mceContentBody {
	background: white;
}

The problem should be gone. I wish theme designers payed more attention to this detail, though. TinyMCE is used all over the place, and as a matter of fact, I am almost sure all other WYSIWYG editing modules have similar problems, too, as they need to use sub-document for editing.

Printer-Friendly Calendar View

Calendar module is one of the most useful modules in Drupal. It allows to create and view different events in time. Equally important module is Printer-Friendly which allows to have Print link and formats page in a printer-friendly style.

Unfortunately, Printer-Friendly module only works with node pages and calendar views are Views module pages so printer-friendly does not work with them. Following is a quick tutorial (inspired by Chill35's suggestion) on how to create printer-friendly pages for Calendar. Actually, the trick can be used for any views page, with some modifications.

The essence of the trick is that when we need a printer-friendly version of a page, we add "printit" to the end of the URL and when it is in the URL modify CSS accordingly to strip-off header/footer/etc. In Calendar module's case (which is actually called "events") you need to edit event_link() method in event.modules file.

Syndicate content