This documentation guide is about how to change ‘Dashboard Server’ dashboard view look and feel.


STEP 1: Navigate to Dashboard Server portal app :root folder

<wso2ds-x.x.x>\repository\deployment\server\jaggeryapps\portal\


STEP 2: Create a theme folder in ~\extensions\themes\ with a custom name.

See the example folder structure below,

Tip: Duplicate the ~\extensions\themes\basic folder and rename it with a custom name ( Basic folder contains a start-up folder structure ).

portal
│    jaggery.conf
...
├─── extensions
│    ...
│    └─── themes
│        ├─── basic
│        └─── <custom-theme>
...
└─── theme


STEP 3: Navigate to ~\configs\ and open the designer.json file using a text editor

and update the theme folder name there.

{  
    ...
    "authentication": {
    	"activeMethod" : "custom-theme",
    	...
    },
    ...
    "theme": "custom-theme",
    ...
}


STEP 4: Done. Now duplicate any files from ~/theme/ folder to created custom theme folder in

~\extensions\themes\ to change it, see the example folder structure below.

portal
│   jaggery.conf
...
├─── extensions
│    ...
│    ├─── themes
│         ├─── basic
│         └─── custom-theme
│              ├─── css
│              │    ├─── dashboard.css
│              │    ├─── portal.css
│              │    └─── + [ additional css ]
│              │
│              ├─── images
│              │    ├─── favicon.png
│              │    ├─── logo.png
│              │    └─── + [ additional images ]
│              │
│              ├─── js
│              │    └─── + [ additional js ]
│              │
│              └─── templates
│                   ├─── create-dashboard.jag
│                   ├─── dashboard-settings.jag
│                   ├─── dashboard.jag
│                   ├─── designer.jag
│                   ├─── global-navigation.jag
│                   ├─── index.jag
│                   ├─── login.jag
│                   └─── portal-header.jag
...
└─── themes
     ├─── images
     │    ├─── favicon.png
     │    └─── logo.png
     │
     └─── templates
          ├─── create-dashboard.jag
          ├─── create-gadget.jag
          ├─── dashboard-settings.jag
          ├─── dashboard.jag
          ├─── designer.jag
          ├─── global-navigation.jag
          ├─── index.jag
          ├─── locale_default.json
          ├─── locale_en.json
          ├─── locale_si.json
          ├─── login.jag
          ├─── portal-footer.jag
          └─── portal-header.jag

Note:- Maintain the same structure as in the ~/theme/ folder.

Tips: Do not remove anything in copied .js or .css files in templates (.jag) files, unless you know exactly what you are doing. Because this will break the page functionalities.


Other useful tips

1.) Calling external files to templates

To access the custom-theme folder use the url pre-fixer: See the example below

<%=urlPrefix%><%=utils.resolveUrl(' PATH ')%>

CSS:

<link rel="stylesheet" href="<%=urlPrefix%><%=utils.resolveUrl('css/custom.css')%>">

JS:

<script src="<%=urlPrefix%><%=utils.resolveUrl('js/custom.js')%>"></script>