Big Cartel’s changes to the CSS / design area removed the ability to create custom colour controls for the Simple Colour Picker. For this reason, with an Aarcade Theme the Colour Picker interface in your Customize design > Customize () admin area is disabled by default and will have no affect upon your theme colours.

But I really just want to use the colour and font picker

We strongly encourage that you read and practice setting theme colours using the method described below. This method provides you with a greater flexibility and understanding of colour customisation and uses the same simple format as your theme custom options (the settings that control the many extra features of your theme – see How do I use the Custom Options for my Big Cartel theme?).

If, after learning the method below, you would prefer to sacrifice some customisation flexibility to enable the admin colour picker – refer to How do I enable the Big Cartel admin colour and font pickers?

Setting Aarcade Theme Colours

To set your theme colours in your Big Cartel admin area, locate your CSS edit controls and look for the COLOURS section – as detailed in the support article How do I locate and use my theme's CSS?

Scroll through the COLOURS section and refer to the headings…

/* - - - - This Is A Style Group Heading */

…to find the element you wish to change the colour for.

Colour style options work in the same way as your other theme custom options – see How do I use the Custom Options for my Big Cartel theme? For example, changing the page background from white to a light green/blue, we locate the Page Background title:

then we select our light green/blue colour (this can be done with the colour picker at the end of this article (see below) or via an online source like w3schools’ CSS Colour Values, COLOURLovers or Design Seeds) and change the hex colour value accordingly:

When changing the hex value, always ensure that you have left the leading hash and the value is enclosed in single quotes, i.e.

{% assign page_background = '#e1ffef' %}

Note that you can also make an element see-through / invisible by setting the colour value to transparent:

{% assign page_background = 'transparent' %}

Click To View Method For Older Themes

background-color: #e1ffef;

background-color: transparent;

Repeat and Save

You can now repeat the above process for each element, as you wish, and finally save your changes by clicking the Save link at the top of the customisation area.

Colour conflicts with default theme styles

In some cases your theme might include extra styles that do not suit your new colour choices. For example, the Tupelo theme has a grey background pattern applied to the main content area and also a white shadow on some text that looks subtle against a light background but looks extreme against a dark background.

If you encounter a style that conflicts with your preferred colour choices or desired appearance, simply review your Extra Styles section to deactivate or edit the related styles as needed.

Choosing Colours

To choose hex colour values refer to the w3schools.com hex colour resources, online colour communities like COLOURLovers or Design Seeds or use the tool below – click “select colour” – to define your own custom values.

Semiopaque colours

Click here to launch the advanced colour picker including colour codes with transparency/opacity settings.