To customize the colors of the CMS you must first have access to the Folder: "Custom CMS" in the Git repository of your project. If the folder is not present we suggest you:
Take an example project with the Custom CMS created by git lab.
Make a git clone
Warning! if you clone an existing project, verify in all the files created that the name of your customer is present and not of the customer from which you have cloned the path.
The path to find your folder is: Project Name> Web Apps> Custom CMS
Inside this folder there must be another folder that by convention has the name of the cms, so basically it has the name of the customer.
In this folder there must be two other folders:
a custom that contains the file: variables.css
a img that contains the file to customize your CMS image.
Once you have all these files on your GIT project, you can start customizing your CMS!
To ensure that your project is successfully deployed, update or verify that the following variables have been updated
- Go to the project's gitlab-ci thread within Custom CMS.
Enter the name of the client project for each path and choose the version of the CMS you want to build
- Go to the gitlab path /clients/:client-name/configuration/gitlab-cli.yaml
Check and see the version of the CMS you want to build
body-bg: general background color. It is best to put it on gray # f4f4f4
color-search: background color of the search
color-brand: background color of the sidebar
color-text-special: These are the titles of the sidebar categories, the user's text, and the navigation bar
color-text-special-2: how the title of the properties are displayed during editing and creation
color-text-special-3: some particular variables such as: when I click on all publish or draft, the placeholders on the pages, the color of the selected row in a table, the color of the page bar that loads
color-text-negative: the color of the fields in the table
color-brand-gradient: secondary color
color-brand-gradient-3: when an item is selected in the left menu and the color of My CMS Bees on the bottom left in the sidebar
color-brand-gradient-5: keys error and warning
color-search-text: the color of the text in the search
color-button: the color of the buttons
color-brand-gradient-1: The color of the title of the pages in the side menu
color-brand-bg-notification: if you activate the notifications the background color of the badge
color-brand-text-notification: the text color inside the notifications
This feature is supported only from the CMS version 9.14.0
It is possible to dynamically change the logo and the colors of the CMS at runtime. To enable this feature you have to
expose the endpoint
/cms-theme. The endpoint should return a JSON array, the first element of which should be an
object containing the custom theme to apply. We suggest doing that through a CRUD, as outlined in the
Configure the Console section.
If you do not expose the endpoint, or if the endpoint returns an error or an empty array, the CMS will keep using the default theme applied at build time as described in the dedicated section.
In the custom theme configuration, you can specify a custom value for the logo url and for any of the variables listed in the Variable colors section. It follows an example of a valid configuration:
None of these fields are mandatory. If you do not specify a custom value for one of the fields, the CMS will keep using the default value applied at build time.
If you specify the url of a custom logo, please keep in mind that it has to be reachable from the same host of your CMS. We, therefore, recommend uploading the desired image in the File service.
The first thing to do is to create a CRUD named
cmsthemewhere you can store your custom theme configurations. You can follow these steps to create your CRUD using the following data:
properties:- `logo`: String (Optional)- `body-bg`: String (Optional)- `color-search`: String (Optional)- `color-text-special`: String (Optional)- `color-text-special-2`: String (Optional)- `color-text-special-3`: String (Optional)- `color-text-negative`: String (Optional)- `color-brand`: String (Optional)- `color-brand-gradient`: String (Optional)- `color-brand-gradient-1`: String (Optional)- `color-brand-gradient-3`: String (Optional)- `color-brand-gradient-4`: String (Optional)- `color-brand-gradient-5`: String (Optional)- `color-search-text`: String (Optional)- `color-button`: String (Optional)
Endpoint - create the
Now you can create the new endpoint with base path
/cms-themefollowing this guide. The type of this endpoint is CRUD as we want it to expose the CRUD we created in the previous step.
The CMS will call the
GET -/cms-theme/to receive an array of configurations. If you want to filter the results of this call and return to the CMS the desired one, you may attach a PRE decorator to this endpoint.
If the endpoint returns to the CMS an array with multiple elements, the first one will be applied.
Optional - expose the CRUD in the CMS
Last step you can optionally create another endpoint exposing the same CRUD created and use the endpoint to display the CRUD in the CMS following these steps.
Now you can commit and deploy your project.