What are the Extra Styles for my Aarcade Big Cartel theme?
Filed in Layout and styles
Depending upon your theme, you may have Extra Styles available in your CSS code that will allow you to make quick changes to specific styling of your theme.
To see if you have Extra Styles available for your theme, locate your CSS edit controls and check for a EXTRA STYLES section – as detailed in the support article How do I locate and use my theme's CSS?
Extra Styles 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? – and can be easily activated and deactivated by setting option values to yes or no.
For example, our Extra Styles may include a page shadow effect that is disabled by default:
/* - - - - Page Shadow */
{% assign display_page_shadow = 'no' %}to enable this, we simply change the setting to yes
/* - - - - Page Shadow */
{% assign display_page_shadow = 'yes' %}Some Extra Styles options require number values. For example, we might have the Header Margin options:
/* - - - - Header Margin
Edit the margin around the header title/image */
{% assign header_margin_top = '12' %}
{% assign header_margin_bottom = '4' %}
{% assign header_margin_left = '0' %}
{% assign header_margin_right = '0' %}If we have uploaded a header image and we wish to indent the image on the left, we would edit this Extra Style group as follows:
/* - - - - Header Margin
Edit the margin around the header title/image */
{% assign header_margin_top = '12' %}
{% assign header_margin_bottom = '4' %}
{% assign header_margin_left = '30' %}
{% assign header_margin_right = '0' %}Click To View Method For Older Themes
Enable / Disable Extra Styles
Your extra styles can be easily activated and deactivated by adding or removing a forward slash after the Enable/Disable asterix.
For example, our Extra Styles may include a page shadow effect that is disabled by default:
/* - - - - Page Shadow
Displays page shadow on modern browsers
Enable/Disable *
#wrap {
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}
/**/
to enable this, we simply add a forward slash immediately after the Enable/Disable *
/* - - - - Page Shadow
Displays page shadow on modern browsers
Enable/Disable */
#wrap {
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}
/**/
Note that each Extra Style group is labelled with a description to explain its effect.
Edit Extra Styles
Extra styles can also be edited using basic CSS. Some groups will be included for this purpose specifically, and therefore not include a Disbable / Enable function.
For example, our Extra Styles may include header margin styles:
/* - - - - Header Margin
Edit the margin around the header title/image */
#logo_block {
margin-top: 12px;
margin-bottom: 4px;
margin-left: 0px;
margin-right: 0px;
}
If we have uploaded a header image and we wish to indent the image on the left, we would edit this Extra Style group as follows:
/* - - - - Header Margin
Edit the margin around the header title/image */
#logo_block {
margin-top: 12px;
margin-bottom: 4px;
margin-left: 30px;
margin-right: 0px;
}
Always click the Save link at the top of the customisation area when you have finished editing your CSS code.
For more information on CSS editing, refer to How do I customise my Big Cartel theme?
Related articles...
- How do I install and uninstall an alternate style block?Layout, Colours & Fonts
- How do I add a background image to my Big Cartel theme?Layout, Colours & Fonts
- Why does my theme change on mobile devices and how do I stop if from doing so?Layout, Colours & Fonts
- Where do I add custom style coding in my Big Cartel theme controls?Layout, Colours & Fonts