The style and features of the Marquee template family.
This guide covers the features and and design of the discontinued Marquee template family.
For a more modern template with similar features to Marquee, we recommend switching to Brine. Fixing issues in discontinued templates like Marquee is a lower priority for us while we focus on our current templates.
The Marquee family's full-width banner images and videos set the tone for your pages' content. Parallax scrolling moves the banners more slowly than the content in the foreground, creating an illusion of depth and immersion. The blog has a sophisticated columns layout, and the stacked Index is great for sharing a lot of information in one long, scrolling page.
Templates in the Marquee family
All templates in the Marquee family have the same style options and features:
- Marquee
- Adversary
- Alex
- Eamon
- Ginger
- Mint
- Shift
Supported pages
In addition to layout pages and cover pages, Marquee supports these page types:
- Stacked index
- List-style blog page with two layout options
- Unique events page
- Album page
- Standard gallery page with some unique settings
- Classic store page with some unique settings
Structure and style
Use these site styles options to change the look and feel of your site.
| Feature | Notes |
| Site header |
|
| Site title or logo |
|
| Main navigation |
|
| Taglines |
|
| Background colors |
|
| Dropdowns |
|
| Footers |
|
| Hover effects |
|
| Mobile |
|
| Share buttons |
|
| Sidebars |
|
| Social icons |
|
| Parallax scrolling |
|
| Quote blocks |
|
Banners
Add featured images and videos to create full-bleed banners at the top of these pages and collection items:
- Collections - Blog, events, products, and layout pages
- Collection items - Individual events, products, and blog posts. Videos not supported.
- Index sections - Creates banners above the content
Banners create a visual element that can set the tone for your page. Here's an example of a banner with header text, a button, and an overlay color:
How banners display
Use these options to choose how banner images display:
- Banner images or videos can scroll slower than the rest of the page. Enable or disable this with the Parallax scrolling tweak.
- Add a color filter with the Image overlay tweak.
- Display banners behind the site header with the Transparent on banner images tweak.
- To add multiple banners to one page, stack them in an index.
- If there's no banner image or video, a background color displays instead. Change this with the Title background color tweak (Hide page title must be unchecked).
Add banner text
- Page banners - Display page titles and descriptions from page settings. Create headers and buttons with special formatting.
- Product banners - Display the item names and descriptions. Create headers and buttons with special formatting.
- Blog posts - Display post titles, dates, and authors.
- Individual events - Display events' titles, dates, and times.
- Style the text with the Page title & description section.
Format banner text with headings and buttons
Page and product banner descriptions support special formatting:
- Bold text formats as a heading.
- Regular text formats as description text.
- Links in the last line format as buttons. If the link includes bold text, or there are other lines or spaces below the link, it won’t format as a button.
Change the banner height
To change the height:
- Page banners - Open page settings and add extra line breaks to the page description.
- Individual events - Open the event editor and add extra line breaks to the description.
- Blog posts and individual products - Fixed height can't be adjusted.
Banners on mobile
On mobile devices:
- If parallax scrolling is enabled, banner images remain fixed and the content scrolls over them. Mobile styles must be enabled.
- Video banners may not display on slow connections and older browsers. If there's no mobile fallback image, the Image overlay color and Content background color colors display.
- Description text automatically shrinks to 13 pixels.
Blog pages
The blog page creates a list of vertically stacked posts. Clicking a post title opens the full post at its own URL.
On the landing page:
- Page banners display at the top of the page, with an optional text overlay.
- Set the layout with the Blog layout tweak (columns or simple).
- Add excerpts for posts to display teaser content.
- The full content of individual posts displays beside the title for posts without excerpts.
- Post featured images, likes, and shares display above the post title
- Source URLs don't display, but linked titles have an arrow.
On individual posts:
- Blog post featured images create banners. Titles, dates, and authors display over the banners.
- Hide or display author names with the Hide author tweak.
- Tags, categories, and navigation for previous and next posts display below the comments.
- Individual posts support banners.
Filtered tag and category pages
- If you link directly to a tag or category list, the text "Viewing entries in" or "Viewing entries tagged" displays at the top of the page.
- The text style follows body text.
- "Viewing entries" text is italicized.
Blog layout: columns
When you choose Blog layout: columns:
- Featured images, a View post link, and comment, like, and share buttons display between border lines above each post.
- Post titles and dates display to the left of the post content.
- For excerpts, the featured image and a View more link display.
- Here's an example:
Blog layout: simple
When you choose Blog layout: simple:
- All content stacks vertically.
- Dates display above the post content.
- Comment, like, and share buttons display below the post content.
- Use the Blog width tweak to adjust the width (narrow, full).
- Featured images and excerpt View post links are hidden.
- Here's an example:
Events pages
Use the events page to feature concerts, meetings, book tours, or any event you host. Clicking an event title opens the individual event at its own URL.
Choose a view
You can choose between calendar or list view in page settings with the Default event view dropdown menu.
- If you have multiple events pages, you can display some as calendars and some as lists. You might want to pick one to keep a consistent look.
- Either view supports a page banner.
- Unlike other templates, past events don't display in list view.
Style events pages
Marquee's Event Pages have their own style settings:
- Event time format - Display your event time using the 24-hour international standard time display.
- Event excerpts - Show or hide the event description or excerpt text.
- Event list date - Display or hide the date in list view.
- Event list time - Displays or hide the time in list view.
- Event list address - Display or hide the address in list view.
- Event iCal/gCal Links - Display or hide the links on individual event pages.
- Event calendar compact view
- Events layout: columns, simple
- Events width: full, narrow - Appears when Events layout: simple is selected.
Unlike other templates, Marquee doesn't have a Show past events option.
Events layout: columns vs. simple
For events pages set to list view, use the Events layout tweak to choose the style of the landing page. This affects all list events pages on your site.
For either layout, use the Event excerpts, List date, List time, and List address tweaks to hide or show these elements.
When set to Events layout: columns:
- The featured image, Like and Share buttons, and a View event link display above the event details.
- The event title, date, and time display to the left of the event description.
- Check Event time format to display your event time using the 24-hour international standard time display. This also affects individual events.
When set to Events layout: simple:
- All content stacks vertically.
- The date and time display above the post content.
- Featured images, the View Post link, and Comment, Like, and Share buttons are hidden.
- Use the Events width tweak to set the width of all events.
Gallery Pages
Marquee supports the standard gallery page, which displays images and videos in either a slideshow or a grid layout. Marquee standard gallery pages have these unique settings:
- Slideshow view displays full-bleed.
- In grid view, clickthrough URLs are disabled and don't disable the lightbox.
- In slideshow view, if the image has a title and description, clickthroughs URLs display as a Read More link.
- Gallery aspect ratio and Gallery transitions: fade, scroll tweaks aren't available.
Index pages
The index page stacks multiple content sections vertically on a single page. To see different variations, explore the Adversary, Alex, Eamon, and Shift demo sites.
- The Index only supports content sections (layout pages).
- Banners display above each section. They include any banner text, buttons, or color overlays.
- The URL includes a hashtag (#) as you scroll from one section to the next. To send a visitor directly to a section, open your Index Page in a private browser and scroll to the section. Copy the full URL with the # and share it.
- To stack banners on top of each other, like the bottom half of Shift, create sections with banners but no page content. For new pages, delete the default Text Block. You'll still see placeholder white space while logged into your site.
Set the banner height
- Use the Index image height tweak to set the banners in an index to Half, Two Thirds, or Fullscreen.
- Use the First index image fullscreen tweak to display just the top Index banner at its full height.
- For banners with background colors, open page settings and add extra line breaks to the page description.
Style the navigation
- If the top banner is set to Fullscreen, an arrow appears at the bottom and Scroll down appears on hover. Clicking the arrow takes visitors to the next section on the page.
- Navigation circles and text appear on Index banners. Check Hide index nav to hide them.
- Arrows and navigation circles are automatically set to black or white depending on the background image. This can't be changed.
- The color auto-detection is based on the overall darkness or brightness of the image. For example, if the area around the navigation circles is dark, but your image is mostly light, the circles will be black.
- A Top link appears at the bottom of the page above the footer on index pages. Hide it with the Hide back to top link tweak. Adjust the color with the Text color tweak in the Main content section of site styles.
Example
Here's an example of an Index with two sections:
Store pages
Add products to a store page to create a Commerce store. Marquee supports the classic store page, with these unique settings:
- Category navigation displays at the bottom.
- The classic shopping cart button displays below the header, instead of the top-right corner.
- The shopping cart page doesn't have "Shopping cart" header text.
- Supports customer accounts.
Troubleshooting Marquee
Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.
I can’t click on my dropdown navigation
If your browser isn’t wide enough to fit all navigation titles, your navigation might split into two lines. If there's a dropdown in the top navigation line, this makes the contents of the dropdown inaccessible.
Your template works best with minimal navigation items. We recommend consolidating content and shortening navigation titles as much as possible. To learn more, visit Editing page titles.
You can also move your dropdown to the last position in the navigation. This will ensure that the dropdown menu won’t be blocked by other navigation items.
How do I change the banner color?
If the banner area doesn’t have a featured image, it displays a background color instead. To change this color:
- Go to the Page title & description section of site styles.
- Ensure Hide page title is unchecked.
- Use the Title background color tweak to adjust the color.
- After you’ve changed the color, you can hide the page title again.
How do I hide a page banner?
To remove a page banner from your site:
- Open page settings for that page.
- Remove the featured image or video URL.
- Remove the page description.
- Save and open site styles.
- Select Title & description position: under image.
- Select Hide page title.
My banner image shifts as the page loads
If your main navigation is set to Fixed position, banners on layout pages load slightly higher on the page, then shift down to the correct position as the page finishes loading.
This behavior is more noticeable if you have a content-heavy page or a slower internet connection, but it's expected for this template. Your banner will display normally when the page is fully loaded.
To avoid this, uncheck Fixed position in the Site header section of site styles.
The banner text looks cropped on a mobile device
This can happen if you’ve disabled mobile styles in the Advanced design panel. The index won't display the same way when the content can't rearrange for a mobile display. For the best experience on any mobile device, keep your mobile styles enabled.
For more help with cropping, visit our troubleshooting tips.
My parallax index banner image has gray space above or below it
This gray space can appear when certain blocks added to an index section cause the page length to change. This happens when blocks pull information from other areas of your site (like gallery or summary blocks) or from outside sources (like code blocks). Setting the block's aspect ratio to Auto can also affect the page length.
To resolve this, move the block to the last Index section, or set the block to any aspect ration other than Auto.
Where are my footer navigation links?
Footer navigation links display at the bottom of the page above the footer.
If the links in your footer navigation are the same color as your footer, they won’t display. Use the tweaks in the Footer section of site styles to adjust either the Footer background color or Secondary nav link color.
My description text looks very small on mobile
Due to responsive design, banner text behaves differently on mobile devices or smaller browser windows. By default, description text automatically shrinks to 13 pixels on mobile devices. This is designed to support multiple lines of wrapping text.
As an alternative:
- Check Extra description formatting in the Page title & description section of site styles.
- Style the description text as a header by making it bold.
- Use the Description bold font tweak to set the size you want.
Use the Page title font tweak to adjust the size of the page title. Note that page titles responsively scale to best fit the width of the browser or device. If your page titles vary in word length and number of characters, your page titles may not be a consistent font size on mobile devices.
My index scrolls visitors down to the footer automatically
This is built into your site's functionality when the first page in an Index has the page slug /footer. To fix this, change the name of the URL:
- Open the Pages panel.
- Locate the Index. Hover over the top page in the Index and click the
. - Scroll down to the URL slug field, and change the name so it no longer reads "footer."
- Click Save.
.For more help, visit URL slugs.
There's a blank space between my Index banners
To stack Index banner images without content between them, add pages with featured images but no page content.
When you create a new page, it automatically adds a blank text block. This creates a space between banners on the index. To resolve this:
- Open the Pages panel.
- Click the title of your index in the left panel.
- In the page preview, scroll down until you see a message saying "This page is empty. Start editing and add content blocks."
- Hover over this area and click Edit.
- Hover over the text block and click the trash can icon. A new text block will appear, but you can ignore this.
- Click Save.
- Refresh the page.
To add page content back to this page in the future, move the page out of the Index.