Here’s a screenshot of one of my iGoogle tabs set up with Lulu news and information:

So what does this have to do with Lulu?

We have a new gadget on iGoogle to use! It has tabs displaying the following:

• Official Lulu blog
• Featured content from the blog
• Newly published fiction
• Top sellers this week
• Lulu in the news

And here’s a screenshot of it in action:

Like what you see? Add it to your iGoogle home page.

We are currently looking at other ways to use Google Gadgets to help our creator and buyer community. We’d like to do things such as offer our Mini-Storefronts there, too.

Do you use iGoogle or any of the other personal start pages? Have something you’d like to see? Please let us know by commenting on this post.

-John

CSS Selectors

The JS Mini-Storefront provides a number of CSS selectors that you can use as hooks to add styling to your mini-storefront.

#lulu-storefront

This is the div containing all of the storefront widget’s components.

#lulu-storefront-title

This is an h1 tag that lists your name and storefront title, and links back to your storefront.

#lulu-storefront-items, .lulu-item

This is a ul list that contains the list of your content, each piece of content is contained in an li tag with the class lulu-item.

.lulu-item-thumbnail, .lulu-item-title, .lulu-item-description

These classes control the appearance of each content thumbnail, title and description.

.lulu-item-buynow

This is the styling for the ‘Buy Now’ link for each item.

Example

Our goal for this example is to make the Mini-Storefront blend in with the look of our example website.

We’ll be changing the colors used in the storefront, tweaking the fonts, and finally make the layout look a little nicer. First, let’s take a look at what it looks like before we start:

Changing the Colors

Our example site has some global colors for links, body text, and headers we want to use:

body {
	background-color: #e6e2af;
	color: #24231b;
}

a {
	color: #046380;
}

h1, h1 a, h2 {
	color: #a7a37e;
}

h2 a {
	color: #4b4938;
}

Changing the Fonts

We’re going to use Verdana for our body text, and Helvetica Neue (or Arial if we can’t find Helvetica Neue) for our headers.

body {
	font-family: verdana, sans-serif;
}

h1, h2 {
	font-family: “helvetica neue”, arial, sans-serif;
}

Changing the Layout

Getting the layout to look right will take a little bit more work. We’ll start with lining up the thumbnails and the descriptions. To do this, we need to float the thumbnails to the left:

.lulu-item-thumbnail {
	float: left;
}

.lulu-item {
	overflow: hidden;
}

That’s better, but we want to straighten things up a bit. So we’ll nudge the book descriptions over a bit:

.lulu-item-title, .lulu-item-description, .lulu-item-buynow {
	margin-left: 120px;
	display: block;
}

Oh, and we want to get rid of those annoying bullets in the list of books:

.lulu-item {
	list-style-type: none;
}

Here’s what it looks like with our CSS:

Download Example 1

You can also download a slightly more complex example where I’ve gone through and cleaned things up a bit.

Download Example 2

I hope these get you on your way to customizing the Lulu Mini-Storefront! Feel free to share any ideas, tips, or ask questions in the comments of this post.

Jackson Fox, User Experience Designer

Javascript/HTML

Pros: Easy to add to your site, very customizable
Cons: Helps if you know CSS and HTML

Best For: Personal websites, personal weblogs, sidebars

1. Go to the Lulu Mini-Storefront Wizard
2. Click on HTML/Javascript Widget
3. Copy and paste the widget code on your site
4. Use CSS to style the widget any way you want

Flash

Pros: Easy to add to your site, works well on profiles pages
Cons: A little too big for a blog sidebar

Best For: MySpace, other profile pages

1. Go to the Lulu Mini-Storefront Wizard
2. Click on Flash Widget or MySpace Widget
3. Customize your widget
4. Copy and paste the widget code on your site

Facebook

Pros: It works on Facebook!
Cons: It only works on Facebook!

Best For: Facebook!

1. Go to the Lulu Mini-Storefront application on Facebook
2. Click on Add Application

Jackson Fox, Community UX Engineer