10 Tips for Storenvy CSS Tutorial

Hey guys, I opened up anther storefront on Storenvy: Oh My Kokoro!!!

It was a great idea because a)listings last forever, b)customizable look, c)more profit per item since there isn't a listing charge of $0.20 and 3.5% sale price fee from Etsy. I do believe that Etsy brings in a lot of traffic for those looking for the type of things that I make, is SUPER EASY when you need to duplicate listings, and feedback system (which you need to link externally on Storenvy).

One of the major things that bothered me was although there was a customizable shop with decent layout, there was only ONE option as a layout!!! It took me 3 days worth of working on CSS to get to the decent quality as it is now. I'll be sharing the things that I learned about CSS during this process!

1. When at a loss, search "CSS" or "html" in Storenvy's forums! There are always a few friendly and helpful people there.
2. COPY&PASTE STORENVY CSS: 
   http://www.storenvy.com/themes/default/stylesheets/styles.css OR edit the one that you're given (otherwise, you'll be stuck with the basic layout) ♥♥♥
3. If you want your background to show through your header, save your header image as a png file! It allows transparency while keeping a high image quality!
4. The holy grail of customizing Storenvy: http://www.assault.it/2009/12/29/tutorial-how-to-create-an-online-storefront-with-storenvy/ (here is the less helpful Storenvy customizing guide too: http://www.storenvy.com/help/store-customization)
5. Learn what certain codes are: http://www.w3schools.com/ (I have very limited knowledge of html but know #FFFFFF, image properties, and linking)
6. If you have Chrome, highlight some words and right click to bring up "Inspect Element" to lead you to a customizing panel where you can try out colors before you finally put them in your CSS.
7. Want to use custom fonts? Use http://www.google.com/webfonts to pick out a font/typeface and embed it into your shop... easy directions at the link! :D
8. LABELING: /*: blahblahblah :*/ allows you to label an aspect that you want to customize, such as button or sidebar color AND it will show up on Easy Mode. [NOTE: Storenvy didn't really have everything that could be labeled as a label (for beginner's sake). Add the extra labels yourself so you can just Ctrl+F/Cmd+F the color (just figured it out now when I was writing this ^_^').]
9. Most common "fixes": Product Slider, Collections in Sidebar instead of top, Removing the main border, get rid of sidebar line <hr>, Stopping & Starting HTML Marquees
10. Finally, when you're at a loss, look at your favorite Storenvy shop and right click "View Page Source" to see what they did RIGHT in customization!!!

Please post in the Storenvy forums with CSS in the topic if you have any questions about CSS.

EDIT 2/10/13: Here are some examples of my favorite shops:

• http://juby.storenvy.com/ - prints for sale, nice background and few modifications
• http://shilin.storenvy.com/ - prints and GN for sale, advanced modifications
• http://lunabowtique.storenvy.com/ - bows for sale, simple and clean, few modifications
• http://catscratch.storenvy.com/ - acrylic charms for sale, big header image, few modifications
• http://bowkuma.storenvy.com/ - bows and cute things for sale, heavily modified CSS
• http://store.kumacrafts.com/ - Sailor Moon jewelry, heavily modified CSS