Features

  • Set your page-wide settings for fonts, brand colors and more
  • Provides necessary CSS and javascript essential to Foundry

Using Control Center

Brand Colors

We base many of Foundry’s style settings off of the Brand Colors found here in the Control Center. You’ll notice throughout the documentation where we refer to preset color swatches. These are those color swatches.

The color swatches are named for their default uses or looks, but you can use each swatch however you would like. The color swatches are named Primary, Success, Info, Warning and Danger.

Links

Link Color
You can use Foundry’s preset color swatches to choose a color for your links, or use RapidWeaver’s color picker to assign a custom color for your links.

Link Hover Style
Allows you to choose whether you would like your links to get slightly darker or slightly lighter when your visitors hover over them.

Decoration & Hover Decoration
Decide how you want your links to be displayed normally as well as when they are hovered over by your visitor. You can choose Underline, Line Through or None for both states independently.

Fonts

Base Font

This is the main font setting for Foundry. It determines the font that will be used for your site’s contents. You can choose from one of the built-in, web safe fonts, or use the Control Center’s custom font settings to specify your own.

If you choose Custom for your Base Font you’re presented with the following additional settings: Custom Font Name, Font Type and Fallback Font. Here’s a look at using those settings:

  • Custom Font: You type the name of your font choice in this field. It can be as simple as typing Arial or more complex, like specifying a Google Font name.
  • Font Type: This is where you specify what type of font you'll be using for your Custom Font. Will it be a Google Font? Or another type of font, like a web safe font? We default to Other for this setting.
  • Fallback Font: Specifies a standard, web safe font type to fallback to incase your Custom Font cannot be displayed to your visitor for whatever reason.
  • Please Note: When using a Goggle Font for your Custom Font you must only enter the Goggle Font name and nothing more.

Base Font Color
Set the color of your base font for your page.

Base Font Size
You set your base font size for the page here. The 16px setting is recommended. Other elements within Foundry are based dynamically off of the value you set here.

Line Height
Sets the height of each line of text for your page. The default is 1.5, which is 1 and a half times your font size.

Base Weight
Allows you to set the font weight for your Base Font. The standard font weight for normal text is usually 400, with light fonts being less than 400 and heavier bold fonts being higher than 400.

  • Please Note: If you're using Google Fonts for your Base Font, make sure that whatever weight you choose is supported by the specific Google Font you're using. If not the font will not be loaded properly. Choosing the wrong weight with Google Fonts will also cause you problems in Edit Mode.
Headers Font

This is where you choose the font for the various headers on your Foundry-based page. You can choose from one of the built-in, web safe fonts, or use the Control Center’s custom font settings to specify your own.

If you choose Custom for your Headers Font you’re presented with the following additional settings: Custom Font Name and Font Type. Here’s a look at using those settings:

  • Custom Font: You type the name of your font choice in this field. It can be as simple as typing Arial or more complex, like specifying a Google Font name.
  • Font Type: This is where you specify what type of font you'll be using for your Custom Font. Will it be a Google Font? Or another type of font, like a web safe font? We default to Other for this setting.

Header Font Color
Set the color for all of your headers for your page.

Header Font Sizes
The Control Center allows you to set the font size for each of the 6 different header tags. You can not only set each header tag’s size, but you can set a different size for your Mobile breakpoint vs your Tablet & Desktop breakpoint.

Display Headers
There are 4 different Display Header presets. These allow you to have alternative sizing presets when using headers. With this setting you can adjust the font size of each of the 4 Display Header presets.

Header Weight
Allows you to set the font weight for your Headers font. The standard font weight for a header is usually 400 to 700. A weight of 300 or less will give you a lighter look and feel.

Display Weight
Some stacks in Foundry feature a Display setting, allowing you to supersize your text. Using this setting you can opt to have a different font weight for your Display headers vs your normal headers.

  • Please Note: If you're using Google Fonts for your Headers Font, make sure that whatever weight you choose is supported by the Googe Font you're using. If not the font will not be loaded properly. Choosing the wrong weight with Google Fonts will also cause you problems in Edit Mode.

Headers Line Height
Sets the height of each of the headers on your page. The default is 1.2, which is 1.2 times your font size.

Anti-Alias Fonts
Allows you to set your fonts to be anti-aliased in Webkit-based browsers.

Paragraph

Lead Size
Allows you to specify what size you wish the Lead Paragraph’s font to be set to.

Lead Weight
Much like the Lead Size, this option allows you to specify the font weight of the Lead Paragraphs created by the Paragraph stack.

Border Radius (Corner Rounding)

Rounded Elements
Many elements in Foundry have nice, subtle rounded corners. If you uncheck this feature those rounded corners will be removed. We enable this feature by default.

Border Radius
Many elements in Foundry, like buttons for example, use rounded corners. This slider allows you to set the border radius, or amount of rounding, for those elements.

Site Background

Background Type
Foundry allows you to customize the site background to easily give your pages a different look and feel. You can choose from four different background types:

  • Default: A basic, plain white background.
  • Color Picker: Use the built-in RapidWeaver color picker to assign a solid color to your page's background.
  • Gradient Color Picker: Use two color pickers to define a beautiful gradient for your site background. You can also adjust the angle of your gradient as well.
  • Image: Drag-and-drop your own image into the drop zome to assign it as your site background. You can choose from a normal placement, cover or tiled background type.

Show Site Background in Edit Mode
Allows you to get a general feel for what the background will look like behind your content when enabled. This can cause Edit Mode to run a bit slow at times depending on your settings. Be sure to only use this as a quick preview and don’t leave it on all of the time while editing your project.

Modal Stack

This section allows you to set the page-wide settings for the Modal stack.

Content Padding
Set the padding around the inner content area for the Modal popup.

Modal Box
Define the colors for your Modals on this page. Set the background and border color for the popup itself, as well as the divider line borders between the modal header and modal footer. You can event set the overlay color that is placed behind the modal popup.

Pagination Stack

This section allows you to set the page-wide settings for the Pagination stack.

Base
Set the main background, border and text colors for the Pagination stack.

Disabled
Change the coloring of arrows and "first" and "last" buttons when they are disabled.

Active
Choose the coloring of the buttons and number in the Pagination stack when they are actively selected.

Hover
Lets you select the color you wish the buttons and numbers to have when they’re hovered over.

List Group, Alert and Notification Stacks

This section allows you to adjust the color presets for the page-wide settings for the List Group, Alert and Notification Stacks.

Advanced

Page Language
This setting allows you to change the HTML Meta tag that tells browsers what language the content of your site is written in, primarily.

Show Reference
Shows you a sample of some of Foundry’s page elements, using your current styling preferences from the Control Center, in the edit mode area. Used as a quick reference to what you can expect things to look like. This will not publish or be shown in preview mode.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us