Topper Plus

Stack settings

The Topper Plus stack assists you in building a modern style design for your Full Posts view. You can create banner like displays for your full posts where the blog entry title is displayed on top of your post's Topper Image. You'll need to use the Topper Plus stack in conjunction with the Alloy Conditionals stack. We have a whole tutorial video above explaining how to quickly and easily set this up.

General

REMOVE BASE MARGIN
Allows you to disable the preset standard spacing that is applied to the bottom of the stack.

INNER CONTAINER
You can choose between a fixed-width for the inner portion of the Topper Plus stack or make it fluid. Fluid allows the contents of the stack to stretch out to the full-width, while fixed-width option allows you to set your own maximum width for the inner content.

INNER MAX-WIDTH
Set the maximum width you desire for your content in the Topper Plus stack when using Fixed-Width as your inner container type.

REMOVE LEFT & RIGHT PADDING
When using the Fluid option of the Inner Container setting you are given the option of whether to remove the outer padding on the left- and right-hand sides of the Topper Image’s content container.

MOBILE, TABLET & DESKTOP PADDING
Allows you to set a top and bottom padding for the Topper Plus stack at each of the three Foundry breakpoints.

Topper Image

FALLBACK IMAGE
Allows you to configure a fallback image in case a blog post does not contain a Topper Image. In the event a post does not have a Topper Image of its own, this fallback image is used instead as the background for Topper Plus.

OVERLAY TYPE
You can choose whether you'd like to have a solid color or a gradient as the overlay. The overlay resides beneath your blog post title and above your Topper Image background.

OVERLAY COLOR(S)
Let's you configure either the solid or gradient overlay colors. Each color has an opacity slider allowing you to make them more or less transparent.

PARALLLAX EFFECT
Turning on this feature creates a parallax scrolling effect for your Topper Plus background image. This moves, scales or fades the image slightly as the user scrolls through the page in either the upward or downward direction.

PARALLAX STYLE
Choose whether to have your background image scroll, scale, or change its opacity as the user scrolls through your page. There are also two combination options that pair Scroll & Opacity or Scale & Opacity together.

PARALLAX SPEED
This is essentially a relative value that determines the speed at which the parallax effect occurs. Generally the default value will be optimal.

BLUR TOPPER BACKGROUND v3
Adds the ability to blur the Topper Plus background image.

HERO BANNER
When enabled the Topper Plus stack expands to be the height of the browser window and centers the contents of the stack vertically. This acts very much like the Hero Banner setting in the Foundry Banner stack.

Post Title

TAG
You can configure what header tag you would like to have Topper Plus apply to your blog post title.

HEADER FONT
Choose whether to have your Header adopt the font settings from the Control Center stack or to use the Typeface stack for your font choices.

The default values and settings for headers on your page can be setup within the Foundry Control Center stack. There you can set font sizes, weights, colors and more.

FONT WEIGHT
Choose what weight you wish your font to be. The higher the number the more bold the font will be. If using the Typeface stack for your font choice be sure that you are loading the font weight you wish to use within the Typeface stack.

CUSTOM FONT SIZES
Manually choose the size of your header text within Topper Plus. You are able to set a different font size for the Header at each of the 3 responsive breakpoints.

UPPERCASE
Chose to display your blog post title in all uppercase letters.

ITALIC
Opt to italicize your blog post title font. Again, it you’re using Typeface and wish to italicize your header, be sure you’re loading the italic version of the font with Typeface.

CUSTOM LINE HEIGHT
Use Foundry’s default line height of 1.2 times the font-size or enable the Custom Line Height option and set your own line height.

LETTER SPACING
Set the amount of space between each letter in your blog post title.

HEADER STYLE
Set the color of header match other elements of your site. Use specialized header color setting in the Control Center stack, or choose one of Foundry’s color swatch presets or make use of custom color pickers to style the header and secondary text.

SHADOW
Allows you to add a drop shadow to the blog post title in the Topper Plus stack. When in enabled you can adjust the size, color and offset for the shadow.

Fallback

Blog Posts that don't have a Topper Image associated with them will display the fall back image you configure in the Topper Plus stack settings. It is important to have a fallback image of some kind.