/App_Themes/YourThemeName/style-override.css
All of the default styles for the E-Commerce pages are in /App_Themes/YourThemeName/. By adding style-override.css to override certain default classes and id’s (or selectors) that carry the most visual weight within the overall design, you can leave the core styles intact and adjust and troubleshoot your presentation.
In terms of presentation, the style-override.css file is the lynchpin of the theme pack and is what you will work with most.
Siriusware Inc. recommends that if changes or additions to style properties of the CSS files within the App_Themes folder (flexslider.css, fonts.css, ReservedSeating.css and style.css) are needed, that you keep those changes within style-override.css so that it eases future upgrades.
One way to do this, is to determine the selector that is to be changed, find the default properties in style.css and copy them into style-override.css. Then, remove all of the properties/values you will not change.
Example:
If you wanted to change just the body background color this is what would be in style.css:
body {
background:#1f1f1f;
color:#1f1f1f;
font-family:Arial, sans-serif;
font-size:0.75em;
width:auto;
text-align:center;
}
When you copy and paste it into style-override.css, leave the background color property with the new color value:
body {
background:#ffffff;
}
New Class Selectors
If you need to create new selectors, its best to place them at the end of style-override.css in the section labeled Client-Specific Styles. Of course, you can also include another separate CSS file in the App_Themes folder with your own styles. Please keep in mind however, that the E-Commerce pages will pull in all CSS files in the App_Themes folder in alphabetical order. If you want to ensure that your CSS file is called after style-override.css it should be named something like style-override-custom.css.
Import External Styles
If you need to pull in your existing CSS files to support the E-Commerce pages so that they integrate seamlessly with your full site’s presentation, you can import these into style-override.css. By importing these files you avoid copying the files to the App_Themes folder and creating a separate instance to update and support. Also, by importing them directly into style-override.css you do not have to change the mark up in the MasterPage.
To import external CSS files, they must be the first to be called in the CSS file, otherwise the import does not work. The correct way to import external CSS files into style-override.css look like this:
@import url('https://www.yourURL.com/style/yourCustomStyles.css');