j1-template 2020.0.18 → 2020.0.19

data/assets/data/themes.json

@@ -48,6 +48,7 @@ regenerate: true
   "themes":
   [
     {"name": "Uno",             "css": "{{asset_path}}/core/css/uno.css"},
+    {"name": "Uno dark",        "css": "{{asset_path}}/core/css/uno-dark.css"},
     {"name": "Bootstrap",       "css": "{{asset_path}}/core/css/bootstrap.css"}
   ]
 }
@@ -56,6 +57,7 @@ regenerate: true
   "themes":
   [
     {"name": "Uno",             "css": "{{asset_path}}/core/css/uno.min.css"},
+    {"name": "Uno dark",        "css": "{{asset_path}}/core/css/uno-dark.min.css"},
     {"name": "Bootstrap",       "css": "{{asset_path}}/core/css/bootstrap.min.css"}
   ]
 }

data/assets/themes/j1/adapter/js/carousel.js

@@ -129,157 +129,158 @@ j1.adapter['carousel'] = (function (j1, window) {
         moduleOptions = j1.mergeData(moduleOptions, settings);
       }
 
-
-
       _this.setState('started');
       logger.info('state: ' + _this.getState());
       logger.info('module is being initialized');
 
-      {% for item in carousel_options.carousel %}
-
-        {% if item.show.enabled %}
-          {% assign slider_id     = item.show.id %}
-          {% assign slider_title  = item.show.title %}
-          {% assign slider_type   = item.show.type %}
-          {% assign parallax      = item.show.parallax %}
-          {% assign css_classes   = item.show.css_classes %}
-          {% assign lazyLoad      = item.show.lightbox %}
-
-          // Create an Carousel INSTANCE if slider on id: {{slider_id}} exists
-          if ($('#{{slider_id}}').length) {
-
-            {% if environment == 'development' %}
-              logText = 'slider is being initialized on id: #{{slider_id}}';
-              logger.info(logText);
-              _this.setState('running');
-              logger.info('state: ' + _this.getState());
-              logger.info('module is being initialized');
-            {% endif %}
+      var dependencies_met_page_finished = setInterval(function() {
+        if (j1.getState() == 'finished') {
 
-            {% if item.show.slide_height != null %}
-              // Set slide_height: {{item.show.slide_height}}vh
-              {% assign slide_height  = item.show.slide_height %}
-              $('head').append('<style>.owl-carousel .item{height: {{slide_height}}vh;}</style>');
-            {% endif %}
+          {% for item in carousel_options.carousel %}
 
-            {% if item.show.slide_space_between %}
-              {% assign slide_space = item.show.slide_space_between %}
-            {% else %}
-              {% assign slide_space = 3 %}
-            {% endif %}
-
-            {% if item.show.slide_border %}
-              {% assign slide_border = "thumbnail" %}
-            {% else %}
-              {% assign slide_border = "" %}
-            {% endif %}
+            {% if item.show.enabled %}
+              {% assign slider_id     = item.show.id %}
+              {% assign slider_title  = item.show.title %}
+              {% assign slider_type   = item.show.type %}
+              {% assign parallax      = item.show.parallax %}
+              {% assign css_classes   = item.show.css_classes %}
+              {% assign lazyLoad      = item.show.lightbox %}
 
-            // Place HTML markup for the title
-            {% if slider_title %}
-            var slider_title = '<div class="slider-title">{{slider_title}}</div>';
-            $('#{{slider_id}}').before(slider_title);
-            {% endif %}
+              // Create an Carousel INSTANCE if slider on id: {{slider_id}} exists
+              if ($('#{{slider_id}}').length) {
 
-            // place parallax styles
-            {% if parallax %}
-              $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{background:url(/assets/images/quotes/default.png) 50% 0 repeat fixed}</style>');
-              $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{padding:75px 0 75px 25px;position:relative}</style>');
-              $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{color:#e5e5e5;font-size:1.5rem;font-weight:400}</style>');
-              $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-align:center}</style -->');
-              $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-transform:uppercase}</style -->');
-              $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:url(/assets/images/modules/patterns/gridtile.png) repeat;}</style>');
-              $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,0.3)}</style>');
-            {% endif %}
+                {% if environment == 'development' %}
+                  logText = 'slider is being initialized on id: #{{slider_id}}';
+                  logger.info(logText);
+                  _this.setState('running');
+                  logger.info('state: ' + _this.getState());
+                  logger.info('module is being initialized');
+                {% endif %}
 
-            $('head').append('<style>.{{slider_id}}-item{margin: {{slide_space}}px;}</style>');
-            //$('.{{slider_id}}-item').parent().addClass('owl-carousel');
-            //$('.owl-carousel .item').css('margin','{{slide_space}}px');
-
-            // Initialize individual show parameters
-            /* eslint-disable */
-            $('#{{slider_id}}').owlCarousel({
-              {% for option in item.show.options %}
-              {{option[0] | json}}: {{option[1] | json}},
-              {% endfor %}
-              // Enable lazyLoad if lightbox is enabled
-              {% if item.show.lightbox %}
-              "lazyLoad": true,
-              {% endif %}
-              "jsonPath": {{carousel_options.xhr_data_path | json}},
-              "jsonSuccess": customDataSuccess_{{forloop.index}}
-            });
-            /* eslint-enable */
-
-            // Initialize instance variable (for later access)
-            //{{slider_id}} = $('#{{slider_id}}').data('owlCarousel');
-
-            j1['{{slider_id}}'] = $('#{{slider_id}}').data('owlCarousel');
-
-            // jQuery show data functions
-            function customDataSuccess_{{forloop.index}}(data){
-              var content = '';
-              for (var i in data['{{slider_id}}']) {
-                {% if slider_type == 'image' %}
-                var lb          = data['{{slider_id}}'][i].lb;
-                var lb_caption  = data['{{slider_id}}'][i].lb_caption;
-                var img         = data['{{slider_id}}'][i].img;
-                var alt         = data['{{slider_id}}'][i].alt;
+                {% if item.show.slide_height != null %}
+                  // Set slide_height: {{item.show.slide_height}}vh
+                  {% assign slide_height  = item.show.slide_height %}
+                  $('head').append('<style>.owl-carousel .item{height: {{slide_height}}vh;}</style>');
                 {% endif %}
-                {% if slider_type == 'text' %}
-                var text        = data['{{slider_id}}'][i].text;
+
+                {% if item.show.slide_space_between %}
+                  {% assign slide_space = item.show.slide_space_between %}
+                {% else %}
+                  {% assign slide_space = 3 %}
                 {% endif %}
-                var href        = data['{{slider_id}}'][i].href;
-                {% if  css_classes %}
-                var css_classes = 'class="{{css_classes}}";';
+
+                {% if item.show.slide_border %}
+                  {% assign slide_border = "thumbnail" %}
                 {% else %}
-                var css_classes = '';
+                  {% assign slide_border = "" %}
                 {% endif %}
 
-                {% if slider_type == 'image' %}
-                // If lightbox is enabled (preference over href)
-                if (lb) {
-                  if (lb_caption) {
-                    content += '\t\t' + '<div class="item {{slider_id}}-item {{slide_border}}">'+ '\n';
-                    content += '\t\t\t' + '<a href="' +img+ '" ' + 'data-lightbox="{{slider_id}}" data-title="' +lb_caption+ '">' + '\n';
-                    content += '\t\t\t\t' + '<img class="lazyOwl" src="' +img+ '">' + '\n';
-                    content += '\t\t\t' + '</a>' + '\n';
-                    if (href) {
-                    content += '\t\t\t' + '<span class="carousel-caption"><a href="' +href+ '">' +lb_caption+ '</a> </span>' + '\n';
-                    } else {
-                    content += '\t\t\t' + '<span class="carousel-caption">' +lb_caption+ '</span>' + '\n';
-                    }
-                    content += '\t\t' + '</div>' + '\n';
-                  } else {
-                    content += '<a class="item" href="' +img+ '" ' + 'data-lightbox="{{slider_id}}"> <img class="lazyOwl" data-src="' +img+ '" alt="' +alt+ '">' + '</a>';
-                  }
-                } else if (href) {
-                    content += '<div class="item">' + '<img ' +css_classes+ ' src="' +img+ '" alt="' +alt+ '">' + '</div>';
-                } else {
-                    content += '<div class="item">' + '<img ' +css_classes+ ' src="' +img+ '" alt="' +alt+ '">' + '</div>';
-                }
+                // Place HTML markup for the title
+                {% if slider_title %}
+                var slider_title = '<div class="slider-title">{{slider_title}}</div>';
+                $('#{{slider_id}}').before(slider_title);
                 {% endif %}
 
-                {% if slider_type == 'text' %}
-                if (href) {
-                  content += '<div class="item">' + '<p href=' +href+ '">' +text+ '</p>' + '</div>';
-                } else {
-                  content += '<div class="item">' + '<p>' +text+ '</p>' + '</div>';
-                }
+                // place parallax styles
+                {% if parallax %}
+                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{background:url(/assets/images/quotes/default.png) 50% 0 repeat fixed}</style>');
+                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{padding:75px 0 75px 25px;position:relative}</style>');
+                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{color:#e5e5e5;font-size:1.5rem;font-weight:400}</style>');
+                  $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-align:center}</style -->');
+                  $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-transform:uppercase}</style -->');
+                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:url(/assets/images/modules/patterns/gridtile.png) repeat;}</style>');
+                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,0.3)}</style>');
                 {% endif %}
-              }
-              $('#{{slider_id}}').html(content);
-              logText = 'initializing slider finished on id: {{slider_id}}';
-              logger.info(logText);
-            } // END customDataSuccess_{{forloop.index}}
-          } // END if carousel exists
-        {% endif %}
-      {% endfor %}
-
-      _this.setState('finished');
-      logger.info('state: ' + _this.getState());
-      logger.info('initializing module finished');
 
-      return true;
+                $('head').append('<style>.{{slider_id}}-item{margin: {{slide_space}}px;}</style>');
+                //$('.{{slider_id}}-item').parent().addClass('owl-carousel');
+                //$('.owl-carousel .item').css('margin','{{slide_space}}px');
+
+                // Initialize individual show parameters
+                /* eslint-disable */
+                $('#{{slider_id}}').owlCarousel({
+                  {% for option in item.show.options %}
+                  {{option[0] | json}}: {{option[1] | json}},
+                  {% endfor %}
+                  // Enable lazyLoad if lightbox is enabled
+                  {% if item.show.lightbox %}
+                  "lazyLoad": true,
+                  {% endif %}
+                  "jsonPath": {{carousel_options.xhr_data_path | json}},
+                  "jsonSuccess": customDataSuccess_{{forloop.index}}
+                });
+                /* eslint-enable */
+
+                // Initialize instance variable (for later access)
+                //{{slider_id}} = $('#{{slider_id}}').data('owlCarousel');
+
+                j1['{{slider_id}}'] = $('#{{slider_id}}').data('owlCarousel');
+
+                // jQuery show data functions
+                function customDataSuccess_{{forloop.index}}(data){
+                  var content = '';
+                  for (var i in data['{{slider_id}}']) {
+                    {% if slider_type == 'image' %}
+                    var lb          = data['{{slider_id}}'][i].lb;
+                    var lb_caption  = data['{{slider_id}}'][i].lb_caption;
+                    var img         = data['{{slider_id}}'][i].img;
+                    var alt         = data['{{slider_id}}'][i].alt;
+                    {% endif %}
+                    {% if slider_type == 'text' %}
+                    var text        = data['{{slider_id}}'][i].text;
+                    {% endif %}
+                    var href        = data['{{slider_id}}'][i].href;
+                    {% if  css_classes %}
+                    var css_classes = 'class="{{css_classes}}";';
+                    {% else %}
+                    var css_classes = '';
+                    {% endif %}
+
+                    {% if slider_type == 'image' %}
+                    // If lightbox is enabled (preference over href)
+                    if (lb) {
+                      if (lb_caption) {
+                        content += '\t\t' + '<div class="item {{slider_id}}-item {{slide_border}}">'+ '\n';
+                        content += '\t\t\t' + '<a href="' +img+ '" ' + 'data-lightbox="{{slider_id}}" data-title="' +lb_caption+ '">' + '\n';
+                        content += '\t\t\t\t' + '<img class="lazyOwl" src="' +img+ '">' + '\n';
+                        content += '\t\t\t' + '</a>' + '\n';
+                        if (href) {
+                        content += '\t\t\t' + '<span class="carousel-caption"><a href="' +href+ '">' +lb_caption+ '</a> </span>' + '\n';
+                        } else {
+                        content += '\t\t\t' + '<span class="carousel-caption">' +lb_caption+ '</span>' + '\n';
+                        }
+                        content += '\t\t' + '</div>' + '\n';
+                      } else {
+                        content += '<a class="item" href="' +img+ '" ' + 'data-lightbox="{{slider_id}}"> <img class="lazyOwl" data-src="' +img+ '" alt="' +alt+ '">' + '</a>';
+                      }
+                    } else if (href) {
+                        content += '<div class="item">' + '<img ' +css_classes+ ' src="' +img+ '" alt="' +alt+ '">' + '</div>';
+                    } else {
+                        content += '<div class="item">' + '<img ' +css_classes+ ' src="' +img+ '" alt="' +alt+ '">' + '</div>';
+                    }
+                    {% endif %}
+
+                    {% if slider_type == 'text' %}
+                    if (href) {
+                      content += '<div class="item">' + '<p href=' +href+ '">' +text+ '</p>' + '</div>';
+                    } else {
+                      content += '<div class="item">' + '<p>' +text+ '</p>' + '</div>';
+                    }
+                    {% endif %}
+                  }
+                  $('#{{slider_id}}').html(content);
+                  logText = 'initializing slider finished on id: {{slider_id}}';
+                  logger.info(logText);
+                } // END customDataSuccess_{{forloop.index}}
+              } // END if carousel exists
+            {% endif %}
+          {% endfor %}
+          clearInterval(dependencies_met_page_finished);
+        }
+        _this.setState('finished');
+        logger.info('state: ' + _this.getState());
+        logger.info('initializing module finished');
+      }, 25); // END 'dependencies_met_adapter_finished'
     }, // END init
 
     // -------------------------------------------------------------------------

data/assets/themes/j1/adapter/js/j1.js

@@ -137,7 +137,7 @@ var j1 = (function () {
   // Theme information
   var themeName;
   var themeCss;
-  var themeExtensionCss = environment === 'production' ? '/assets/themes/j1/core/css/theme_extensions.min.css' : '/assets/themes/j1/core/css/theme_extensions.css';
+  var themeExtensionCss = environment === 'production' ? '/assets/themes/j1/core/css/theme-extensions.min.css' : '/assets/themes/j1/core/css/theme-extensions.css';
 
   // Pathes of J1 data files
   var colors_data_path          = '{{template_config.colors_data_path}}';
@@ -157,6 +157,8 @@ var j1 = (function () {
   var referrer;
 
   var default_theme_css           = environment === 'production' ? '/assets/themes/j1/core/css/uno.min.css' : '/assets/themes/j1/core/css/uno.css';
+  // TODO: check what property is used default_theme|default_theme_name ?
+  var default_theme               = 'Uno';
   var default_theme_name          = 'Uno';
   var default_theme_author        = 'J1 Team';
   var default_theme_link          = 'https://jekyll.one/';
@@ -504,7 +506,6 @@ var j1 = (function () {
           if ( statusTxt ==  'success' ) {
             var logger = log4javascript.getLogger('j1.xhrData');
             logText = 'loading banner completed on id: ' +banner_id;
-            $(banner_id).addClass("mutated");
             logger.info(logText);
             j1.setXhrDataState(banner_id, statusTxt);
             j1.setXhrDomState(banner_id, statusTxt);
@@ -713,7 +714,6 @@ var j1 = (function () {
           if ( statusTxt ==  'success' ) {
             logText = 'footer loaded successfully on id: ' + footer_id;
             logger.info(logText);
-            $(footer_id).addClass("mutated");
             j1.setXhrDataState(footer_id, statusTxt);
             j1.setXhrDomState(footer_id, statusTxt);
             logger.info('XHR data loaded in the DOM: ' + footer_id);
@@ -1555,6 +1555,23 @@ var j1 = (function () {
       return val;
     }, // END getStyleValue
 
+    // -------------------------------------------------------------------------
+    // getStyleSheetLoaded:
+    // NOTE:
+    // EXAMPLE: getStyleSheetLoaded('bootstrap');
+    //
+    getStyleSheetLoaded: function (styleSheet) {
+      // var styleSheet  = styleSheetName.toLowerCase() + '.css';
+      var sheets      = document.styleSheets, stylesheet = sheets[(sheets.length - 1)];
+
+      // find CSS file 'styleSheetName' in document
+      for(var i in document.styleSheets) {
+        if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
+          return true;;
+        }
+      }
+    },
+
     // -------------------------------------------------------------------------
     //  Returns the names of cookies used for J1 Template
     // -------------------------------------------------------------------------
@@ -1566,8 +1583,9 @@ var j1 = (function () {
     // Set dynamic styles
     // -------------------------------------------------------------------------
     setCss: function () {
-      var logger     = log4javascript.getLogger('j1.setCss');
-      var bg_primary = j1.getStyleValue('bg-primary', 'background-color');
+      var logger        = log4javascript.getLogger('j1.setCss');
+      var bg_primary    = j1.getStyleValue('bg-primary', 'background-color');
+      var bg_secondary  = j1.getStyleValue('bg-secondary', 'background-color');
 
       logger.info('set color scheme for selected theme');
 
@@ -1575,6 +1593,12 @@ var j1 = (function () {
       // -----------------------------------------------------------------------
       $('head').append('<style>.g-bg-primary { background-color: ' +bg_primary+ ' !important; }</style>');
 
+      // Set color of timeline bullet
+      // -----------------------------------------------------------------------
+      // $('head').append('<style>.tmicon { background: ' +bg_primary+ ' !important; }</style>');
+      // $('head').append('<style>.timeline-panel:after { border-left-color: ' +bg_primary+ ' !important; }</style>');
+      // $('head').append('<style>.timeline-panel:after { border-right-color: ' +bg_primary+ ' !important; }</style>');
+
       // mdi icons
       // -----------------------------------------------------------------------
       $('head').append('<style>.iconify-md-bg-primary { color: ' +bg_primary+ ' !important; }</style>');
@@ -1584,9 +1608,9 @@ var j1 = (function () {
 
       // asciidoc
       // -----------------------------------------------------------------------
-      var admonitionblock_note_color      = '#0D47A1';                          // md-blue-900, was: bg_primary;
+      var admonitionblock_note_color      = bg_primary;
       var admonitionblock_tip_color       = j1.getStyleValue('btn-success', 'background-color');
-      var admonitionblock_important_color = j1.getStyleValue('btn-warning', 'background-color');
+      var admonitionblock_important_color = j1.getStyleValue('btn-info', 'background-color');
       var admonitionblock_warning_color   = j1.getStyleValue('icon-warning', 'color');
       var admonitionblock_caution_color   = j1.getStyleValue('btn-danger', 'background-color');
 
@@ -1598,7 +1622,7 @@ var j1 = (function () {
 
       // bs base styles
       // -----------------------------------------------------------------------
-      $('head').append('<style>code { color: ' +bg_primary+ ' !important; }</style>');
+      $('head').append('<style>code { color: ' +bg_secondary+ ' !important; }</style>');
 
       // bs tool tips
       // -----------------------------------------------------------------------

data/assets/themes/j1/adapter/js/mmenu.js

@@ -110,6 +110,7 @@ j1.adapter['mmenu'] = (function (j1, window) {
   var environment   = '{{environment}}';
   var dclFinished   = false;
   var moduleOptions = {};
+  var themerOptions = {};
   var cookie_names  = j1.getCookieNames();
   var user_state;
   var user_session;
@@ -160,6 +161,7 @@ j1.adapter['mmenu'] = (function (j1, window) {
       var xhr_data_path;
       var menu_id;
 
+      themerOptions = $.extend({}, {{themer_options | replace: '=>', ':' }});
       // save config settings into the mmenu object for global access
       //
       _this['navMenuOptions'] = navMenuOptions;
@@ -314,12 +316,10 @@ j1.adapter['mmenu'] = (function (j1, window) {
               });
             });
 
-            // load themes from Bootswatch API (set localFeed EMPTY)
-            $('#ThemeList_MMenu').bootstrapThemeSwitcher({
-                localFeed: ''
-            });
-            // load (local) J1 themes (default settings)
-            $('#ThemeSelect_MMenu').bootstrapThemeSwitcher();
+            // remotely loaded (BootSwatch) themes (from API)
+            $('#remote_themes_mmenu').bootstrapThemeSwitcher({localFeed: ''});
+            // locally loaded themes (from json file)
+            $('#local_themes_mmenu').bootstrapThemeSwitcher({localFeed: themerOptions.localThemes});
             logger.info('met dependencies for: {{menu_id}} loaded');
             clearInterval(dependencies_met_{{menu_id}}_loaded);
             $('#{{item.menu.content.id}}').show();

data/assets/themes/j1/adapter/js/navigator.js

@@ -6,7 +6,7 @@ regenerate: true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/themes/j1/adapter/js/navigator.js
+ # ~/assets/themes/j1/adapter/js/navigator.js (new-2)
  # Liquid template to adapt Navigator Core functions
  #
  # Product/Info:
@@ -174,7 +174,7 @@ j1.adapter['navigator'] = (function (j1, window) {
   var user_session_merged         = {};
   var session_state               = {};
 
-  var themerEnabled               = false;
+  var themerEnabled               = {{themer_options.enabled}};                 //was (test): false;
   var authClientEnabled;
   var appDetected;
   var json_data;
@@ -234,6 +234,8 @@ j1.adapter['navigator'] = (function (j1, window) {
       var navAuthClientOptions                      = {};
       var navAuthMAnagerConfig                      = {};
 
+      var themerOptions                             = {};
+
       navDefaults                                   = $.extend({}, {{navigator_defaults | replace: '=>', ':' }});
       navBarConfig                                  = $.extend({}, {{nav_bar_options | replace: '=>', ':' }});
       navMenuConfig                                 = $.extend({}, {{nav_menu_options | replace: '=>', ':' }});
@@ -244,6 +246,7 @@ j1.adapter['navigator'] = (function (j1, window) {
       navAuthMAnagerConfig                          = $.extend({}, {{authentication_options | replace: '=>', ':' }});
       authClientEnabled                             = navAuthMAnagerConfig.enabled;
 
+      themerOptions                                 = $.extend({}, {{themer_options | replace: '=>', ':' }});
 
       // Merge|Overload module CONFIG by DEFAULTS
       //
@@ -331,23 +334,30 @@ j1.adapter['navigator'] = (function (j1, window) {
           // cast text-based booleans
           // themerEnabled = ({{themer_options.enabled }} === 'true');
 
-          if ({{themer_options.enabled }}) {
-            logText = 'theme switcher detect: enabled';
-            logger.info(logText);
-            // initialize theme switcher menu
-            // load themes from Bootswatch API (set localFeed EMPTY)
-            $('#ThemeList').bootstrapThemeSwitcher({
-                localFeed: ''
-            });
-            // load (local) J1 themes (default settings)
-            $('#ThemeSelect').bootstrapThemeSwitcher();
-            logText = 'theme switcher menu loaded successfully';
-            logger.info(logText);
-          } else {
-            logText = 'theme switcher detect: disabled';
-            logger.info(logText);
-          }
-          _this.setState('initialized');
+          // load themes (to menu) if page is finished
+          var dependencies_met_page_finished = setInterval(function() {
+            if (j1.getState() == 'finished') {
+              if ({{themer_options.enabled }}) {
+                // initialize theme switcher menus
+                logText = 'theme switcher detect: enabled';
+                logger.info(logText);
+
+                // load remote themes (Bootswatch API)
+                logText = 'load remote themes (Bootswatch API)';
+                logger.info(logText);
+                $('#remote_themes').bootstrapThemeSwitcher({localFeed: ''});
+                // load local themes (json file)
+                logText = 'load local themes (json file)';
+                logger.info(logText);
+                $('#local_themes').bootstrapThemeSwitcher({localFeed: themerOptions.localThemes});
+              } else {
+                logText = 'theme switcher detect: disabled';
+                logger.info(logText);
+              }
+              clearInterval(dependencies_met_page_finished);
+            }
+            _this.setState('initialized');
+          }, 25); // END 'dependencies_met_page_finished'
 
           // -----------------------------------------------------------------
           // event handler|css styles
@@ -361,12 +371,18 @@ j1.adapter['navigator'] = (function (j1, window) {
                 logger.info('initialize eventHandler');
                 j1.core.navigator.eventHandler();
 
-                // set general|global theme colors
-                logger.info('apply dynamic CSS styles');
-                _this.setCSS (
-                  navDefaults, navBarOptions, navMenuOptions,
-                  navQuicklinksOptions, navTopsearchOptions
-                );
+                var dependencies_met_page_finished = setInterval(function() {
+                  if (j1.getState() == 'finished') {
+                    // set general|global theme colors
+                    logger.info('initializing dynamic CSS styles: started');
+                    _this.setCSS (
+                      navDefaults, navBarOptions, navMenuOptions,
+                      navQuicklinksOptions, navTopsearchOptions
+                    );
+                    clearInterval(dependencies_met_page_finished);
+                  }
+                  logger.info('initializing dynamic CSS styles: finished');
+                }, 25); // END 'dependencies_met_adapter_finished'
 
                 logger.info('init auth client');
                 _this.initAuthClient(_this.navAuthManagerConfig);
@@ -635,12 +651,12 @@ j1.adapter['navigator'] = (function (j1, window) {
 
       {% comment %} Set dymanic styles
       -------------------------------------------------------------------------- {% endcomment %}
-      $('nav-primary').css({"background-color": "navPrimaryColor"});
+      // $('nav-primary').css({"background-color": "navPrimaryColor"});
 
 
       {% comment %} navBar styles
       -------------------------------------------------------------------------- {% endcomment %}
-      var bg_primary    = j1.getStyleValue('nav-primary', 'background-color');
+      var bg_primary    = j1.getStyleValue('bg-primary', 'background-color');
       var bg_scrolled   = bg_primary;
       var bg_collapsed  = bg_primary;
 
@@ -653,6 +669,14 @@ j1.adapter['navigator'] = (function (j1, window) {
       $('head').append('<style>@media (min-width: ' +gridBreakpoint_lg+ ') { nav.navbar.navigator.navbar-transparent.light { background-color: ' +navBarOptions.background_color_full+ ' !important; border-bottom: solid 0px !important; } }</style>');
       $('head').append('<style>@media (min-width: ' +gridBreakpoint_lg+ ') { nav.navbar.navigator.navbar-scrolled.light { background-color: ' +bg_scrolled+ ' !important; } }</style>');
 
+      $('head').append('<style id="dynNav">@media (max-width: ' +gridBreakpoint_md+ ') { nav.navbar.navigator.navbar-transparent.light { background-color: ' +navBarOptions.background_color_full+ ' !important; border-bottom: solid 0px !important; } }</style>');
+      $('head').append('<style id="dynNav">@media (max-width: ' +gridBreakpoint_md+ ') { nav.navbar.navigator.navbar-scrolled.light { background-color: ' +bg_scrolled+ ' !important; } }</style>');
+      $('head').append('<style id="dynNav">@media (min-width: ' +gridBreakpoint_md+ ') { nav.navbar.navigator.navbar-transparent.light { background-color: ' +navBarOptions.background_color_full+ ' !important; border-bottom: solid 0px !important; } }</style>');
+      $('head').append('<style id="dynNav">@media (min-width: ' +gridBreakpoint_md+ ') { nav.navbar.navigator.navbar-scrolled.light { background-color: ' +bg_scrolled+ ' !important; } }</style>');
+
+      $('head').append('<style id="dynNav">@media (max-width: ' +gridBreakpoint_sm+ ') { nav.navbar.navigator.navbar-transparent.light { background-color: ' +navBarOptions.background_color_full+ ' !important; border-bottom: solid 0px !important; } }</style>');
+      $('head').append('<style id="dynNav">@media (max-width: ' +gridBreakpoint_sm+ ') { nav.navbar.navigator.navbar-scrolled.light { background-color: ' +bg_scrolled+ ' !important; } }</style>');
+
       {% comment %} navQuicklinks styles
       -------------------------------------------------------------------------- {% endcomment %}
       $('head').append('<style>.attr-nav> ul > li > a { color: ' +navQuicklinksOptions.icon_color+ ' !important; }</style>');
@@ -697,6 +721,33 @@ j1.adapter['navigator'] = (function (j1, window) {
       $('head').append('<style>.top-search { background-color: ' +navTopsearchOptions.background_color+ ' !important; }</style>');
       $('head').append('<style>.top-search input.form-control { color: ' +navTopsearchOptions.input_color+ ' !important; }</style>');
 
+      {% comment %} Timeline styles
+      -------------------------------------------------------------------------- {% endcomment %}
+  	  $('head').append('<style>.timeline > li > .timeline-panel:after {border-right-color: ' +bg_scrolled+ '; border-left-color: ' +bg_scrolled+ ';}</style>');
+      $('head').append('<style>.tmicon {background: ' +bg_scrolled+ ';}</style>');
+
+      {% comment %} Heading styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      $('head').append('<style>.heading:after {background: ' +bg_scrolled+ ' !important;}</style>');
+
+      {% comment %} Tag Cloud styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      $('head').append('<style>.tag-cloud ul li a {background-color: ' +bg_scrolled+ ' !important;}</style>');
+      $('head').append('<style>.tag-cloud ul li a:hover {background-color: #212121 !important;}</style>');
+
+      {% comment %} Toccer styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      $('head').append('<style>.is-active-link::before {background-color: ' +bg_scrolled+ ' !important;}</style>');
+
+      {% comment %} BS extended Modal styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      $('head').append('<style>.modal-dialog.modal-notify.modal-primary .modal-header {background-color: ' +bg_scrolled+ ';}</style>');
+
+      {% comment %} BS nav|pills styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      $('head').append('<style>.nav-pills .nav-link.active, .nav-pills .show > .nav-link {background-color: ' +bg_scrolled+ ' !important;}</style>');
+
+
       return true;
     }, // END setCSS