Access the source code of the Media Manager and locate web.config. Edit the file and change the following variable.
Change <add key="UseDist" value="true" />
To <add key="UseDist" value="false" />
This will ensure that you can see the live changes until the edit is completed.
Access the source code of the Media Manager and navigate to: MP2 → style_overwrites and locate variables.less. In this file you will make all the changes required to make a custom style.
...
1.1 Software requirements for custom styling
To change the theme colors (i.e. the styling) of your Digizuite™ Media Manager (MM), some requirements need to be met.
The requirements are as follows:
- NodeJS LTS v6.9 or higher (https://nodejs.org/en/download/)
- Yarn v0.19 or higher (https://yarnpkg.com/en/docs/install)
Once these have been installed, you should be able to start building your new custom CSS files.
1.2 Enabling live editing (i.e. live reload) (optional)
Some prefer to see their changes to the color variables appear in an MM when editing the colors.
Please be advised. that this is not strictly necessary, and that you can entirely skip this step, if you want to do it manually instead. Doing ti manually, will take 1 minute longer every time you have to build → Find the CSS → Upload the MM.
By following the following steps, you enable a local MM on your computer, to automatically receive the colors you choose for your MM.
- First off, you need to have a MM with the "include source" postfix in an unzipped state.
- Have an available DC - possibly a client's DC (remember, uploading something to it will appear in the customer's DC and MM)
- Host the "include source" MM from your computer via IIS, and hook it up to the DC mentioned in the previous step (you hook it up via the MM's web.config file).
- Edit the MM's web.config as shown below:
Change
Code Block | ||
---|---|---|
| ||
<add key="UseDist" value="true" /> |
to be
Code Block | ||
---|---|---|
| ||
<add key="UseDist" value="false" /> |
Now all your changes to the files "style_overwrites" and the "variables.less" (found in the "MP2" folder), will instantly show up in your local MM upon saving the files.
Info | ||
---|---|---|
| ||
The original variables file is located in ..\[your site's name]\MP2\src\app\mp2\layout\less. Configuring in this will overwrite the default colors supplied to you by Digizuite. It is recommended to never edit this file! |