ozoneplatform · chazzlabs · Nov 17, 2016 · Nov 18, 2016 · Dec 7, 2016
diff --git a/README.md b/README.md
@@ -9,13 +9,13 @@ The core of these utilities is the jQuery plugin, contained in `jquery.classific
 
 ```javascript
 $(function(){
-    $(document).classification({ 
-        level: "U" 
+    $(document).classification({
+        level: "U"
     });
 });
 ```
 
-### Settings 
+### Settings
 The plugin settings and defaults are:
 ```javascript
 var defaults = settings = {
@@ -26,7 +26,9 @@ var defaults = settings = {
     // If dynamic above is true, do we want two bars to represent the classification
     dynamicBanner: false,
     // What color should "Top Secret" be? Default is yellow, orange if this is true
-    tsOrange: false
+    tsOrange: false,
+    // Banner backgrounds are not colored by default; set to true to color by classification level
+    colorBanners: false
 };
 ```
 
@@ -43,6 +45,12 @@ You are then able to attach a classification to the body tag:
 <body ozp-classification="U-FOUO">...</body>
 ```
 
+Set the `ozp-color-banners` attribute to true to enable colored banner backgrounds:
+
+```html
+<body ozp-classification="U-FOUO" ozp-color-banners="true">...</body>
+```
+
 ## Bower
 You can use the plugin or directive with Bower. Install with `bower install ozoneplatform/ozp-classification`.
 

diff --git a/classification.css b/classification.css
@@ -10,29 +10,28 @@
     color: #f9f9f9;
     background-color: #4f5457;
 }
-/*
-.U-FOUO {
+
+.U-FOUO.classBanner {
     background-color: #009900;
 }
 
-.Conf {
+.Conf.classBanner {
     background-color: #0000FF;
 }
 
-.Secret {
+.Secret.classBanner {
     background-color: #FF0000;
 }
 
-.TopSecret-Orange {
+.TopSecret-Orange.classBanner {
     background-color: #FF6600;
 }
 
-.TopSecret-Yellow {
+.TopSecret-Yellow.classBanner {
     background-color: #FFFF00;
     color: black;
 }
 
-.Dynamic {
+.Dynamic.classBanner {
     background-color: #000000;
 }
-*/
diff --git a/jquery.classification.js b/jquery.classification.js
@@ -3,10 +3,10 @@
 
 /**
  * jQuery.classification.js
- * 
+ *
  * This is a jQuery plugin that creates classification banners on an HTML document.
  *
- * This plugin is used by a call to the jQuery function and can be chained. It takes string 
+ * This plugin is used by a call to the jQuery function and can be chained. It takes string
  * parameters that are methods, or it can take a configuration object with your desired settings.
  * The plugin works by injecting divs onto the body element.
  * Ex: $(document).classification({ dynamic: true, level: 'S-2P' })
@@ -129,13 +129,13 @@
     /**
      * @cfg $.fn.classification.defaults {Object}
      * Classification plugin default settings.
-     * 
+     *
      * @cfg $.fn.classification.defaults.dynamic {Boolean} [dynamic = false]
      * True if you want to display "Dynamic page" in the banner.
-     * 
+     *
      * @cfg $.fn.classification.level {String} [level = 'U-FOUO']
      * A string representing the classification level, any compartments, and dissemination.
-     * 
+     *
      * @cfg $.fn.classification.defaults.dynamicBanner {Boolean} [dynamicBanner = false]
      * True if a separate banner is needed for dynamic content.
      *
@@ -146,7 +146,8 @@
         dynamic: false,
         level: 'U-FOUO',
         dynamicBanner: false,
-        tsOrange: false
+        tsOrange: false,
+        colorBanners: false
     };
 
     /**
@@ -162,8 +163,9 @@
         var txt = settings.level;
         var level = txt.charAt(0);
         var bannerText = text[txt];
+        var bannerClass = 'classBanner';
 
-        // If no dynamic banner is desired and dynamic text is desired ... 
+        // If no dynamic banner is desired and dynamic text is desired ...
         if (!settings.dynamicBanner && settings.dynamic) {
             // then we concat the dynamic text to the level text - to make one banner.
             bannerText = dText + ' ' + text[txt];
@@ -175,23 +177,31 @@
             if (settings.tsOrange) {
                 tsColor = 'Orange'
             }
-            head = $(divText).addClass('classBanner TopSecret-' + tsColor).html(bannerText);
-            foot = $(divText).addClass('classBanner TopSecret-' + tsColor).html(bannerText);
+
+            if (settings.colorBanners) {
+                bannerClass += ' TopSecret-' + tsColor;
+            }
             break;
         case 'S':
-            head = $(divText).addClass('classBanner Secret').html(bannerText);
-            foot = $(divText).addClass('classBanner Secret').html(bannerText);
+            if (settings.colorBanners) {
+                bannerClass += ' Secret';
+            }
             break;
         case 'C':
-            head = $(divText).addClass('classBanner Conf').html(bannerText);
-            foot = $(divText).addClass('classBanner Conf').html(bannerText);
+            if (settings.colorBanners) {
+                bannerClass += ' Conf';
+            }
             break;
         case 'U':
-            head = $(divText).addClass('classBanner U-FOUO').html(bannerText);
-            foot = $(divText).addClass('classBanner U-FOUO').html(bannerText);
+            if (settings.colorBanners) {
+                bannerClass += ' U-FOUO';
+            }
             break;
         }
 
+        head = $(divText).addClass(bannerClass).html(bannerText);
+        foot = $(divText).addClass(bannerClass).html(bannerText);
+
         // Add header
         var $body = $('body');
         $body.prepend(head);
@@ -216,4 +226,4 @@
 
     };
 
-})(jQuery);     // Pass jQuery ad the parameter to use the $ shortcut without conflict
+})(jQuery);     // Pass jQuery ad the parameter to use the $ shortcut without conflict
diff --git a/ozp-classification.js b/ozp-classification.js
@@ -6,7 +6,15 @@ angular.module('ozpClassification', [])
         return {
             restrict: 'A',
             link: function(scope, element, attrs) {
-                element.classification({ level: attrs.ozpClassification });
+                var options = {
+                    level: attrs.ozpClassification
+                };
+
+                if (!angular.isUndefined(attrs.ozpColorBanners)) {
+                    options.colorBanners = attrs.ozpColorBanners;
+                }
+
+                element.classification(options);
             }
         };
-    });
+    });