Media Lab Forums

Chris Perkins · Site Admin Joined: 29 Sep 2005 Posts: 5665

Want to add some cool gadget to your SiteGrinder web page? Check out Google Gadgets: http://www.google.com/ig/directory?synd=open

First, some of the gadgets are written to only work from "Google Pages". Not all will run from your SiteGrinder page. So be sure to upload your pages and test your gadget before committing to it.

Instructions:

1. Go to the URL above, find a gadget you like.
2. Click "Add To Your Webpage"
3. Fill out the form with any needed information
4. Click "Get the Code"
5. Copy the code they provide to the clipboard.
6. In Photoshop make a new text layer.
7. Paste their code into that text layer.
8. Size and position that layer where you want the gadget to appear.
9. Put the -literal hint on that layer.

Ok. So at this point, your Photoshop file is looking a little funny. But don't worry, when you build the code will "pass through" and you'll have a working gadget (or not, since not all gadgets will work).

Enjoy! Let us know what gadgets work or don't work for you.

Mike · Joined: 17 Dec 2005 Posts: 42

Nice Find Chris, thanks for posting it.

http://www.groundupwebdesigns.com

schwabby · Joined: 28 Jan 2007 Posts: 13 Location: Indiana

Will this work for paypal code as well? I have paypal code that doesn't quite work right with the -xmedia hint

tsummerall · Site Admin Joined: 29 Sep 2005 Posts: 1714

Most people find it easier to use a -literal layer with PayPal. Try that.

What's not working?

rharris · Joined: 08 Oct 2007 Posts: 2

Does anyone know of any other source for gadets for websites? The google gadgets are ok but there is not a great selection. Anyone got any suggestions?

Chris Perkins · Site Admin Joined: 29 Sep 2005 Posts: 5665

There is a great music playlist player here: http://musicplayer.sourceforge.net

You can use this player on your SiteGrinder 2 Pro page by using a text layer with the -literal hint.

The player has a great set of instructions. You'll have to upload the player to your site (and note its URL), upload the music, and upload the playlist, noting the URLs of everything as you go. Then after you get everything set up, just paste the HTML they have in the instructions into a text layer in Photoshop and put the -literal hint on it. Size and positoin that layer where you want the music player to be. When you build that text layer the HTML will pass through and you'll have a working playlist player.

Hope this helps,

Chris

Chris Perkins · Site Admin Joined: 29 Sep 2005 Posts: 5665

http://www.widgetbox.com

Browse their widgets, click "Get Widget" when you like one, and choose "Get Widget Code". One or more code options will be offered. Choose one, copy it, and paste into a Photoshop text layer. Put the -literal hint on that layer and size and position that layer where you want the widget to appear.

When you build the page you'll have a working widget.

Happy Grinding!

Chris

crespowu · Joined: 24 Jan 2008 Posts: 1

Google always gives me surprise.

Higher Design.net · Joined: 22 Jan 2008 Posts: 5 Location: Canada

This is brilliant!

jond · Joined: 28 Jan 2008 Posts: 21

tsummerall · Site Admin Joined: 29 Sep 2005 Posts: 1714

Chris means the size and position of the rectangle you drag our with the text tool to create the layer. (You can also modify the rectangle later using the text tool.)

You can set a background color for a text layer using SiteGrinder's Decorations panel.

Chris Perkins · Site Admin Joined: 29 Sep 2005 Posts: 5665

Size and position the text layer with the -literal hint to control where and how large the widget will be displayed. Test too, not all widgets are resizable.

For a background color or border, you can try the Decorations pane. I'm not sure if it lists -literal layers. Otherwise, position another layer below your literal layer.

Chris

jond · Joined: 28 Jan 2008 Posts: 21

perfect, thankyou. what you both described is exactly what I was referring to.

if I may ask for one more thing... Chris you mentioned as another option to position another layer below the text layer. This is what I was wondering, then, how these two layers, the text(widget) and the small layer of color or whatever (underneath only that widget) stay together or are tied together. Do they both need a literal hint or just be based of the same layer name?

Thanks!

Chris Perkins · Site Admin Joined: 29 Sep 2005 Posts: 5665

They will not be tied together.

That's why the Decoration pane is better - any background color or border used there applies to the element itself and so will follow its changes in size, etc.

Chris

jond · Joined: 28 Jan 2008 Posts: 21

excellent! thanks for the quick response. I'll go the decoration panel way.

as a side note, I once used a plugin for dreamweaver, sorry, can't remember the name, probably came from project7, that helped me to position dreamweaver proprietary layers that were to be positioned based on one single centered layer. Functioned just like a container div in CSS only the javascript for it would first load the page and then position the child layers to the centered layer. Occasionally resulting in a flash as items positioned themself if it happened too slowly, but still worked none the less. I wonder if something like that could be implemented within sitegrinder so we could tell SG how to position the layers(divs) relative to each other, yet outside the limitations of CSS float properties,align issues etc, from within photoshop using hints to do it? I suppose it would kill the CSS/Xhtml code compliant wonder features of SG...