This is a summary of the Discourse settings when we launched this Space Cubics forum. We hope you will find it useful when you start your own community.
日本語の解説はこちら 
Theme
We chose the Default theme.
Header
To easily change the appearance of your site, it’s better to use the Discourse theme.
We used Custom Header Links to design the header.
From the settings, select Customize → Themes → Components, and press the Install button at the bottom.
When you select “From a git repository”, a box will appear on the right side to enter the URL, so enter the repository address listed in the theme page of your choice, and click the Install button. Basically, this is how you install themes and components for all the cases.
Next, let’s take a look at the component settings.
Specify the Default as the theme to apply. This is mandatory for any component setting.
For the header links, we tried to make the design of this forum look similar to the Space Cubics homepage.
Fonts were a bit large, so we edited the CSS to make them smaller. Press the Edit CSS/HTML button in the Default theme settings.
Paste the following code into the Common -> CSS editing window.
.custom-header-links {
.headerLink {
list-style: none;
a {
font-size: smaller
}
}
}
Search window
Install Search banner theme component.
Setting:
- Set up a background image
- Edit the text to be displayed
To change the text color of the search window, paste the following code into the CSS editing window.
.custom-search-banner-wrap {
color: white;
}
Footer
Install Easy responsive footer.
Setting:
-
Enter the company name in the Heading
-
Enter short info in the Blurb
-
Enter the Category in the first line of Link sections and the Link in the second line.
-
Enter a link to the category page and the homepage in Links.
-
Remove Small links as they were not needed for our site.
-
Sett up social links
-
Set the Social links icon used for svg icons.
The default color didn’t look good for a browser with dark mode enabled. To fix it, we’ve injected the following code into the CSS editing window.
You can change the appearance quite a bit by editing CSS window. To change it, copy the .scss files in the common/ directory from the URL of your component to your instance, and customize them as you wish.
.custom-footer {
background: #01144E;
.flexbox {
color: white;
}
.first-box {
color: white;
.blurb {
color: gray;
}
}
.second-box {
color: white;
}
.third-box {
color: white;
.social {
.social-link {
.d-icon {
color: white;
}
}
}
.small-link {
color: gray;
}
}
.footer-section-link-wrapper a {
color: gray;
}
}
Jump button
Install Scroll to Top Component.
Just install this and then you can find a button that instantly moves to the top of the page.
Others
Just install this and you can set up a button that instantly moves to the top of the page.
Branding
-
Upload the company logo. Also upload a logo for dark mode if you support it.
Basic Setup
-
I wanted the top screen to show categories instead of topics, so I changed the order of the “top menu” so that category is first.
-
Set the dark mode color scheme to “Dark”.
-
Check the “fixed category positions” checkbox, because I wanted to reorder the categories when we add more categories in the future.
Posting
-
Uncheck “allow uncategorized topics” to prevent uncategorized posts.
We'll update this topic when we add more designs to our site.
Happy customizing!