Working with User CSS

The General Styling changes that can be made using the "Colors" tab is great as a starting point but to really dial in your design you would need to write the CSS or Cascading Style Sheets.

To edit your theme's User CSS, go to Online Store > Design Modify Theme then click the tab marked "CSS"

There are two separate boxes on this page. One is Desktop User CSS and the other is Mobile User CSS. The first one is for the Styles used for the "Desktop" view of your website such as from a Desktop Computer or a Laptop. The second one is for the "Mobile" view of your website from Mobile Devices like Androids and iPhones.

You can directly type in your code into these boxes and enjoy Syntax-Highlighting, Line Numbers, and Context Menu Tags or you can also just paste in your code from your favorite Code Writing program and just paste it in.

Important Note:

When writing Custom CSS always use Classes instead of IDs. This is to prevent your CSS from being invalidated by updates we roll out.

Once your Desktop and/or Mobile CSS is ready, click the "Apply" button to save your work. Be sure to check your website on multiple browsers and resolutions for desktop and multiple devices for mobile changes to make sure your website is not rendered unusable by CSS mistakes.

For Mobile, we recommend using Google Chrome's Built In Inspect Elementwith Mobile Emulation then Browserstack.com for physical mobile devicesfor a more accurate look.

CSS Class-names and Rules

Almost all of the class-names are static and available for your to edit. For an advanced user, using a browser INSPECTOR is recommended. Where is the code inspector located in my browser? Find it here: http://debugbrowser.com

Page-Class names are available for you to use as a PAGE selectors. By calling a bodyPage class name, you can define on which page you want your css changes to be applied to. All of our pages are supported. Please see the class list and comments below:

/* ========================================================================== BASE SELECTORS ========================================================================== */ body.bodyHome {} /* HOME PAGE ONLY SELECTOR */ body.bodyOther {} /* ALL PAGES, BUT SKIP HOME PAGE SELECTOR */ /* ========================================================================== DEVICE SELECTORS ========================================================================== */ body.desktop {} /* VISTOR UA IS DESKTOP DEVICE SELECTOR */ body.mobile {} /* VISTOR UA IS MOBILE DEVICE SELECTOR */ /* ========================================================================== PER PAGE SELECTORS ========================================================================== */ body.category {} /* CATEGORY PAGE SELECTOR */ body.products {} /* SEARCH PAGE SELECTOR */ body.product {} /* PRODUCT PAGE SELECTOR */ body.about {} /* ABOUT US PAGE SELECTOR */ body.contact {} /* CONTACT US PAGE SELECTOR */ body.sitemap {} /* SITEMAP PAGE SELECTOR */ body.returnpolicy {} /* RETURN POLICY PAGE SELECTOR */ body.privacypolicy {} /* PRIVACY POLICY PAGE SELECTOR */ body.terms {} /* TERMS PAGE SELECTOR */ body.faq {} /* FAQ PAGE SELECTOR */ body.links {} /* LINK TO US PAGE SELECTOR */ body.articles {} /* ARTICLES INDEX PAGE SELECTOR */ body.articledetails {} /* ARTICLE DETAILS PAGE SELECTOR */ body.login {} /* LOGIN AND REGISTER PAGE SELECTOR */ body.cart {} /* SHOPPING CART, WISHLIST, REGISTRY PAGE SELECTOR */ body.dashboard {} /* USER DASHBOARD PROFILE PAGE SELECTOR */ body.dashorderhistory {} /* USER ORDERS HISTORY PAGE SELECTOR */ body.specials {} /* SPECIALS PAGE SELECTOR */ body.checkout {} /* CHECKOUT PAGE SELECTOR */ /* ========================================================================== DOM ========================================================================== */ body.StillLoading {} /* ON DOM READY - DOCUMENT READY - is removed on document ready */ body.NotFullyLoaded {} /* BEFORE A FULL PAGE LOAD - WINDOW LOAD - is removed on window load */

We encourage you to stack up all the different class names. Example - let's grab a footer on home page, desktop version only: