Styling the Squarespace Flatiron

Squarespace's Flatiron template makes eye-grabbing use of image-intensive index pages. Figure 1 shows such an index page, and Figure 2 shows another view of the same page after clicking the top/middle index image. Is it possible to write CSS style rules to affect the two views differently? The answer is yes. 

Figure 1. Home view of a Flatiron index page

Figure 2. The same page after making a selection

I refer to Figure 1 as the home view, and to Figure 2 as the detail view. You can distinguish between the two by a class in the <body> tag. The following code shows that tag and the many class names that are mentioned within it in the home view. Squarespace adds a class named index-detail to denote the detail view shown in Figure 2.

<body class="page-index mobile-style-available site-alignment-center 
             site-titlelogo-position-right header-position-fixed 
             project-hover-zoom project-hover-panning project-squares 
             blog-borders show-author  social-icon-style-normal 
             show-category-navigation product-list-titles-overlay 
             product-list-alignment-center product-item-size-11-square 
             product-image-auto-crop product-gallery-size-11-square 
             product-gallery-auto-crop show-product-price 
             show-product-item-nav product-social-sharing   
             event-thumbnails event-thumbnail-size-32-standard 
             event-date-label event-date-label-time event-excerpts 
             event-list-date event-list-time event-list-address 
             event-icalgcal-links      opentable-style-light 
             newsletter-style-dark small-button-style-solid 
             small-button-shape-square medium-button-style-solid 
             medium-button-shape-square large-button-style-solid 
             large-button-shape-square button-style-default 
             button-corner-style-square native-currency-code-usd 
             collection-layout-default collection-type-index 
             collection-53dfdf00e4b0f730baf5c6df view-list 
             homepage" 
      id="collection-53dfdf00e4b0f730baf5c6df">

What's tricky is that you'll see the exact same <body> tag for both pages when you view the HTML source for the pages behind Figures 1 and 2. The index-detail class is added by JavaScript when you click an index image, and is not visible when you view the page source. It is visible however, when you inspect the body element using your browser's object inspector. Figure 3 shows the view from the inspector, and you can see the index-detail class highlighted in red.

Figure 3. The index-detail class added to the body element

Knowing about the index-detail class allows you to style your detail view differently from your home view. For example, you can inhibit the display of the index grid in the detail view by adding the following rule to your Custom CSS Editor:

.index-detail #grid {display: none !important}

You can also work things in reverse by making changes to the style of the home view without affecting the detail view. For example, you can inhibit the display of your site's footer from the home view while leaving the footer visible from all the other views and pages in your site. Do that by writing the following rule:

.homepage:not(.index-detail) #bottomBar {display: none;}

Figure 4 shows the effect of the rule to inhibit the display of the index grid from the detail view. (Compare with Figure 2 earlier). Figure 5 shows the effect of the rule to inhibit the display of the footer. The footer is visible in Figure 4's detail view, but is now omitted from Figure 5's home view.

Figure 4. The detail view with no grid underneath

Figure 5. The home view with no footer

The rule inhibiting the footer uses a CSS selector you may not be familiar with. Here's a step-by-step description of how that rule is put together:

  1. .homepage refers to a class identifying my home page, which in this case is an index page. Display of the footer will be inhibited only on that page.
  2. :not(.index-detail) further restricts the rule to the home page when not in detail view. The rule thus applies to the specific case of the home page in home view.
  3. The rest of the rule is straightforward. #bottomBar is the identifier of Flatiron's footer. Its display attribute is set to none when the rule is triggered.

Writing CSS for Flatiron sites can be tricky because clicking an image from an index page's home view never really takes you to a new page. You're always on the same page, and seeing different views of that page's content. Knowing about the index-detail class gives you what you need to be able to style the two views differently from one another.

Tip: The design of Flatiron index pages has implications when posting links to Facebook. Read my post on Facebooking the Squarespace Flatiron to learn what to do when you want to post a link to an individual gallery item and have the correct image and summary text display on your Facebook wall. 
Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart