Big Cartel Theme Support

How do I create custom style code?

How do I create custom style code?

You do not need to access or edit your theme’s core CSS files (hosted remotely for Aarcade themes) to customise the appearance of elements within your shop. Your custom style coding area provides a location for you to write CSS code that will override (rather than overwrite) the default styles of your theme.

Your custom style coding can be edited for your saved theme files at your Aarcade admin, via the Custom CSS section of your theme settings - see How do I edit my theme's styles and options? You can also edit the custom style coding for your currently installed theme at your Big Cartel admin - see Where do I add custom style code?

Your Aarcade theme includes extensive classes assigned to the body and content elements. By learning to use your web browser and the basics of HTML and CSS - see HTML & CSS tutorials for non-web designers - you can write your own CSS that focuses on elements in your page via id and class attributes.

Refer to our support article Using the body tag to create page specific custom styles for examples of custom override styles and using the body class to focus these styles.

Why using Aarcade hosted files and applying override styles is the best practice

We host core theme files for the following reasons:

  1. To make installation easier by reducing the amount of code that needs to be installed in your Big Cartel admin area.
  2. To make standard setup and customisation (as required by the majority of users) as easy as possible by reducing and streamlining the code in the theme CSS area, and other theme files, as far as possible.
  3. To allow us to make continued improvements to core theme files that will be applied to all users’ themes automatically.
  4. To reduce the risk of dramatic error created by user editing of core code by reducing the core code available in theme files.

We promote the use of override styles for the following reasons:

  1. Keeping all custom style coding contained in your custom style area means that you can easily identify, review and edit all of the style modifications you have made in one place and quickly revert your theme style back to default if necessary (by deleting part or all of your custom override styles).
  2. Keeping all custom style coding contained in your custom style area means that when you perform future theme version updates you can easily copy your custom styles to your saved theme file at Aarcade admin so your custom styles are installed with your update.
  3. The override styles method forces you to review and be specific with your custom styles. This reduces the risk of changing styles that do not need to be changed or applying styles to elements that you are not focusing on and unwittingly corrupting other parts of your layout.
  4. Troubleshooting - by you or by Aarcade support - when issues occur is a more efficient process, as all CSS customisations can be quickly reviewed when they are grouped in your custom style area.
  5. The override styles method helps you become familiar with important web browser tools and CSS methods that will help you be a better CSS coder.
AarcadeHow do I create custom style code?