Skip to content
  • There are no suggestions because the search field is empty.

Understanding Cohortium Theme Settings

How to use HubSpot CMS to customize the front-end (e.g., applying the Cohortium theme for branding)

Accessing Theme Settings

  1. Navigate to any page within the Cohortium portal.

  2. Click on the gear icon or the "Jump" button.

  3. Select "Edit Page."

  4. In the page editor, go to the "Theme Cohortium" section to access the theme settings.

Customizing Theme Colors

  • Primary Colors: Modify the primary color to match your brand. This color will affect links and buttons.

  • Secondary Colors: Change the secondary color for additional visual elements.

  • Light and Dark Colors: Set light and dark colors for hover effects.

  • Tertiary Color: Adjust the tertiary color as needed.

  • Link Colors: Define colors for links throughout the site.

  • Gradient Colors: Add default gradient colors based on your primary colors.

  • System Colors: Set colors for success, warning, error, and focus states.

  • Background Colors: Customize the default background colors for sections.

Typography Settings

  • Body Font: Default is Montserrat. Change to any desired font, e.g., Oswald.

  • Headline Fonts: Customize headline fonts and their weights.

  • Font Size: Adjust font sizes using REM units (1 REM = 16 pixels). For example, 3 REM equals 48 pixels.

Spacing Adjustments

  • Modify vertical and horizontal spacing between sections to achieve the desired layout.

Button Settings

  • Customize default button colors and text colors.

  • Adjust header menu colors and dropdown styles.

Global Settings

  1. Logo: Update the logo that appears across all pages.

  2. Menu: Customize the menu items, including the option to remove the signup button.

  3. Announcement Bar: Choose to display or hide the announcement bar.

Saving and Publishing Changes

  • After making changes, click "Submit Updates" to apply them.

  • To publish the theme, click "Publish Theme." It may take a few minutes for changes to reflect on the front end.

  • Use the "Undo Changes" button to revert any modifications made during the session.

Final Steps

Once you have configured the theme colors, typography, spacing, and global settings, you can proceed to customize individual page elements, which will be covered in further documentation.