Combining Bezel and Smoke

[topher1078]

I'm currently using Bezel as my main notification, but I like the visual look of smoke (both the color and more importantly, the shadows). Is there anyway to combine the two - the size and position of Bezel but the look of Smoke? Thanks so much.

[mdale7]

I had similar questions regarding the position of the notification themes. In reading the documentation, it appears that there are two types of notification themes: compiled Objective C themes, and WebKit based themes.

As far as I could tell, Bezel is a theme of the compiled variety (based upon its different configuration options) and is therefore, uneditable. I believe that the only WebKit based theme is CandyBar (although I could be wrong). The Objective C variety of theme is compiled and therefore impossible (?) to edit without the source code. However, the WebKit variety uses .plist and CSS files to display the output from Growl. With a little experience using CSS you can create your own notification themes.

In playing around with the WebKit variety, it appears that you are unable to move the notification to the left side of the screen, however, with a little bit of messing about I found a solution. The CSS of this solution follows.

Note: the background image is a PNG file with a black background that transitions to a transparent background via a gradient. This can be created to any desired length. I got this idea from an article on AListApart.com

Code: Select all

body {
	right: 3px;
	top: 10px;
	color: #000;
	margin: 0px 0px 0px 0px;
	padding: 6px 6px 6px 6px;
	border: none;
	font-family: Skia, sans-serif;
	min-height: 70px;
	min-width: 1100px; /* position the notification window starts at from the right side of the screen */
	text-shadow:#fff 1px 1px 2px;
	float: left;
}

#background {
	background:transparent url(test.png) repeat-y; /* background image, cf. article by A List Apart, found http://www.alistapart.com/articles/fauxcolumns/ */
	}

#icon {
	 /* the icon container and its properties */
	float: left;
	width: 64px;
	height:66px;
	padding: 2px;
	margin-right: 5px;
	margin-bottom: 8px;
	
}

#icon img {
	 /* width and height of the icon image */
	width: 64px;
	height: 64px;
}

#title {
	font-weight:bold;
	font-size:medium;
	max-width: 310px; /* width of the title area */
}

#text {
	font-size:small;
	padding-bottom: 10px;
	max-width: 310px; /* width of the text area */
}

#emergency #text {
	color: red;
}

I've uploaded an example of this to my website. You can download the theme at http://mdale.com/files/Lefty.growlStyle.zip

[The_Tick]

A couple of points:

1) Be sure to look here: http://www.resexcellence.com/growl_styles.shtml

2) This left stuff will break with the next major release. We'll have positioning in that release. You need to be aware of that.

3) It seems to assume a larger resolution than what I have.

4) Growl is open source, you can get the source code easily.

5) Crystal and Plain are also webkit based.

[mdale7]

Tick, thanks for the info.

You're right, I have assumed a screen resolution that may be larger than a standard size of 1024 px (I'm using a 15" Powerbook Titanium). I was just trying to share a hack/workaround to move the notification window. I realize that it is not totally optimal

It is also good to know that the positioning will be fixed in the next major release. I can't wait. I really like the iTunes integration and have already set up a really simple script to work with my Keyspan DMR remote. Now I can click a button and see what song I'm listening to!

Keep up the great work, I look forward to the next release.

[DeltaTee]

Do you have a screen shot available? I couldn't find one on your website.