By marie_t on

Sparkle*Shelf

We have just launched the Beta release of Sparkle*Shelf (http://sparkleshelf.com), a site that provides beauty enthusiasts with the latest information and tutorials on fashion, hair and makeup. We currently host fifteen regular feature writers, who contribute a total of 3-5 articles a day.

Sparkle*Shelf is also a place for members to connect with other like-minded members. There are basic social networking features as well as a number of beauty related applications/games, such as polls, quizzes and "smack-downs".

Design

We spent a good amount of effort developing the Sparkle*Shelf theme. It took a while to get our brains wrapped around Drupal, but we are now total converts. We use Panels 2 and Views quite a bit, and take full advantage of the file templating features in core. Many many hours have been spent tweaking the layout - we've been able to do some amazing things with CSS alone.

Content Types and Applications

The site supports the following content types:

  • Feature Content - these are the primary beauty related articles. Each article is assigned to one of the three categories of the site - Makeup Studio, Hair Salon and Wardrobe. Content shows up in categorized lists on the frontpage and as a teaser on the appropriate landing pages for each of the categories.
  • Beauty Dilemma - this is an advanced poll with an image field. Users ask the community for advice about decisions they are making.
  • Beauty Polls - simple beauty related polls
  • SparkleIQ (Quizzes) - Quizzes Use the Quiz module to create personality-style quizzes.
  • Celebrity Smackdown - We use the Smack-down module to create a fun Celeb vs. Celeb game
  • What's in your bag? - members can upload a picture of what's in their purses/bags.

Roles

The site has four roles - Admins, Feature Writers, Authenticated Users and Anonymous Users. Registered users can create What's in Your Bag and Beauty Dilemma nodes. Feature writers can also post articles (we use Workflow-ng to manage workflow). Admins create the remaining content types.

Social Networking

We're using Advprofile along with Buddylist and Nodeprofile to create "Beauty Profiles." We've integrated "What's In Your Bag" and "Beauty Dilemma" content types as well - if a user has created either of these content types, the latest items will show up in her (or his) profile.

Feature Writers have their own promotional pages - we thought it would be nice for them to be able to point to a personalized homepages with all of their content. See here for an example.

General Comments

We started working on this project, we were intimidated by Drupal. However, we've been extremely impressed (and thankful) with the amount of active support available in the community. Whenever we came across a problem that stumped us, we were eventually able to find a solution. So thanks to all of the active contributors!

-Marie

⋅ Categories: Drupal 5.x

Comments

zilla’s picture

zilla commented

marie,
this is an outstanding site - look and feel is awesome, utility is perfect - simple but with exactly the right mix of features...as a man, i have little personal interest other than a quick vote for lindsey lohan, but am going to ping some female friends..

are there image uploads or gallery tools for users? that could be a very cool feature (for dilemmas for example)

one idea: how about a "rate my look" area for users? for example, a user could submit a 'style' and others could vote it up and down, comment and so on, and 'save' the look...

at any rate, wonderful job. i'd love to hear more about the mechanics - modules used, how long it all took (design and dev) and how launch has been going...

seriously, *really* nice work!
-dave

........................................................................
i love to waste time: http://twitter.com/passingnotes

marie_t’s picture

marie_t commented

Yes, we are looking into adding user image galleries in the next month or two, but still trying to decide on the best implementation. If you have any suggestions we are all ears! And we might add the image rating module as you mentioned, we figure the more "stuff" there is to do on the site, the better.

Launch has been going well so far. It has been just 1 week, so not a ton of traffic, but so far good feedback and no tech problems have come up! We are using Slicehost for hosting, which has been excellent, especially the backup service. You can take a snapshot of the entire server setup, and restore to a different slice. So we set up a test slice & a live slice, and can play around on test before deploying something on the live site. So far so good.

The site from concept to launch took about 5-6 months, with 2 people actively working on it. We were able to do everything ourselves (design, ui, web dev, drupal customizations, etc.) Now that we understand how Drupal works, we really love working with it. At first I was skeptical but now realize the power of Drupal! ;)

I'd be happy to provide more info on specific areas, modules or setup, just let me know what you want to hear about. Thanks again!

gorcon’s picture

gorcon commented

I'm also a fan of slicehost. Out of curiosity, what size slice are you hosting this on at the moment? Have you found it necessary to upgrade your slice since you officially launched?

gav240z’s picture

gav240z commented

Hi Marie,
Are you able to share tips on how you achieved the primary navigation? I took this design as inspiration to do my own similar style primary nav, but I am having trouble getting it to work.

I tried looking at the CSS but because its compressed with drupal I find it hard to understand it.

Alternatively if you can point me in the direction of a tutorial that allows you to achieve this kind of thing I'd appreciate it.

JohnForsythe’s picture

JohnForsythe commented

Nice design, it looks very high-end. All the little variations and details are great. The layout flows, all the color choices work, and you even seem to have a bunch of relevant content. Good job!

--
John Forsythe
Need reliable Drupal hosting?

mz906’s picture

mz906 commented

Marie,

to what extent do you use custom blocks? and do any assigned roles have privileges to move blocks between regions? i'm working on a drupal site and i'm in limbo as to give users this role and give me the headache of dealing with custom blocks/regions :\

marie_t’s picture

marie_t commented

Hmm, we use some custom blocks, but not a ton actually. The ones we do have are pretty simple (like sidebar promos, blocks from views, etc). Most customization was done lots of work with Views, lots. We don't have any assigned roles with privileges to move blocks, the idea of letting users do that frightened me (i like to have control, hehe), so shyed away from it for now. :)

Michelle’s picture

Michelle
she/her
Primary language English
Location Wisconsin, USA
commented

All that with just a small staff? That's impressive. Really shows off what Drupal can do without millions of VC cash. :)

Nice writeup, too. I'm going to promote it so be prepared for a lot more questions. ;)

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

marie_t’s picture

marie_t commented

Awesome, thanks michelle! Also, you should know that your Advprofile module & tutorial made us extremely happy, thanks for such a great how-to. It really made things SO much easier to get going.

Michelle’s picture

Michelle
she/her
Primary language English
Location Wisconsin, USA
commented

Glad you like it. Also always nice seeing someone using it that changed it up a bit so it isn't just the stock "out of the box".

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

derekhu’s picture

derekhu commented

I am really impressed by the site - especially considering the small staffing level and the short timeframe.

Wish you all the commercial success.

droople’s picture

droople commented

Very nice

just gave my girlfriend the link, she likes it. She says it reminds her of teamsugar.com another drupal site she loved

DerTobi75’s picture

DerTobi75 commented

Exatcly! That was the first thought, looks a lot like teamsugar.com ;)

What ever, Sparkle*Shelf is a great website!

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented

Hope that's ok, but I added a screenshot of this site cos it shows off your nice theme work, AND makes it look nicer on the front page. ;)

marie_t’s picture

marie_t commented

of course, thanks for doing so! :)

xmacinfo’s picture

xmacinfo
he/him
Primary language French
Location Canada
commented

This site is impressive and professionaly done.

I can't find any flaw.

Bravo!

/*_*/
http://www.xmacinfo.com

BioALIEN’s picture

BioALIEN commented

Just goes to show with the right attitude and time spent on theming you can shape Drupal however you like :)

Everything looks great, my only constructive criticism is to spend a bit more time tweaking the typeface and size to get a good balance. There are areas where you use three different font sizes in one block (e.g. http://sparkleshelf.com/wardrobe) although this is probably down to giving the editors too much freedom to decorate their contributed content ;)

Well done and best of luck.
---
Dee
iScene Interactive :: iScene.eu

minesota’s picture

minesota commented

Superb and super excellent job done. Many congrats !

gecegiyim’s picture

gecegiyim commented

thank you

dadone’s picture

dadone commented

Good job! You've done a great site. The power of Drupal. :D

DominatorMaster’s picture

DominatorMaster commented

Hi Marie_t,

awesome work with the site :D

Just a little question:
how did you manage the newsletter feature? I'm trying to find a module for drupal 6.x to do this but seems impossible :S

Phillip Mc’s picture

Phillip Mc commented

it looks like it's being handled by campaignmonitor.com or cmail1.com....(that's what is displayed when viewing source on the unsubscribe page), which, I guess is either a simple HTML form pasted into a block for the sign-up and into a page for the unsubscribe option or it's the Campaign monitor module.

I like the mixed email (it arrives in text and html format).

great work all around.

DominatorMaster’s picture

DominatorMaster commented

though was drupal 6.x and not 5.x, so this module can't wrk with it afaik

Michelle’s picture

Michelle
she/her
Primary language English
Location Wisconsin, USA
commented

They must be using 5.x since they're using panels.

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

Phillip Mc’s picture

Phillip Mc commented

Threads on drupal.org have version tags and the original post was tagged as 5.x....

Besides, very few people are using Drupal 6 yet, Dominator. According to blamcast.com

Drupal 4.x installs outnumber Drupal 6.x almost 6 to 1...the indisputable fact is that of the 1370 sites surveyed, 96% of them have chosen not to upgrade to Drupal 6 yet

....which means for the next few months, the majority of live sites out there would be 5.x

marie_t’s picture

marie_t commented

Yes we are indeed using drupal 5.x

sepeck’s picture

sepeck commented

Known installations via update module reporting. Update module is an add on for 5 so it would be expected to be under-reporting.
* 6.x: 26,661 active installations
* 5.x: 15,574 active installations

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

marie_t’s picture

marie_t commented

We are using Campaign Monitor with the Campaign Monitor module that adds the subscribe checkbox on the registration page. For other areas on the site we just made custom blocks that has the code supplied by campaign monitor. We're using drupal 5.x so i don't know about compatibility with 6.x, but this is working well for us (for now anyway!)

Legend’s picture

Legend commented

Very nice site, and well done!

Phillip Mc’s picture

Phillip Mc commented

just to echo the other comments on here. great work and I like the attention you have given to typography. So many sites focus on the wow and gloss over typography...you guys have managed to get both nailed. THe site is very well put together and a great example of Drupal being used well.

Sree’s picture

Sree commented

nice work!

-- Sree --
IRC Nick: sreeveturi

NikLP’s picture

NikLP commented

I got 8 out of 10 on the shoe quiz. What the sweet HELL is that about?!

Drupal Build & Development in Nottingham by Kineta Systems

rszrama’s picture

rszrama commented

Hmm... I would've expected you to do better. ; )

----------------------
Drupal by Wombats | Current Drupal project: http://www.ubercart.org

Gibb’s picture

Gibb commented

It's really beautiffuly and gracefully!

Tod27’s picture

Tod27 commented

In spite of everything - top-class work!

toma’s picture

toma commented

Celebrity Smackdown - We use the Smack-down module to create a fun Celeb vs. Celeb game

I try the Smack down module, work fine for me, but i don't know how to make it more design! do you mind share trick to how to design ?

Thanks

---
Drupal Tutorials
http://www.alltutorials.org/latest/Drupal

marie_t’s picture

marie_t commented

We did all the custom design with CSS. We did just 1 small hack to the smackdown module code, to display an image button instead of the form button. But all other custom design was done entirely with CSS! In fact that is also true for 90% of the design customization on the entire site, all CSS. :)

toma’s picture

toma commented

The magic of CSS, could your share your small hack :) because its get the module looks great!

---
Drupal Tutorials
http://www.alltutorials.org/latest/Drupal

marie_t’s picture

marie_t commented

Sure! But here's my disclaimer: Keep in mind this is a total hack, and probably not the "proper" way to do things... but it does work, hehe. ;)

In smackdown.module, on line 635, we replaced the form vote functions/buttons with the code below (replace "yourthemename" with your theme). NOTE we had to add an extra hidden input field to make it work in IE7. 

function theme_smackdown_vote_ref_1($form) {
  return '<div class="smackdownButton1"><input type="image" border="0" src="/sites/all/themes/yourthemename/images/button_vote.gif"  class="form-submit" value="'. $form['#value'] .'" id="edit-vote-ref-1" name="op"/> <input type="hidden" value="'. $form['#value'] .'" id="edit-vote-ref-1" name="op"></div>';
}

function theme_smackdown_vote_ref_2($form) {
  return '<div class="smackdownButton2"><input type="image" border="0" src="/sites/all/themes/yourthemename/images/button_vote.gif"  class="form-submit" value="'. $form['#value'] .'" id="edit-vote-ref-1" name="op"/><input type="hidden" value="'. $form['#value'] .'" id="edit-vote-ref-1" name="op"></div>';
}
toma’s picture

toma commented

Thank you a lot for sharing this code, i think you may this function to template.php of your theme 

function yourthemename_smackdown_vote_ref_1($form) {
  return '<div class="smackdownButton1"><input type="image" border="0" src="/sites/all/themes/yourthemename/images/button_vote.gif"  class="form-submit" value="'. $form['#value'] .'" id="edit-vote-ref-1" name="op"/> <input type="hidden" value="'. $form['#value'] .'" id="edit-vote-ref-1" name="op"></div>';
}

function yourthemename_smackdown_vote_ref_2($form) {
  return '<div class="smackdownButton2"><input type="image" border="0" src="/sites/all/themes/yourthemename/images/button_vote.gif"  class="form-submit" value="'. $form['#value'] .'" id="edit-vote-ref-1" name="op"/><input type="hidden" value="'. $form['#value'] .'" id="edit-vote-ref-1" name="op"></div>';
}

---
Drupal Tutorials
http://www.alltutorials.org/latest/Drupal

cloneofsnake’s picture

cloneofsnake commented

ALL CSS?!!! Beautifully done!!! Got to mention this is the first time I see the CSS "z-index" put to good use... I really like how you used that to rotate your front page's main blip / picture instead of using Flash. Besides making it super easy to update, what other advantages do you find compare to Flash and other ways the other sites use. (What other ways are there?)

<div class="homeFeaturePost2">
<ul id="featurepics" class="innerfade" style="position: relative; height: 336px;">
<li style="z-index: 4; position: absolute; display: none;">
<a href="node/718">
</a>
</li>
<li style="z-index: 3; position: absolute; display: none;">
</li>
<li style="z-index: 2; position: absolute; display: list-item;">
</li>
<li style="z-index: 1; position: absolute; display: none;">
</li>
</ul>
</div>
tjholowaychuk’s picture

tjholowaychuk commented

Whats hard to believe about pulling a site like that off with just CSS? that is not an issue at all these days
____________________________________________________
Tj Holowaychuk

Vision Media - Victoria Web Design

dman’s picture

dman commented

that is not an issue at all these days

... unless you are aware that 25% of the web audience still uses IE6, no.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

tjholowaychuk’s picture

tjholowaychuk commented

Or just write CSS properly... yes you have to use hacks here and there, although personally other than the odd conditional comment I have not really used CSS hacks in a good year or so.

____________________________________________________
Tj Holowaychuk

Vision Media - Victoria Web Design

dman’s picture

dman commented

OK, so you find what this site did is not an issue at all, and you never find any problem with making your pure-css designs work in IE6. That's pretty cool.

So would you be surprised to find there were at least three visible problems with that nice front page when looked at with IE (Two big common layout/float ones, one peekaboo-background) ? Or does this mean that you'd say they just weren't writing CSS properly?

Me, I'd be impressed (like cloneofsnake was) if I didn't see a glitch or two with a layout that ambitious and css-clean.
I save my surprise for someone getting three-column, textured, image-bordered, equi-height fluid layouts working in IE6 with pure-CSS. I'll admit I still find that an issue.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

tjholowaychuk’s picture

tjholowaychuk commented

If you take each subsection of the site one piece at a time its not really a huge issue, but what I found working with other firms is that they would often finish the entire site ( or most of it ) viewing only a single browser, and then begin to patch up the other browsers. I find viewing several repeatedly really nearly eliminates this problem other than obvious hacks such as png fixes etc.
____________________________________________________
Tj Holowaychuk

Vision Media - Victoria Web Design

dman’s picture

dman commented

Very Good advice.
I agree that the often touted 'make it work perfectly, then patch it' approach is a huge time sink of a way to try it, and leads to painful re-works.
It also helps to know WHICH changes to worry about.

Thinking about it, in that way teamwork is sometimes better than (my usual) solo approach, because as soon as some designer says they've done something, I open up IE and say "uh huh? really?". It does cut down on nested rework problems ;-)

I'll try to remember that to apply to my own efforts ;-)

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

tjholowaychuk’s picture

tjholowaychuk commented

Agreed for sure, a seasoned themer will often just generally get the idea of what will be buggy and what will not, so as you said they can simply just take a quick look. When I have time soon I was thinking of integrating several browsers into the IDE I use (it currently allows for FF to be embeded) so that I can quickly view/pan around the site with 4-5 browsers at the same time ALSO while having my CSS right there on the same screen.

haha so true
____________________________________________________
Tj Holowaychuk

Vision Media - Victoria Web Design

tjholowaychuk’s picture

tjholowaychuk commented

Both the innerfade ( the plugin they used ) and cycle plugin ( my favorite ) do this very well http://www.malsup.com/jquery/cycle/
____________________________________________________
Tj Holowaychuk

Vision Media - Victoria Web Design

kittycole’s picture

kittycole commented

I'm new to Drupal and just starting to learn how it all works. Your site is very cool and I can't wait to be able to produce this type of design. Kudos to all your hard work...it's amazing. Clean, fresh, inviting...a site to enjoy!

stephit’s picture

stephit commented

The site is well-executed, but I really wish we could find more positive things for teenage girls and young women to put their attention on other than their hair, clothes and make-up. It's just sad to me that women put so much time, effort and money into this sort of shallow crap.

Sorry...but geez I'd love to see some mainstream content for women out there that was not

a) mindlessly fashion-focused
b) celebrity-focused
c) shallow self-help focused (i.e., 10 ways to get your man to pay more attention to you)

For all the talent that went into this website, it's sad that the end result is yet another advertiser-driven bit of brainwashing that is going to encourage young women to become anorexic and hate themselves for not being pretty enough.

*end o' rant*

tldavid’s picture

tldavid commented

Hi
I'm new to Drupal, I think this site is clean and engages users well. Drupal helps all of us to be the change we want to see. Maybe you could start a site that does what you mention above. If you have already done it, share it with us :-)

TL

playts’s picture

playts commented

Hi nice post!

drupal5.x http://www.zbcpet.com

gecegiyim’s picture

gecegiyim commented

thankss :)

ricardobeltranl’s picture

ricardobeltranl commented

Super cool site design!! Congratulations!!
What theme did you use as a source of inspiration or base to accomplish this?
Do you think that using a CSS based theme like Zen Garden will reduce the work spent on a similar design?

tjholowaychuk’s picture

tjholowaychuk commented

You should always use a base theme, we have our own internal 'clean' theme optimized for SEO etc but yeah starting with base markup and a base stylesheet is defiantly something you will want to do.
____________________________________________________
Tj Holowaychuk

Vision Media - Victoria Web Design

marie_t’s picture

marie_t commented

Yes, definitely start with a base theme, then modify. We used a very very basic theme that I can't recall (very similar to Zen theme), and built upon that, which was very helpful. I would say it def saves time to modify an exiting theme. Of course you will need to spend many many hours customizing and theming, but still, better than starting from scratch entirely! :)

iamwhoiam’s picture

iamwhoiam commented

That's a fantastic layout.

How many members do you have in your userbase?

Also - what module did you use to enable member activity on the frontpage?

marie_t’s picture

marie_t commented

We used the Activity module for the member activity which has been working really well.
http://drupal.org/project/activity

You can customize which actions display a message, as well as customize the actual text in each message. I actually recently played with using workflow for activity on our test server (there is a great video tutorial somewhere for that), but for us, the activity module is the better solution.

As far as members in our userbase, it's not a huge amount, but growing rapidly. :)

Anonymous’s picture

Anonymous (not verified) commented

This site is great and again show that Drupal can power social networking sites!

Congrats!

--
Drupal rocks!
4Linux goes Drupal case: http://drupal.org/node/284589