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