As of 28th May 2016, only the most current version of Aarcade themes will receive personal support and updates – read more…

  Back to Top

How do I enable the Big Cartel admin colour and font pickers?

Filed in Colours

For greater levels of customisation we strongly encourage the colour and font customisation methods explained in How do I edit my Big Cartel theme colours? and How do I edit my Big Cartel theme fonts?, rather than those contained in this article. However, in some cases you may prefer to sacrifice this level of customsiation in favour of the convenience of the Big Cartel admin colour and font pickers.

The following article explains how to quickly enable the Big Cartel admin pickers for all of your theme’s colours and fonts, how to enable or override a picker for a specific colour or font and how to use the colour and font picker once enabled.

Enable or disable picker interface for all theme colours and fonts

Aarcade provides Basic style blocks that enable the colour and font pickers for all of your theme’s colours and fonts. To install the Basic style block for your theme:

  1. Visit the Aarcade Extras section
  2. Use the drop down menu at the top of the page to select your theme
  3. Click the Basic style block and follow the installation instructions provided

To reverse the Basic style block installation simply install a different style block for your theme or install your original styles.css theme file to your CSS area.

Enable or disable picker interface for specific theme colours and fonts

Replacing a manual colour setting with a colour picker value and vice versa

Regardless of whether you are using the Basic style block or not, you can still single out specific colour settings in your CSS and set them manually or assign a colour picker value to them.

For example, if you decided you wanted your shop title colour to be different to your colour picker Header Text setting, you can locate the relevant code in the COLOURS section of your CSS..

/* - - - - Shop Title & Header Text */
{% assign shop_title = theme.header_text %}

..and replace the variable with your colour code..

/* - - - - Shop Title & Header Text */
{% assign shop_title = '#cc0000' %}

..ensuring that you correctly enter the hex value with a leading # and surrounded by single quotes.

Refer to How do I edit my Big Cartel theme colours? for more detail on locating and editing your CSS colours.

Conversely, if you decided you wanted to enable the background colour picker for your theme background you can locate the relevant code in the COLOURS section of your CSS..

/* - - - - Main Background */
{% assign main_background = '#f6f6f6' %}

..and replace the colour code with the colour picker background variable..

/* - - - - Main Background */
{% assign main_background = theme.background %}

..ensuring that you replace the hex value and the surrounding single quotes (i.e. do not use quotes with the variable).

The available colour picker variables are:

theme.background

theme.text

theme.links

theme.links_rollover

theme.header_background

theme.header_text

theme.sidebar_links

theme.sidebar_rollovers

theme.products_background
Replacing a manual font setting with the font picker value and vice versa

As with colours (previous article section), you can single out specific font settings in your CSS and set them manually or assign the font picker value to them.

For example, if you decided you wanted your product thumbnail titles font to be different to your font picker setting, you can locate the relevant code in the FONTS section of your CSS..

/* - - - - Product Thumbnail Titles */
#page_main .shop_thumb_title {
	font-family: {{ theme.font | font_family_for_group }};
	font-weight: normal;
	}

..and replace the variable with your colour code..

/* - - - - Product Thumbnail Titles */
#page_main .shop_thumb_title {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	}

Refer to How do I edit my Big Cartel theme fonts? for more detail on locating and editing your CSS fonts.

Conversely, if you decided you wanted to enable the font picker for your general content text you can locate the relevant code in the FONTS section of your CSS..

/* - - - - Content */
body, #page_main {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12px;
	}

..and replace the font family stack with the font picker variable..

/* - - - - Content */
body, #page_main {
	font-family: {{ theme.font | font_family_for_group }};
	font-size: 12px;
	}

Note that the font picker variable is entered differently than colour picker variables.

Setting theme colours with the picker interface

Once you have enabled the colour picker – using one of the methods described in the previous sections of this article – to set the colours for your Big Cartel theme, click the colour box for each option and use the pop-up colour picker to choose a new colour value.

Note that, for most Aarcade Basic Style Blocks, the Header Background colour picker is used for setting the colour of general borders / lines.

Select Colours for your Big Cartel Theme

Using the pop-up colour picker to select new colour values for your Big Cartel theme

Click the Save link when you have finished editing all of your basic options.

Setting theme fonts with the picker interface

Once you have enabled the font picker – using one of the methods described in the previous sections of this article – to set the fonts for your Big Cartel theme, click the drop-down menu and select your desired font.

Theme Font Options

Click the Save link when you have finished editing all of your basic options.

Related articles...