Design > Appearance Tab Overview

Customize, Website, Design, CSS

Dan McCarty avatar
Written by Dan McCarty
Updated over a week ago

The Design > Appearance tab will allow a knowledgeable CSS (Cascading Style Sheets) user to modify your CrystalCommerce website.

For major changes to your website submit a design request by clicking the Design tab. The default landing page is the Design Request form. 

Remember, any HTML code, Javascript, etc will be removed because the editor is only for CSS. The CSS changes will also override defaults styles in your website, so we recommend keeping your changes minimal to avoid potential problems. CSS changes may affect the layout and viewing experience, especially on mobile devices, so we recommend that you thoroughly test your updates. It is very important to save a copy of your custom style sheet locally on your computer, in case you need to modify or delete the changes you made in your website.

Here are few CSS declarations you can add to your website if you want to give it a try. Remember to save your work.

/*=====================================*/
/* Header bgcolor and text color/size */
header.site .top-bar {
    background-color: #fff;
    color: #000;
    font-size: 14px;
}
/*=====================================*/
/* Header links */
header.site a {
    color: red;
}
/*=====================================*/
/* Header navigation */
.header .site-pages a {
    color: red;
}
/*=====================================*/
/* Header lower section (if available) */
.header .bottom-bar {
    background-color: #404040;
}
/*=====================================*/
/* Body background */
body {
    background-color: white;
}
/*=====================================*/
/* Links */
a {
    color: blue;
}

/* Standard button colors */
a.button.utility.view {
    background-color: #f2f2f2;
    color: white;
}
/*=====================================*/
/* Addtocart button colors */
.utility-button.add-to-cart {
    background-color: #00a9c7;
    border-color: #007e94;
    color: white;
}
/*=====================================*/
/* Checkout button colors */
.utility-button.checkout {
    background-color: #00a9c7;
    border-color: #007e94;
    color: white;
}
/*=====================================*/
/* Wishlist button colors */
.utility-button.add-to-wishlist {
    background-color: #f2f2f2;
    border-color: #aaaaaa;
    color: black;
}
/*=====================================*/
/* Footer background and link color/size */
footer.site {
    background-color: #fff;
    color: #000;
    font-size: 14px;
}
/*=====================================*/
/* Footer links */
footer.site a {
    color: blue;
}
/*=====================================*/
/* Footer lower section bgcolor */
footer.site .footer-legal {
    background-color: #404040;
}
/*=====================================*/

For an overview of the Design tab Click Here

Did this answer your question?