Finish Banner-Alert

WebCms/Config/ClientDependency.config

@@ -10,7 +10,7 @@ NOTES:
 * Compression/Combination/Minification is not enabled unless debug="false" is specified on the 'compiliation' element in the web.config
 * A new version will invalidate both client and server cache and create new persisted files
 -->
-<clientDependency version="1325334495" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
+<clientDependency version="1325334497" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
 
   <!-- 
     This section is used for Web Forms only, the enableCompositeFiles="true" is optional and by default is set to true.

WebCms/Content/style.css

@@ -68,12 +68,14 @@ i {
 .banner-link {
   white-space: normal;
   padding: 20px;
+  margin-top: 16px;
   background: #000000;
   background: rgba(0, 0, 0, 0.5);
   -moz-border-radius: 10px;
   border-radius: 10px;
   /* standards-compliant: (IE) */ }
   .banner-link .glyphicon, .banner-link .fa {
+    margin-left: 10px;
     color: #8cc641; }
 
 a.banner-link:hover {
@@ -82,6 +84,22 @@ a.banner-link:hover {
   a.banner-link:hover .glyphicon {
     color: #a8ed4f; }
 
+.banner-alert {
+  white-space: normal;
+  padding: 10px 20px;
+  background: #97b374;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  /* standards-compliant: (IE) */ }
+  .banner-alert .fa {
+    margin-left: 10px; }
+  .banner-alert h4 {
+    margin-bottom: 0px; }
+
+a.banner-alert:hover {
+  text-decoration: none;
+  background: #6b7f52; }
+
 h1.headline {
   font-size: 2.9em;
   text-align: center;

WebCms/Content/style.min.css

@@ -1 +1 @@
-html{position:relative;min-height:100%;}body{margin-bottom:60px;}body header{padding:15px 0;}body.debug header{background:repeating-linear-gradient(to right,#990,#090 10px,#333 10px,#333 20px);}body.debug header .navbar-brand{position:relative;}body.debug header .navbar-brand:before{content:"";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#f00;font-size:60px;padding-right:.5em;position:absolute;top:10px;left:0;}h1{padding:24px 0 12px 0;}p{padding:12px 0;}i{cursor:default;}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;}.row-no-padding [class*="col-"]{padding-left:0 !important;padding-right:0 !important;}.home .dark .row:first-child .column:first-child h1{padding-top:0;}.home .blogarchive{padding-top:20px;}.top-buffer{margin-top:20px;}.detail-actions>a,.detail-actions>form>button{margin-top:20px;float:left;clear:left;}.banner-link{white-space:normal;padding:20px;background:#000;background:rgba(0,0,0,.5);-moz-border-radius:10px;border-radius:10px;}.banner-link .glyphicon,.banner-link .fa{color:#8cc641;}a.banner-link:hover{text-decoration:none;background:rgba(0,0,0,.6);}a.banner-link:hover .glyphicon{color:#a8ed4f;}h1.headline{font-size:2.9em;text-align:center;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(0,0,0,.4),5px 5px 10px rgba(0,0,0,.4);}.headline-icon h1:after{color:rgba(172,214,118,.8);font-family:"FontAwesome";font-size:.8em;padding-left:10px;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(0,0,0,.4),5px 5px 10px rgba(0,0,0,.4);}.headline-icon.headline-icon-file h1:after{content:"";}.headline-icon.headline-icon-leaf h1:after{content:"";}.headline-icon.headline-icon-question h1:after{content:"";}.headline-icon.headline-icon-stats h1:after{content:"";}.headline-icon.headline-icon-user h1:after{content:"";}.headline-icon.headline-icon-list h1:after{content:"";}.status{white-space:nowrap;cursor:default;}.status:before{font-family:"FontAwesome";font-size:1em;padding-right:6px;}.status.status-pending{color:#f0ad4e;}.status.status-pending:before{content:"";}.status.status-complete{color:#337ab7;}.status.status-complete:before{content:"";}.status.status-exception{color:#a94442;}.status.status-exception:before{content:"";}.status.status-unresponsive{color:#66512c;}.status.status-unresponsive:before{content:"";}.status.status-running,.status.status-starting,.status.status-finishing{color:#3c763d;}.status.status-running:before{content:"";}.status.status-starting:before{content:"";}.status.status-finishing:before{content:"";}.status.status-cancelpending:before,.status.status-cancelling:before{content:"";}.status.status-cancelled{color:#ec971f;}.status.status-cancelled:before{content:"";}#chart{padding-top:20px;}.btn-file{position:relative;overflow:hidden;}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:100px;text-align:right;filter:alpha(opacity=0);opacity:0;outline:none;background:#fff;cursor:inherit;display:block;}form .validation-summary-errors ul{list-style-type:none;}form .validation-summary-errors ul li{color:#dc3545;}.autocomplete-suggestions{border:1px solid #999;background:#fff;overflow:auto;}.autocomplete-suggestion{padding:2px 5px;white-space:nowrap;overflow:hidden;}.autocomplete-selected{background:#f0f0f0;}.autocomplete-suggestions strong{font-weight:normal;color:#39f;}.autocomplete-group{padding:2px 5px;}.autocomplete-group strong{display:block;border-bottom:1px solid #000;}.toggle{width:15px;}.dropdown-menu li form .btn-link{display:block;color:#333;clear:both;float:left;font-size:1rem;font-weight:normal;line-height:1.42857;min-width:160px;padding:3px 20px;text-align:left;white-space:nowrap;}.dropdown-menu li form .btn-link:focus,.dropdown-menu li form .btn-link:hover{text-decoration:none;color:#262626;background-color:#f5f5f5;}.divider-right{border-right:1px dashed #333;}.read{overflow:hidden;font-size:16px !important;transition:all .3s;margin-bottom:10px;}.read-less{height:90px !important;}code,pre{line-height:1;}.alert{position:absolute;left:30%;top:15em;width:40%;z-index:1;}.copyright{font-size:.8em;color:#777 !important;cursor:default;}.withshadow{text-shadow:2px 2px 4px #000;}.files td{vertical-align:middle;}p.caption{font-style:italic;font-size:smaller;}
+html{position:relative;min-height:100%;}body{margin-bottom:60px;}body header{padding:15px 0;}body.debug header{background:repeating-linear-gradient(to right,#990,#090 10px,#333 10px,#333 20px);}body.debug header .navbar-brand{position:relative;}body.debug header .navbar-brand:before{content:"";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#f00;font-size:60px;padding-right:.5em;position:absolute;top:10px;left:0;}h1{padding:24px 0 12px 0;}p{padding:12px 0;}i{cursor:default;}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;}.row-no-padding [class*="col-"]{padding-left:0 !important;padding-right:0 !important;}.home .dark .row:first-child .column:first-child h1{padding-top:0;}.home .blogarchive{padding-top:20px;}.top-buffer{margin-top:20px;}.detail-actions>a,.detail-actions>form>button{margin-top:20px;float:left;clear:left;}.banner-link{white-space:normal;padding:20px;margin-top:16px;background:#000;background:rgba(0,0,0,.5);-moz-border-radius:10px;border-radius:10px;}.banner-link .glyphicon,.banner-link .fa{margin-left:10px;color:#8cc641;}a.banner-link:hover{text-decoration:none;background:rgba(0,0,0,.6);}a.banner-link:hover .glyphicon{color:#a8ed4f;}.banner-alert{white-space:normal;padding:10px 20px;background:#97b374;-moz-border-radius:10px;border-radius:10px;}.banner-alert .fa{margin-left:10px;}.banner-alert h4{margin-bottom:0;}a.banner-alert:hover{text-decoration:none;background:#6b7f52;}h1.headline{font-size:2.9em;text-align:center;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(0,0,0,.4),5px 5px 10px rgba(0,0,0,.4);}.headline-icon h1:after{color:rgba(172,214,118,.8);font-family:"FontAwesome";font-size:.8em;padding-left:10px;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(0,0,0,.4),5px 5px 10px rgba(0,0,0,.4);}.headline-icon.headline-icon-file h1:after{content:"";}.headline-icon.headline-icon-leaf h1:after{content:"";}.headline-icon.headline-icon-question h1:after{content:"";}.headline-icon.headline-icon-stats h1:after{content:"";}.headline-icon.headline-icon-user h1:after{content:"";}.headline-icon.headline-icon-list h1:after{content:"";}.status{white-space:nowrap;cursor:default;}.status:before{font-family:"FontAwesome";font-size:1em;padding-right:6px;}.status.status-pending{color:#f0ad4e;}.status.status-pending:before{content:"";}.status.status-complete{color:#337ab7;}.status.status-complete:before{content:"";}.status.status-exception{color:#a94442;}.status.status-exception:before{content:"";}.status.status-unresponsive{color:#66512c;}.status.status-unresponsive:before{content:"";}.status.status-running,.status.status-starting,.status.status-finishing{color:#3c763d;}.status.status-running:before{content:"";}.status.status-starting:before{content:"";}.status.status-finishing:before{content:"";}.status.status-cancelpending:before,.status.status-cancelling:before{content:"";}.status.status-cancelled{color:#ec971f;}.status.status-cancelled:before{content:"";}#chart{padding-top:20px;}.btn-file{position:relative;overflow:hidden;}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:100px;text-align:right;filter:alpha(opacity=0);opacity:0;outline:none;background:#fff;cursor:inherit;display:block;}form .validation-summary-errors ul{list-style-type:none;}form .validation-summary-errors ul li{color:#dc3545;}.autocomplete-suggestions{border:1px solid #999;background:#fff;overflow:auto;}.autocomplete-suggestion{padding:2px 5px;white-space:nowrap;overflow:hidden;}.autocomplete-selected{background:#f0f0f0;}.autocomplete-suggestions strong{font-weight:normal;color:#39f;}.autocomplete-group{padding:2px 5px;}.autocomplete-group strong{display:block;border-bottom:1px solid #000;}.toggle{width:15px;}.dropdown-menu li form .btn-link{display:block;color:#333;clear:both;float:left;font-size:1rem;font-weight:normal;line-height:1.42857;min-width:160px;padding:3px 20px;text-align:left;white-space:nowrap;}.dropdown-menu li form .btn-link:focus,.dropdown-menu li form .btn-link:hover{text-decoration:none;color:#262626;background-color:#f5f5f5;}.divider-right{border-right:1px dashed #333;}.read{overflow:hidden;font-size:16px !important;transition:all .3s;margin-bottom:10px;}.read-less{height:90px !important;}code,pre{line-height:1;}.alert{position:absolute;left:30%;top:15em;width:40%;z-index:1;}.copyright{font-size:.8em;color:#777 !important;cursor:default;}.withshadow{text-shadow:2px 2px 4px #000;}.files td{vertical-align:middle;}p.caption{font-style:italic;font-size:smaller;}

WebCms/Content/style.scss

@@ -92,12 +92,14 @@ i {
 .banner-link {
     white-space: normal;
     padding: 20px;
+    margin-top: 16px;
     background: #000000;
     background: rgba(0, 0, 0, .5);
     -moz-border-radius: 10px;
     border-radius: 10px; /* standards-compliant: (IE) */
 
     .glyphicon, .fa {
+        margin-left: 10px;
         color: #8cc641;
     }
 }
@@ -111,6 +113,27 @@ a.banner-link:hover {
     }
 }
 
+.banner-alert {
+    white-space: normal;
+    padding: 10px 20px;
+    background: #97b374;
+    -moz-border-radius: 10px;
+    border-radius: 10px; /* standards-compliant: (IE) */
+
+    .fa {
+        margin-left: 10px;
+    }
+
+    h4 {
+        margin-bottom: 0px;
+    }
+}
+
+a.banner-alert:hover {
+    text-decoration: none;
+    background: #6b7f52;
+}
+
 $text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.4), 5px 5px 10px rgba(0, 0, 0, 0.4);
 
 h1.headline {

WebCms/Views/MacroPartials/BannerAlert.cshtml

@@ -1,10 +1,19 @@
 @inherits Umbraco.Web.Macros.PartialViewMacroPage
 	@{
 		var link = Model.MacroParameters["Link"];
-		var linkText = Model.MacroParameters["LinkText"];
+		var title = Model.MacroParameters["Title"];
+	    var description = Model.MacroParameters["Description"];
 	    var faicon = Model.MacroParameters["FaIcon"];
 	    var url = new UmbracoHelper(UmbracoContext.Current).TypedContent(link).Url;
 	}
-<div class="alert alert-warning text-center" style="margin-top: 20px" role="alert">
+
-    <a href="@url" class="alert-link">@linkText</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="fa @faicon alert-link"></span>
+<div class="container" style="margin-top: 0px; margin-bottom: 0px;">
+	<div class="row justify-content-md-center">
+        <div class="col-md-auto" style="margin-bottom: 0px;">
+            <a class="banner-alert text--center" href="@url">
+                <h4>@title <span class="fa @faicon"></span></h4>
+                <p>@description</p>
+            </a>
+		</div>
+    </div>
 </div>