Index: modules/uoa-monitor-portal/trunk/monitor/src/app/stakeholders.json
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/stakeholders.json	(revision 57320)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/stakeholders.json	(nonexistent)
@@ -1,151 +0,0 @@
-{
- "stakeholders":[
-  {
-    "type": "funder",
-    "name": "European Comission",
-    "id": "EC",
-    "isDefaultProfile": false,
-    "isActive": true,
-    "isPublic": true,
-    "creationDate": "08-10-2019",
-    "updateDate": "08-10-2019",
-    "managers": null,
-
-    "topics": [{
-      "name": "Open Science",
-      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
-      "isActive": true,
-      "isPublic": true,
-      "categories": [
-        {
-        "name": "Overview",
-        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
-        "isOverview": true,
-        "isActive": true,
-        "isPublic": true,
-        "subCategories": [{
-          "name": null,
-          "description": null,
-          "isActive": true,
-          "isPublic": true,
-          "numbers": ["1","2","3"],
-          "charts": ["4"]
-        }]
-      },
-        {
-          "name": "Publications",
-          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
-          "isOverview": false,
-          "isActive": true,
-          "isPublic": true,
-          "subCategories": [{
-            "name": null,
-            "description": null,
-            "isActive": true,
-            "isPublic": true,
-            "numbers": ["1","2","3"],
-            "charts": ["4"]
-          }]
-        },
-        {
-          "name": "Research data",
-          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
-          "isOverview": false,
-          "isActive": true,
-          "isPublic": true,
-          "subCategories": [{
-            "name": null,
-            "description": null,
-            "isActive": true,
-            "isPublic": true,
-            "numbers": [
-            ],
-            "charts": [
-            ]
-          }]
-        },
-        {
-          "name": "Software",
-          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
-          "isOverview": false,
-          "isActive": true,
-          "isPublic": true,
-          "subCategories": [{
-            "name": null,
-            "description": null,
-            "isActive": true,
-            "isPublic": true,
-            "numbers": [
-            ],
-            "charts": [
-            ]
-          }]
-        }, {
-          "name": "Other",
-          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
-          "isOverview": false,
-          "isActive": true,
-          "isPublic": true,
-          "subCategories": [{
-            "name": null,
-            "description": null,
-            "isActive": true,
-            "isPublic": true,
-            "numbers": [
-            ],
-            "charts": [
-            ]
-          }]
-        }
-      ]
-    }]
-  }],
-  "indicators": [{
-    "id": "1",
-    "type": "number",
-    "name": "Total",
-    "description": "Total number of publications",
-    "tags":["publications"],
-    "width": "small",
-    "indicatorPaths":[{"type":"",
-      "url": "/stats-api/funders/{index_shortname}",
-      "jsonPath":["statistics","publications"]}]
-  },
-    {
-      "id": "2",
-      "type": "number",
-      "name": "Open",
-      "description": "Total number of open access publications",
-      "tags":["publication", "open access"],
-      "width": "small",
-      "indicatorPaths": [{"type":"",
-        "url": "/stats-api/funders/{index_shortname}",
-        "jsonPath":["statistics","open"]}]
-    },
-    {
-      "id": "3",
-      "type": "number",
-      "name": "Embargo",
-      "description": "Total number of embargoed publications",
-      "tags":["publication", "embargo"],
-      "width": "small",
-      "indicatorPaths": [{"type":"",
-        "url": "/stats-api/funders/{index_shortname}",
-        "jsonPath":["statistics","embargo"]}]
-    },
-    {
-      "id": "4",
-      "type": "charts",
-      "name": "Number of publications by project",
-      "description": "Number of publications by project",
-      "tags":["publication", "project"],
-      "width": "large",
-      "indicatorPaths":[{ "type":"bar graph",
-        "url": "https://www.openaire.eu/stats/chart.php?com=query&data={%22table%22%3A%22result%22%2C%22fields%22%3A[{%22fld%22%3A%22number%22%2C%22agg%22%3A%22count%22%2C%22type%22%3A%22bar%22%2C%22yaxis%22%3A1%2C%22c%22%3Afalse}]%2C%22xaxis%22%3A{%22name%22%3A%22result_projects-project-acronym%22%2C%22agg%22%3A%22avg%22}%2C%22group%22%3A%22%22%2C%22color%22%3A%22%22%2C%22type%22%3A%22chart%22%2C%22size%22%3A30%2C%22sort%22%3A%22count-number%22%2C%22yaxisheaders%22%3A[%22%22]%2C%22fieldsheaders%22%3A[%22publications%22]%2C%22in%22%3A[]%2C%22filters%22%3A[{%22name%22%3A%22result_projects-project-funding_lvl0%22%2C%22values%22%3A[%22H2020%22]%2C%22to%22%3A%22-1%22}%2C{%22name%22%3A%22type%22%2C%22values%22%3A[%22publication%22]%2C%22to%22%3A%22-1%22}]%2C%22having%22%3A[]%2C%22xStyle%22%3A{%22r%22:%22-%22,%22s%22:%22-%22,%22l%22:%22-%22,%22ft%22:%22-%22,%22wt%22:%22-%22}%2C%22title%22%3A%22H2020%20Publications%20per%20project%20%28top%2030%29%22%2C%22subtitle%22%3A%22%22%2C%22xaxistitle%22%3A%22project%22%2C%22order%22%3A%22d%22}&h=100%&w=80%",
-        "jsonPath":[]},
-        { "type":"table",
-          "url":"https://www.openaire.eu/stats/gtable.php?com=query&data={%22table%22:%22result%22,%22fields%22:[{%22fld%22:%22number%22,%22agg%22:%22count%22,%22type%22:%22pie%22,%22yaxis%22:1,%22c%22:false}],%22xaxis%22:{%22name%22:%22result_projects-project-title%22,%22agg%22:%22avg%22},%22group%22:%22%22,%22color%22:%22%22,%22type%22:%22chart%22,%22size%22:%2230%22,%22sort%22:%22count-number%22,%22yaxisheaders%22:[%22%22],%22fieldsheaders%22:[%22publications%22],%22in%22:[],%22filters%22:[{%22name%22:%22result_projects-project-funder%22,%22values%22:[%22{index_name}%22],%22to%22:%22-1%22},{%22name%22:%22type%22,%22values%22:[%22publication%22],%22to%22:%22-1%22}],%22having%22:[],%22xStyle%22:{%22r%22:-90,%22s%22:%22-%22,%22l%22:%22-%22,%22ft%22:10,%22wt%22:%22-%22},%22title%22:%22{index_shortname}%20Publications%20by%20project%20(top%2030)%22,%22subtitle%22:%22%22,%22xaxistitle%22:%22project%22,%22order%22:%22d%22}",
-          "jsonPath":[]}
-      ]
-    }]
-}
Index: modules/uoa-monitor-portal/trunk/monitor/package.json
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/package.json	(revision 57320)
+++ modules/uoa-monitor-portal/trunk/monitor/package.json	(revision 57321)
@@ -8,7 +8,7 @@
   ],
   "scripts": {
     "ng": "ng",
-    "start": " ng serve --disable-host-check --host 0.0.0.0",
+    "start": " ng serve --port 4500 --disable-host-check --host 0.0.0.0",
     "start:ssr": "npm run build:ssr && npm run serve:ssr",
     "start:prerender": "npm run build:prerender && npm run serve:prerender",
     "build": "ng build",
Index: modules/uoa-monitor-portal/trunk/monitor/src/app/services/stakeholder.service.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/services/stakeholder.service.ts	(nonexistent)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/services/stakeholder.service.ts	(revision 57321)
@@ -0,0 +1,29 @@
+import {Injectable} from "@angular/core";
+import {HttpClient, HttpErrorResponse} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {Stakeholder} from "../stakeholder";
+import {map} from "rxjs/operators";
+
+@Injectable()
+export class StakeholderService {
+
+
+  constructor(private http: HttpClient) {
+  }
+
+  getStakeholder(id: string): Observable<Stakeholder> {
+    return this.http.get<any>('./assets/stakeholders.json').pipe(map(json => {
+      let stakeholder = json.stakeholders.filter(stakeholder => stakeholder.index_id === id)[0];
+      if(stakeholder) {
+        return stakeholder;
+      } else {
+        throw new HttpErrorResponse({
+          error: {
+            message: 'No Stakeholder has been found',
+            status: 404
+          }
+        })
+      }
+    }));
+  }
+}
Index: modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.module.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.module.ts	(nonexistent)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.module.ts	(revision 57321)
@@ -0,0 +1,35 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {MonitorRoutingModule} from "./monitor-routing.module";
+import {MonitorComponent} from "./monitor.component";
+import {StakeholderService} from "../services/stakeholder.service";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
+    HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule
+  ],
+  declarations: [
+    MonitorComponent
+  ],
+  providers: [
+    FreeGuard, PreviousRouteRecorder,
+    PiwikService, StakeholderService
+  ],
+  exports: [
+    MonitorComponent
+  ]
+})
+export class MonitorModule {
+}
Index: modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor-routing.module.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor-routing.module.ts	(nonexistent)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor-routing.module.ts	(revision 57321)
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {MonitorComponent} from "./monitor.component";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+     	{ path: ':id', component: MonitorComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
+    ])
+  ]
+})
+export class MonitorRoutingModule { }
Index: modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.component.html
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.component.html	(nonexistent)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.component.html	(revision 57321)
@@ -0,0 +1,11 @@
+<schema2jsonld [URL]="properties.baseLink"
+               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" type="home"
+               name="OpenAIRE Monitor">
+</schema2jsonld>
+<div
+  class="image-front-topbar uk-margin-large-top"
+  uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+  tm-header-transparent="light" tm-header-transparent-placeholder="">
+  <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+          [texts]="pageContents['top']"></helper>
+</div>
Index: modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.component.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.component.ts	(nonexistent)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/monitor/monitor.component.ts	(revision 57321)
@@ -0,0 +1,113 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
+import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
+import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
+
+import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
+import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {StakeholderService} from "../services/stakeholder.service";
+import {Stakeholder} from "../stakeholder";
+
+@Component({
+  selector: 'monitor',
+  templateUrl: 'monitor.component.html',
+})
+
+export class MonitorComponent {
+  public piwiksub: any;
+  public pageContents = null;
+  public divContents = null;
+  public status: number;
+  public loading: boolean = true;
+  public errorCodes: ErrorCodes;
+  public stakeholder: Stakeholder;
+  private errorMessages: ErrorMessagesComponent;
+  properties: EnvProperties;
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private _meta: Meta,
+    private _title: Title,
+    private _piwikService: PiwikService,
+    private helper: HelperService,
+    private stakeholderService: StakeholderService,
+    private seoService: SEOService) {
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+    this.status = this.errorCodes.LOADING;
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.route.params.subscribe( params => {
+          this.properties = data.envSpecific;
+          var url = data.envSpecific.baseLink + this._router.url;
+          this.stakeholderService.getStakeholder(params['id']).subscribe(stakeholder => {
+            this.stakeholder = stakeholder;
+            this.seoService.createLinkForCanonicalURL(url, false);
+            this._meta.updateTag({content: url}, "property='og:url'");
+            var description = "Monitor | " + this.stakeholder.index_name;
+            var title = "Monitor | " + this.stakeholder.index_shortName;
+            this._meta.updateTag({content: description}, "name='description'");
+            this._meta.updateTag({content: description}, "property='og:description'");
+            this._meta.updateTag({content: title}, "property='og:title'");
+            this._title.setTitle(title);
+            if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+              this.piwiksub = this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe();
+            }
+            //this.getDivContents();
+            this.getPageContents();
+          }, error => {
+            console.log(error);
+            this._router.navigate(['']);
+          })
+        });
+      });
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public quote(param: string): string {
+    return StringUtils.quote(param);
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private handleError(message: string, error): number {
+    var code = "";
+    if (!error.status) {
+      var error = error.json();
+      code = error.code;
+    } else {
+      code = error.status;
+    }
+
+    console.error("Monitor (component): " + message, error);
+
+    return this.errorMessages.getErrorCode(code);
+  }
+}
Index: modules/uoa-monitor-portal/trunk/monitor/src/app/stakeholder.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/stakeholder.ts	(revision 57320)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/stakeholder.ts	(revision 57321)
@@ -1,8 +1,9 @@
 export class Stakeholder {
+  id: string;
   type: string;
-  name: string;
-  shortName:string;
-  id: string;
+  index_id;
+  index_name: string;
+  index_shortName:string;
   isDefaultProfile: boolean;
   isActive: boolean;
   isPublic: boolean;
Index: modules/uoa-monitor-portal/trunk/monitor/src/app/utils/customization/customization.component.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/utils/customization/customization.component.ts	(revision 57320)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/utils/customization/customization.component.ts	(revision 57321)
@@ -58,7 +58,8 @@
   }
 
   private buildCss() {
-    // console.log(this.layout);
+    console.log(this.layout);
+
     document.documentElement.style.setProperty('--portal-main-color', this.layout.mainColor);
     document.documentElement.style.setProperty('--portal-dark-color', this.layout.secondaryColor);
     let css = `
@@ -66,10 +67,11 @@
 .communityPanelBackground:not(bottom)  {   
     border-style: ` + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + `;
     border-color:` + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + `;
-    border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth : '1px') + `;`+`
+    border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth: '1') + `px;`+`
+    
 }
 .communityPanelBackground, .communityPanelBackground .uk-section-primary {
-        background-color:  ` + this.layout.mainColor + `;    
+        background-color:  ` + (this.layout.panel.background.color?this.layout.panel.background.color:this.layout.mainColor) + `;    
 }
 
 /*Panel fonts*/
@@ -77,7 +79,8 @@
 .communityPanelBackground {
     color:` + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ` !important;` +
       (this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : '') +
-      (this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + ' !important;') : '') +
+      (this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + 'px !important;') : '') +
+      (this.layout.panel.fonts.weight != null ? ('font-weight: ' + this.layout.panel.fonts.weight + '!important;') : '') +
 
       `
 }
@@ -87,46 +90,47 @@
 
 .communityPanelBackground .uk-h6:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h4:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h3:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-h2:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h1:not(.ignoreCommunityPanelBackground) {
     color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` +
-
+      (this.layout.panel.title.weight != null ? ('font-weight: ' + this.layout.panel.title.weight + '!important;') : '') +
       `
 }
 .communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){
 `+
       (this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '') +
-      (this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + ' !important;') : '') +
+      (this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + 'px !important;') : '') +
       `
 }
 /* Panel links */
 .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {
     color: `
-      + (this.layout.panel.links.color != null ? this.layout.panel.links.color : 'white') + ` !important;` +
-      (this.layout.panel.links.family != null ? ('font-family: ' + this.layout.panel.links.family + ' !important;') : '') +
-      (this.layout.panel.links.size != null ? ('font-size: ' + this.layout.panel.links.size + ' !important;') : '') +
-      `
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'white') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) + ` !important;`
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.family?('font-family: ' + this.layout.links.darkBackground.family + ' !important;') : '') :'' )
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.size?('font-size: ' + this.layout.links.darkBackground.size + 'px !important;') : '') :'' )
+      +`
 }
 /* Panel links - hover */
 
 .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover {
     color: `
-      + (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + ` !important;` + `
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:`rgba(255, 255, 255, 0.5)`) :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') ) + ` !important;`
+      + `
 }
  
 .uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink,
 .uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover {
-    color:` + (this.layout.links.color != null ? this.layout.links.color : `var(--portal-main-color)`) + `     
+    color:` + (this.layout.links.lightBackground.color != null ? this.layout.links.lightBackground.color : `var(--portal-main-color)`) + `     
 }
 
 .uk-link:hover, a:not(.uk-button):hover,
 .uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a,
 .uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {
-    color:` + (this.layout.links.onHover.color != null ? this.layout.links.onHover.color : `var(--portal-dark-color)`) + `     
+    color:` + (this.layout.links.lightBackground.onHover.color != null ? this.layout.links.lightBackground.onHover.color : `var(--portal-dark-color)`) + `     
 }
 
 .communityBorder {
     border-color: ` + (this.layout.box.borderColor != null ? this.layout.box.borderColor : `var(--portal-main-color)`) + `;
     border-style: ` + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : `solid`) + `;
-    border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2px`) + `;
-    border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6px`) + `;
+    border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2`) + `px;
+    border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6`) + `px;
 }
 
 /*Panel Elements & cards*/
@@ -135,11 +139,15 @@
     border-color: ` + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : `rgba(255, 255, 255, 0.5)`) + `;
 }
 .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{    
-    border-color: ` + (this.layout.panel.links.color != null ? this.layout.panel.links.color : `rgba(255, 255, 255, 0.8)`) + `;
+    border-color: ` +
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'rgba(255, 255, 255, 0.8)') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') )   +
+       + `;
     border-bottom: 1px solid;
 }
 .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{    
-    border-color: ` + (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + `;
+    border-color: ` +
+      (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:'rgba(255, 255, 255, 0.5)') :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') )+
+      + `;
 }
 .communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
     color: ` + (this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : `rgba(255, 255, 255, 0.5)`) + `;
@@ -147,40 +155,60 @@
 
 
 .uk-button:not(.uk-button-text){
-  border-radius:` + (this.layout.buttons.borderRadius != null ? this.layout.buttons.borderRadius : `4px`) + `;
+  border-radius:` + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : `4`) + `px;
 }
 .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button {
-    background-color:` + (this.layout.buttons.backgroundColor != null ? this.layout.buttons.backgroundColor : `#003052`) + `;
-    color: ` + (this.layout.buttons.color != null ? this.layout.buttons.color : `white`) + `;
-    border-color: ` + (this.layout.buttons.borderColor != null ? this.layout.buttons.borderColor : `transparent`) + `;
-    border-style: ` + (this.layout.buttons.borderStyle != null ? this.layout.buttons.borderStyle : `solid`) + `;
-    border-width: ` + (this.layout.buttons.borderWidth != null ? this.layout.buttons.borderWidth : `1px`) + `;
+    background-color:` + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + `;
+    color: ` + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) + `;
+    border-color: ` + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) + `;
+    border-style: ` + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) + `;
+    border-width: ` + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + `px;
   
 
 }
 
 .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {
-    background-color: ` + (this.layout.buttons.onHover.backgroundColor != null ? this.layout.buttons.onHover.backgroundColor : `#154B71`) + `;
-    color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `white`) + `;
-    border-color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `transparent`) + `;
+    background-color: ` + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : `#154B71`) + `;
+    color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `white`) + `;
+    border-color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `transparent`) + `;
 }
 
 /*Buttons*/
 .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
-    background-color: ` + (this.layout.panel.buttons.backgroundColor != null ? this.layout.panel.buttons.backgroundColor : `white`) + `  !important;
-    color: ` + (this.layout.panel.buttons.color != null ? this.layout.panel.buttons.color : `var(--portal-main-color)`) + ` !important;
-    border-color: ` + (this.layout.panel.buttons.borderColor != null ? this.layout.panel.buttons.borderColor : `transparent`) + ` !important;
-    border-style: ` + (this.layout.panel.buttons.borderStyle != null ? this.layout.panel.buttons.borderStyle : `solid`) + `  !important;
-    border-width: ` + (this.layout.panel.buttons.borderWidth != null ? this.layout.panel.buttons.borderWidth : `1px`) + ` !important;
-    border-radius:` + (this.layout.panel.buttons.borderRadius != null ? this.layout.panel.buttons.borderRadius : `4px`) + ` !important;
-    font-weight:` + (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;
-
+    background-color: `
+      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.backgroundColor?this.layout.buttons.darkBackground.backgroundColor:'white') :(this.layout.buttons.lightBackground.backgroundColor?this.layout.buttons.lightBackground.backgroundColor:'var(--portal-main-color)') )
+        +`  !important;
+    color: `
+      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.color?this.layout.buttons.darkBackground.color:'var(--portal-main-color)') :(this.layout.buttons.lightBackground.color?this.layout.buttons.lightBackground.color:'white') )
+      +  ` !important;
+    border-color: `
+      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderColor?this.layout.buttons.darkBackground.borderColor:'white') :(this.layout.buttons.lightBackground.borderColor?this.layout.buttons.lightBackground.borderColor:'var(--portal-main-color)') )
+       + ` !important;
+    border-style: ` +
+       (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderStyle?this.layout.buttons.darkBackground.borderStyle:'solid') :(this.layout.buttons.lightBackground.borderStyle?this.layout.buttons.lightBackground.borderStyle:'solid') )
+       + `  !important;
+    border-width: ` +
+      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderWidth?this.layout.buttons.darkBackground.borderWidth:'1px') :(this.layout.buttons.lightBackground.borderWidth?this.layout.buttons.lightBackground.borderWidth:'1px') )
+      + ` !important;
+    border-radius:` +
+      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderRadius?this.layout.buttons.darkBackground.borderRadius:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+
+       + ` !important;
+    font-weight:`
+      // (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.fontWeight?this.layout.buttons.darkBackground.fontWeight:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+
+      // (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;
++`
 }
 
 .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
-    background-color: ` + (this.layout.panel.buttons.onHover.backgroundColor != null ? this.layout.panel.buttons.onHover.backgroundColor : ` #eeeeee `) + ` !important;
-    color: ` + (this.layout.panel.buttons.onHover.color != null ? this.layout.panel.buttons.onHover.color : ` var(--portal-main-color) `) + `  !important;
-    border-color:` + (this.layout.panel.buttons.onHover.borderColor != null ? this.layout.panel.buttons.onHover.borderColor : `transparent`) + `  !important;
+    background-color: ` +
+       (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.backgroundColor?this.layout.buttons.darkBackground.onHover.backgroundColor:' #eeeeee') :(this.layout.buttons.lightBackground.onHover.backgroundColor?this.layout.buttons.lightBackground.onHover.backgroundColor:'var(--portal-dark-color)') )
+      + ` !important;
+    color: ` +
+      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.color?this.layout.buttons.darkBackground.onHover.color:' var(--portal-main-color) ') :(this.layout.buttons.lightBackground.onHover.color?this.layout.buttons.lightBackground.onHover.color:'white') )
+       + `  !important;
+    border-color:`
+       +(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.borderColor?this.layout.buttons.darkBackground.onHover.borderColor:' #eeeeee ') :(this.layout.buttons.lightBackground.onHover.borderColor?this.layout.buttons.lightBackground.onHover.borderColor:'var(--portal-dark-color)') )
+      + `  !important;
 }
 
 
Index: modules/uoa-monitor-portal/trunk/monitor/src/app/app-routing.module.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/app/app-routing.module.ts	(revision 57320)
+++ modules/uoa-monitor-portal/trunk/monitor/src/app/app-routing.module.ts	(revision 57321)
@@ -9,8 +9,8 @@
 
 const routes: Routes = [
   // Other Pages
-  { path: '', loadChildren: './home/home.module#HomeModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
-
+  { path: '', loadChildren: './home/home.module#HomeModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
+  { path: 'monitor', loadChildren: './monitor/monitor.module#MonitorModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
   { path: 'about',  redirectTo: 'about/learn-how', pathMatch: 'full'},
   { path: 'about/learn-how', loadChildren: './learn-how/learn-how.module#LearnHowModule', resolve: { envSpecific:  EnvironmentSpecificResolver }},
   { path: 'about/learn-in-depth', loadChildren: './learn-how/learnInDepth/learn-in-depth.module#LearnInDepthModule', resolve: { envSpecific:  EnvironmentSpecificResolver }},
Index: modules/uoa-monitor-portal/trunk/monitor/src/assets/stakeholders.json
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor/src/assets/stakeholders.json	(nonexistent)
+++ modules/uoa-monitor-portal/trunk/monitor/src/assets/stakeholders.json	(revision 57321)
@@ -0,0 +1,153 @@
+{
+ "stakeholders":[
+  {
+    "id": "1",
+    "type": "funder",
+    "index_id": "EC",
+    "index_name": "European Comission",
+    "index_shortName": "EC",
+    "isDefaultProfile": false,
+    "isActive": true,
+    "isPublic": true,
+    "creationDate": "08-10-2019",
+    "updateDate": "08-10-2019",
+    "managers": null,
+
+    "topics": [{
+      "name": "Open Science",
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
+      "isActive": true,
+      "isPublic": true,
+      "categories": [
+        {
+        "name": "Overview",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
+        "isOverview": true,
+        "isActive": true,
+        "isPublic": true,
+        "subCategories": [{
+          "name": null,
+          "description": null,
+          "isActive": true,
+          "isPublic": true,
+          "numbers": ["1","2","3"],
+          "charts": ["4"]
+        }]
+      },
+        {
+          "name": "Publications",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
+          "isOverview": false,
+          "isActive": true,
+          "isPublic": true,
+          "subCategories": [{
+            "name": null,
+            "description": null,
+            "isActive": true,
+            "isPublic": true,
+            "numbers": ["1","2","3"],
+            "charts": ["4"]
+          }]
+        },
+        {
+          "name": "Research data",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
+          "isOverview": false,
+          "isActive": true,
+          "isPublic": true,
+          "subCategories": [{
+            "name": null,
+            "description": null,
+            "isActive": true,
+            "isPublic": true,
+            "numbers": [
+            ],
+            "charts": [
+            ]
+          }]
+        },
+        {
+          "name": "Software",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
+          "isOverview": false,
+          "isActive": true,
+          "isPublic": true,
+          "subCategories": [{
+            "name": null,
+            "description": null,
+            "isActive": true,
+            "isPublic": true,
+            "numbers": [
+            ],
+            "charts": [
+            ]
+          }]
+        }, {
+          "name": "Other",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...",
+          "isOverview": false,
+          "isActive": true,
+          "isPublic": true,
+          "subCategories": [{
+            "name": null,
+            "description": null,
+            "isActive": true,
+            "isPublic": true,
+            "numbers": [
+            ],
+            "charts": [
+            ]
+          }]
+        }
+      ]
+    }]
+  }],
+  "indicators": [{
+    "id": "1",
+    "type": "number",
+    "name": "Total",
+    "description": "Total number of publications",
+    "tags":["publications"],
+    "width": "small",
+    "indicatorPaths":[{"type":"",
+      "url": "/stats-api/funders/{index_shortname}",
+      "jsonPath":["statistics","publications"]}]
+  },
+    {
+      "id": "2",
+      "type": "number",
+      "name": "Open",
+      "description": "Total number of open access publications",
+      "tags":["publication", "open access"],
+      "width": "small",
+      "indicatorPaths": [{"type":"",
+        "url": "/stats-api/funders/{index_shortname}",
+        "jsonPath":["statistics","open"]}]
+    },
+    {
+      "id": "3",
+      "type": "number",
+      "name": "Embargo",
+      "description": "Total number of embargoed publications",
+      "tags":["publication", "embargo"],
+      "width": "small",
+      "indicatorPaths": [{"type":"",
+        "url": "/stats-api/funders/{index_shortname}",
+        "jsonPath":["statistics","embargo"]}]
+    },
+    {
+      "id": "4",
+      "type": "charts",
+      "name": "Number of publications by project",
+      "description": "Number of publications by project",
+      "tags":["publication", "project"],
+      "width": "large",
+      "indicatorPaths":[{ "type":"bar graph",
+        "url": "https://www.openaire.eu/stats/chart.php?com=query&data={%22table%22%3A%22result%22%2C%22fields%22%3A[{%22fld%22%3A%22number%22%2C%22agg%22%3A%22count%22%2C%22type%22%3A%22bar%22%2C%22yaxis%22%3A1%2C%22c%22%3Afalse}]%2C%22xaxis%22%3A{%22name%22%3A%22result_projects-project-acronym%22%2C%22agg%22%3A%22avg%22}%2C%22group%22%3A%22%22%2C%22color%22%3A%22%22%2C%22type%22%3A%22chart%22%2C%22size%22%3A30%2C%22sort%22%3A%22count-number%22%2C%22yaxisheaders%22%3A[%22%22]%2C%22fieldsheaders%22%3A[%22publications%22]%2C%22in%22%3A[]%2C%22filters%22%3A[{%22name%22%3A%22result_projects-project-funding_lvl0%22%2C%22values%22%3A[%22H2020%22]%2C%22to%22%3A%22-1%22}%2C{%22name%22%3A%22type%22%2C%22values%22%3A[%22publication%22]%2C%22to%22%3A%22-1%22}]%2C%22having%22%3A[]%2C%22xStyle%22%3A{%22r%22:%22-%22,%22s%22:%22-%22,%22l%22:%22-%22,%22ft%22:%22-%22,%22wt%22:%22-%22}%2C%22title%22%3A%22H2020%20Publications%20per%20project%20%28top%2030%29%22%2C%22subtitle%22%3A%22%22%2C%22xaxistitle%22%3A%22project%22%2C%22order%22%3A%22d%22}&h=100%&w=80%",
+        "jsonPath":[]},
+        { "type":"table",
+          "url":"https://www.openaire.eu/stats/gtable.php?com=query&data={%22table%22:%22result%22,%22fields%22:[{%22fld%22:%22number%22,%22agg%22:%22count%22,%22type%22:%22pie%22,%22yaxis%22:1,%22c%22:false}],%22xaxis%22:{%22name%22:%22result_projects-project-title%22,%22agg%22:%22avg%22},%22group%22:%22%22,%22color%22:%22%22,%22type%22:%22chart%22,%22size%22:%2230%22,%22sort%22:%22count-number%22,%22yaxisheaders%22:[%22%22],%22fieldsheaders%22:[%22publications%22],%22in%22:[],%22filters%22:[{%22name%22:%22result_projects-project-funder%22,%22values%22:[%22{index_name}%22],%22to%22:%22-1%22},{%22name%22:%22type%22,%22values%22:[%22publication%22],%22to%22:%22-1%22}],%22having%22:[],%22xStyle%22:{%22r%22:-90,%22s%22:%22-%22,%22l%22:%22-%22,%22ft%22:10,%22wt%22:%22-%22},%22title%22:%22{index_shortname}%20Publications%20by%20project%20(top%2030)%22,%22subtitle%22:%22%22,%22xaxistitle%22:%22project%22,%22order%22:%22d%22}",
+          "jsonPath":[]}
+      ]
+    }]
+}
