Customize brand

Branding makes your community feel like part of your product. In HappyIO, you can customize your site’s logo, colors, fonts, social sharing image, and even add custom CSS for advanced styling.

Steps

1. From your HappyIO workspace, go to Sites > Design of a site that you want to customize

2. In the Branding tab of the editor, make any changes:

   1. Logo and favicon

      1. Default logo: Shown on light backgrounds

      2. Invert logo: Shown on dark backgrounds

      3. Favicon: The small icon that appears in the browser tab

   2. Color

      1. Button background: The color of the main action buttons on your site like “Add post” button

      2. Button text: The text color inside the main action buttons on your site like “Add post” button

      3. Background color: The overall site background

      4. Primary text color: Main text color for headings and body

      5. Secondary text color: Used for descriptions, subtitles, and secondary elements

   3. Typography

      1. Heading font: Used for titles and headers

      2. Body font: Used for post content, menus, and descriptions

   4. Social sharing image: This image will appear as the preview thumbnail when your site link is shared on social media or chat apps

   5. Custom CSS: overrides default styles

3. Click Save

Customize section

Sections let you control the structure and navigation of your public site. You can customize the header and sidebar to guide your members to the right content.

Steps

1. From your HappyIO workspace, go to Sites > Design of a site that you want to customize

2. In the Section tab of the editor, make any changes:

   1. Header

      1. Logo position: Choose where your logo appears in the header

      2. Menu toggle: Show or hide your main navigation menu in the header

      3. Add a new menu item to the Header by clicking Add menu or space

      4. Search toggle: Enable or disable the search bar in the header

   2. Sidebar

      1. Add a new menu item to the Sidebar by clicking Add menu or space

3. Click Save

Note

• Feed is the default page on the public site. Feed is your community’s central activity stream. It works like a social feed, showing posts in a continuous timeline so members can easily browse, discover, and engage with updates.

• Combines posts from different spaces (depending on your setup).

• Displays posts with meta info, cover images, and content previews.

• Keeps members informed with the latest updates in one place.

• You can hide but cannot delete feed page on the public sites.

Customize space

Each Space (Feedback, Roadmap, Changelog, Status, or What’s New) in HappyIO can be customized to match your community’s branding and content style. You can control the layout, banner, sidebar, and even add custom CSS for advanced styling.

Spaces are customized per public site. That means the same type of space (e.g., a Roadmap) can have a different layout, banner, or sidebar setup on each site. This gives you flexibility to tailor the experience for different products, teams, or audiences.

Steps

1. From your HappyIO workspace, go to Sites > Design of a site that you want to customize

2. In the Page editor tab of the editor, select a space that you want to make any changes:

   1. General layout

      1. Header toggle: Show or hide the community header for this space

      2. Sidebar toggle: Show or hide the community sidebar for this space

   2. Page content

      1. Banner toggle: Show or hide the banner at the top of the space

      2. Layout: Choose how posts are displayed. Read more about Understand layout options for spaces.

         Content sidebar: Show or hide Top contributors and Trending posts on the right sidebar of the space

   3. Custom CSS: overrides default styles for this space

Click Save