Create New XCoLab Instance

Prerequisites

Before you start please make sure that you have gone over the following steps from the Development Environment Setup page:

• Java
• MySQL
• Setup for Development

Database Customization

Configuration Attributes

Configuration attributes are used to tune different features throughout the CoLab. Each attribute has a default value. To override the default value, create a new entry in the admin__configuration_attribute database table.

Attribute	Type	Default Value	Description
COLAB_NAME	String	xCoLab	Name of the CoLab.
ACTIVE_THEME	ColabTheme	ColabTheme.CLIMATE_COLAB	Name of the enum instance used to define the theme in the ColabTheme enum.
META_PAGE_KEYWORDS	String	""	Meta keywords for the CoLab instance.
META_PAGE_DESCRIPTION	String	""	Meta description for the CoLab instance.
LANDING_PAGE_BANNER_CONTENT_ARTICLE_ID	Long	4	ID of the entry in table content__content_article that should be used as the landing page banner
LANDING_PAGE_BOTTOM_CONTENT_ARTICLE_ID	Long	5	ID of the entry in table content__content_article that should be used as the landing page bottom article
MEMBERS_CONTENT_ARTICLE_ID	Long	6	ID of the entry in table content__content_article that should be used as the members content article.
DISCUSSION_CONTENT_ARTICLE_ID	Long	7	ID of the entry in table content__content_article that should be used as the discussion content article.
FOOTER_CONTENT_ARTICLE_ID	Long	-	ID of the entry in table content__content_article that should be used as the footer

Contest Type Attributes

Codebase Customization

Themes

Here are the steps to create a new custom theme for your XCoLab instance:

1. Go to the file XCoLab/util/xcolab-utils/src/main/java/org/xcolab/util/enums/theme/ColabTheme.java

2. Create a new enum using the constructor ColabTheme(String primaryColorHex, int logoWidth, boolean hasCustomStylesheet).

Stylesheets

The xCoLab platform uses Sass to create stylesheets. To create a custom style:

1. Create a new sass file under the folder XCoLab/view/src/main/resources/static/sass/themes/.
2. Use the camel case version of the theme name to name the file. For example the CLIMATE_COLAB theme should have the sass file name climateColab.scss.
3. Import the base sass theme by adding the line @import "../main"; to the top of your file.

[optional] Override the base sass variables by adding the following steps:

4. Create a new sass file under the folder XCoLab/view/src/main/resources/static/sass/variables/.
5. Override the desired sass variables. You can check all the default values in the file XCoLab/view/src/main/resources/static/sass/variables/_t-base.scss.
6. Import your variables by adding the line @import ../variables/[file name]; at the top of your sass file, above the line inserted in step 3.

Every time a change is made to the sass files, they need to be re-compiled to css. You can do so by changing directory to the View application XCoLab/view and running the ../mvnw compile command.

You can read more about stylesheets in the Working with stylesheets guide.

Images, Logos & Files

Static Files

Static files such as images, documents, css files, javascript files etc.. should be added in the folder XCoLab/view/src/main/resources/static/. The static files can then be referenced in the code by their directory after the static folder.

For example, the static logo XCoLab/view/src/main/resources/static/images/logos/mit-cci.png can be referenced in the code as /images/logos/mit-cci.png.

Theme Logos

Theme logos can be created using the following steps:

1. Create a new folder under XCoLab/view/src/main/resources/static/themes/. Name the folder after the camel cased version of your theme name (see step 2 in the Stylesheets section).
2. Create a folder named images/ under your newly created folder.
3. Create the following file structure, where colabName is the camel case version of the theme name:

└── images/
    ├── favicon/
    │   └── ...
    ├── [colabName]-logo.png         (205px * 42px)
    ├── [colabName][email protected]      (410px * 84px)
    ├── [colabName][email protected]      (615px * 126px)
    ├── [colabName]-logo-big.png     (1200px * 630px)
    └── [colabName]-logo-square.png  (168px * 168px)

The favicon folder can be created using a favicon generator like https://www.favicon-generator.org/.