How to deal with multiple DAM Portals styling

It is possible to configure the portal application to generate multiple files each relying on a different css file.

This walkthrough was written with version 11.28. Its purpose is to drive you to a working solution with which you can have different branding of a portal application.

It does not cover configuring differently the 2 branded portals

It does not cover server configuration (rewriting rules)

If branding multiple portal applications become a common need, product team will invest time to ease creation of branded portals and simplify the following walkthrough.

Feedback is highly appreciated.

Follow the following steps:

Prepare customization

Create an empty __perso/src/assets/clubwed/index.scss We need to create an empty file to overwrite the product default stylesheet entrypoint
Copy product file src/assets/clubwed/index.scss as __perso/src/assets/clubwed/base.scss
- add as first line of this new file: $fa-font-path: "../../../../src/assets/webfonts";
  We need to do this as fonts are loaded from the main entry point
- adapt all @import statements to match new paths. You should end up with this file (as of 11.28 )
  $fa-font-path: "../../../../src/assets/webfonts"; /* Setting up project global init */ @import "../../../../src/assets/clubwed/_project/cw-init-global"; /* Setting up product global init */ @import "../../../../src/assets/clubwed/_product/cw-init-global"; /* Setting up fontawesome */ @import "../../../../src/assets/clubwed/fontawesome"; /* Setting up bootstrap */ @import "../../../../src/assets/clubwed/bootstrap"; @import "../../../../src/assets/clubwed/split-panes"; /* Setting up project clubwed variables */ @import "../../../../src/assets/clubwed/_project/cw-variables"; /* Setting up product clubwed variables */ @import "../../../../src/assets/clubwed/_product/cw-variables"; @import "../../../../src/assets/clubwed/transitions"; /* Integrating common clubwed styles */ @import "../../../../src/assets/clubwed/common"; @import "../../../../src/assets/clubwed/dam"; /* Integrating routes clubwed styles */ @import "../../../../src/assets/clubwed/routes"; @import "../../../../src/assets/clubwed/sample-specific"; /* configure splitpanes*/ @import "../../../../src/assets/clubwed/splitpanes-general.scss"; /* TODO Mieux organiser ce qui reste */ body { -webkit-font-smoothing: antialiased; } .cw-app { min-height: 100vh; display: flex; flex-direction: column; } :focus { outline: none !important; box-shadow: none !important; } .btn-secondary, .btn-outline-secondary { font-weight: $font-weight-semibolder; } .btn-outline-light { color: $dark; } .cw-download-progress { height: 0.25rem; } .popover.tooltip:focus { outline: none; } .custom-control-label:after { cursor: pointer; } .form-control:not(.b-form-datepicker):not(.cw-tree-relationship-filter):not(.cw-relationship-filter) { overflow: hidden; text-overflow: ellipsis; } .multiselect__option--highlight { background-color: $dropdown-link-hover-bg !important; color: $dropdown-link-hover-color; } .multiselect__option--selected, .multiselect__option--selected:hover, .multiselect__option:active { color: $dropdown-link-active-color !important; } .font-weight-semibolder { font-weight: $font-weight-semibolder; } .pointer-events-none, .pointer-events-none > * { pointer-events: none !important; } .mw-100 { max-width: 100%; } .hover-secondary:hover { color: $secondary; } * { scrollbar-width: thin; } .quillWrapper { .ql-toolbar.ql-snow { border-color: $gray-300; border-top-right-radius: $border-radius; border-top-left-radius: $border-radius; } .ql-container.ql-snow { border-color: $gray-300; border-bottom-right-radius: $border-radius; border-bottom-left-radius: $border-radius; background-color: $white } } .tooltip { top: 0; } /* THIS MUST REMAIN THE LAST LINE SO PROJECTS CAN OVERRIDE STYLES */ @import "../../../../src/assets/clubwed/_project";

At this step, you should have the following structure:

__perso/src/assets/clubwed/
  - base.scss
  - index.scss (empty file)

Add some themes

Once you have your base structure, you can add new files to define themes:

__perso/src/assets/clubwed/theme1.scss

We will define theme1 as the default theme so we will directly include base.scss

@import "./base";

__perso/src/assets/clubwed/theme2.scss

For theme2, we will just pre-define $primary and $secondary to have those variables defined right away

Add entry points

We can now add a new entrypoint that will be named theme2. You can of course change the name of this entry point.

In vue.config.js, we can define additional entry points. This is done by adding entries in the pages object:

Having done this, we need to create a template for this new entry point. We will duplicate the /public/index.html file as /public/theme2.html and give different values for vue_app_base_url and wedia-app-base-url:

For this example, we will add theme2/ to the root context for our application

Around line 41

Around line 65

You will most probably need to change the wedia-app-config-path and vue_app_config_path as well.

Add entries to webpack

We can now add new entries to webpack for chunk generation:

In vue.config.js, look for chainWebpack option (at the end of the file) and adapt it this way:

Add rewrite rules for development mode

Finally, we need to add rewriting rules so that we can test our new theme in development mode:

In vue.config.js, look for historyApiFallback.rewrites:

Test

You can now serve the project and browse http://localhost:9000/ and http://localhost:9000/theme2/