Big Cartel Theme Support

Using the body tag to create page specific custom styles

Using the body tag to create page specific custom styles

Editing your theme CSS file (as detailed in this article) is not the preferred method for changing your theme style.

Instead, wherever possible, use the tools provided at your Aarcade admin area per How do I edit my theme's styles and options?

The body tag..

<body>

..web page content..

</body>

..defines the body on all web pages and contains ALL of the visible page content (i.e. menus, text, images, links, etc.).

With Aarcade themes the body tag is assigned a number of classes and a unique id for each page that are specific to the nature of the page content as well as your own custom option settings.

For example, if our shop has a page called Press and we navigate to this page and inspect the body tag - using our web browser developer tool as explained in the HTML & CSS tutorials for non-web designers - we will find it appears similar to the following.

<body id="about-us-press-page" class="uptown version-3-1 assets-3-0 custom page-1 mobile-ui-enabled is-page is-sub about-us-press logged-in cart-empty no-socials no-logo maintenance-mode is-safari is-macos large-monitor yes-pointerevents yes-svg yes-placeholder yes-cookies post-load">

We note that the page has a unique id about-us-press-page and - if we want to apply a style that only affects this page - we can use this id to create Press page specific styles.

For example, let’s say we wanted the Press page content area to be narrower (say 600px), we could paste the following style group into the style coding area - see Where do I add custom style code?

/* Narrow center aligned content on Press page */
body#about-us-press-page main {
	max-width: 600px;
	margin: 0 auto;
}

Here we have prefixed the element that we wish to style with body#about-us-press-page to ensure that the style is only applied to the Press page.

We ensure that there is a space between body#about-us-press-page and main. When separated with a space this means that the style will be applied to any element main that is found contained within the element body#about-us-press-page.

Let’s say instead that we wanted to narrow the page, as we did above, but we want to apply it to all custom pages (i.e. non-product pages). Reviewing the classes of the body tag..

<body id="about-us-press-page" class="uptown version-3-1 assets-3-0 custom page-1 mobile-ui-enabled is-page is-sub about-us-press logged-in cart-empty no-socials no-logo maintenance-mode is-safari is-macos large-monitor yes-pointerevents yes-svg yes-placeholder yes-cookies post-load">

..we can see that the class custom is included. It is this class that identifies a custom page and is present for custom pages only. So, revising our previous code accordingly, we can apply our style to all custom pages as follows:

/* Narrow center aligned content on all custom pages */
body.custom main {
	max-width: 600px;
	margin: 0 auto;
}

Note that we use . for classes and # for id’s. This is something we learnt in the HTML & CSS tutorials for non-web designers.

Your home page has the body id home-page, so we use a # to indicate the id, for example:

/* Hide category navigation on the home page */
body#home-page .category-nav {
	visibility: hidden;
}

For another example, let’s say we wanted a custom background image for our home page. We can copy the format from the BACKGROUND IMAGE section of our CSS file, paste it in our custom CSS area and edit it to suit our needs:

/* Custom home page background image */
body#home-page {
	background-image: url('http://my-web-space.com/my-background-image.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
}

For maximum flexibility, Aarcade themes add common classes to product pages as well. For example, all category pages will have the class is-category applied to the body tag. So we could apply styling specific to all category pages with..

/* Category specific styles */
body.is-category #an-element-id {
	color: #456789;
}

..or to a specific category (in this case “Mens - Sweaters” which adds the body class “mens-sweaters”) with..

/* Category specific styles */
body.is-category.mens-sweaters #an-element-id {
	color: #456789;
}

Excluding pages

With the CSS :not selector you can create custom styles that exclude, rather than include, specific pages.

For example, if we wanted our uploaded background image to be applied to our home page only, we could set the body background image to none for all pages except the home page with the custom CSS:

/* Remove background image from all pages except home */
body:not(#home-page) {
	background-image: none;
}

States and browser characteristics

So far our examples have discussed id’s and classes that relate to the page location within your shop. Aarcade themes also include classes that relate to the page state and the visitor’s web browser and operating system. These classes include:

Page loading state classes:

.pre-load .post-load

Operating system classes:

.is-ios .is-android .is-windows .is-macos .is-unix .is-linux .is-uos

Web browser classes:

.is-ie .is-chrome .is-safari .is-firefox .is-opera .is-ubrowser

Web browser support classes:

.yes-pointerevents .no-pointerevents .yes-svg .no-svg .yes-placeholder .no-placeholder .yes-transforms .no-transforms .yes-touch .no-touch .yes-cookies .no-cookies

Web browser display size classes:

.small-mobile .medium-mobile .large-mobile .small-monitor .medium-monitor .large-monitor .extra-large-monitor

Mobile user interface state classes:

.mobile-ui-enabled .mobile-ui-disabled .mobile-ui-on .mobile-ui-off .mobile-menu-open

Header image and social icon classes:

.no-logo .has-logo .has-socials .no-socials

Cart state classes:

.cart-empty .cart-nonempty .cart-single .cart-multiple .discount-active .discount-lowercase-discount-name (discount classes work for PayPal standard off-site checkout only)

Custom CSS

Use your web inspector tool, built into your web browser, to find the appropriate body id or class to use for your own custom style coding. Don’t forget to save after making changes.

For more information on creating custom CSS, refer to How do I create custom style code?

AarcadeUsing the body tag to create page specific custom styles