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:
- Stacked Index
- List-style Blog Page with two layout options
- Unique Events Page
- Album Page
- Standard Gallery Page with some unique settings
- Classic Products Page with some unique settings
Structure and style
Use these Site Styles options to change the look and feel of your site.
|Site title or logo||
Add thumbnail 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 in 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.
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 thumbnails, likes, and Shares display above the post title
- Source URLs don't display, but linked titles have an arrow.
On individual posts:
- Blog post thumbnails 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:
- Thumbnail 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 thumbnail 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).
- Thumbnail images and excerpt View Post links are hidden.
- Here's an example:
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 drop-down 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 thumbnail 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.
- Thumbnail 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.
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.
- 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.
Here's an example of an Index with two sections:
Add products to a Products Page to create a Commerce store. Marquee supports the Classic Products Page, with these unique settings: