From a69c90c44d69853d47b9e59591ae4b010a302326 Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Sat, 22 Jul 2017 20:07:01 +0530
Subject: [PATCH 1/9] feat(css): Accept custom css styles on control level

---
 src/image-upload/image-upload.component.css  |  4 +-
 src/image-upload/image-upload.component.html |  9 ++--
 src/image-upload/image-upload.component.ts   | 20 ++++----
 src/image-upload/style.ts                    | 53 ++++++++++++++++++++
 4 files changed, 70 insertions(+), 16 deletions(-)
 create mode 100644 src/image-upload/style.ts

diff --git a/src/image-upload/image-upload.component.css b/src/image-upload/image-upload.component.css
index 2f93085..30acc96 100644
--- a/src/image-upload/image-upload.component.css
+++ b/src/image-upload/image-upload.component.css
@@ -1,6 +1,7 @@
 .img-ul {
     --active-color: #3C9;
     --common-radius: 3px;
+    background-color: #f8f8f8;
     border-radius: var(--common-radius);
     border: #d0d0d0 dashed 1px;
     font-family: sans-serif;
@@ -17,8 +18,7 @@
     display: table;
 }
 
-.img-ul-file-upload {
-    background-color: #f8f8f8;
+.img-ul-file-upload {    
     padding: 16px;
 }
 
diff --git a/src/image-upload/image-upload.component.html b/src/image-upload/image-upload.component.html
index 2dc454a..16b70b7 100644
--- a/src/image-upload/image-upload.component.html
+++ b/src/image-upload/image-upload.component.html
@@ -4,9 +4,10 @@
      (fileOver)="onFileOver($event)"
      (fileDrop)="onFileChange($event)"
      [ngClass]="{'img-ul-file-is-over': fileOver}"
+     [ngStyle]="style?.layout"
 >
-  <div class="img-ul-file-upload img-ul-hr-inline-group">
-    <label class="img-ul-upload img-ul-button">
+  <div class="img-ul-file-upload img-ul-hr-inline-group">    
+    <label class="img-ul-upload img-ul-button" [ngStyle]="style?.selectButton">
       <span [innerText]="buttonCaption"></span>
       <input
         type="file"
@@ -14,7 +15,7 @@
         multiple (change)="onFileChange(input.files)"
         #input>
     </label>
-    <label *ngIf="fileCounter > 0" class="img-ul-clear img-ul-button" (click)="deleteAll()">
+    <label *ngIf="fileCounter > 0" class="img-ul-clear img-ul-button" (click)="deleteAll()" [ngStyle]="style?.clearButton">
       <span [innerText]="clearButtonCaption"></span>
     </label>
     <div class="img-ul-drag-box-msg" [innerText]="dropBoxMessage"></div>
@@ -22,7 +23,7 @@
 
   <p class="img-ul-file-too-large" *ngIf="showFileTooLargeMessage" [innerText]="fileTooLargeMessage"></p>
 
-  <div *ngIf="preview" class="img-ul-container img-ul-hr-inline-group">
+  <div *ngIf="preview" class="img-ul-container img-ul-hr-inline-group" [ngStyle]="style?.previewPanel">
     <div
       class="img-ul-image"
       *ngFor="let file of files"
diff --git a/src/image-upload/image-upload.component.ts b/src/image-upload/image-upload.component.ts
index 0276001..8468dfc 100644
--- a/src/image-upload/image-upload.component.ts
+++ b/src/image-upload/image-upload.component.ts
@@ -1,15 +1,15 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { Headers } from '@angular/http';
-import { UploadMetadata } from './before-upload.interface';
 
 import { ImageService } from './image.service';
+import { Style } from "./style";
+import { UploadMetadata } from './before-upload.interface';
 
 export class FileHolder {
   public pending: boolean = false;
   public serverResponse: { status: number, response: any };
 
-  constructor(public src: string, public file: File) {
-  }
+  constructor(public src: string, public file: File) { }
 }
 
 @Component({
@@ -34,6 +34,7 @@ export class ImageUploadComponent implements OnInit {
   @Input() maxFileSize: number;
   @Input() preview: boolean = true;
   @Input() partName: string;
+  @Input() style: Style;
   @Input('extensions') supportedExtensions: string[];
   @Input() url: string;
   @Input() withCredentials: boolean = false;
@@ -45,8 +46,7 @@ export class ImageUploadComponent implements OnInit {
   private inputElement: ElementRef;
   private pendingFilesCounter: number = 0;
 
-  constructor(private imageService: ImageService) {
-  }
+  constructor(private imageService: ImageService) { }
 
   ngOnInit() {
     if (!this.fileTooLargeMessage) {
@@ -138,11 +138,11 @@ export class ImageUploadComponent implements OnInit {
       this.imageService
         .postImage(this.url, fileHolder.file, this.headers, this.partName, this.withCredentials)
         .subscribe(
-          response => this.onResponse(response, fileHolder),
-          error => {
-            this.onResponse(error, fileHolder);
-            this.deleteFile(fileHolder);
-          });
+        response => this.onResponse(response, fileHolder),
+        error => {
+          this.onResponse(error, fileHolder);
+          this.deleteFile(fileHolder);
+        });
     } else {
       this.uploadFinished.emit(fileHolder);
     }
diff --git a/src/image-upload/style.ts b/src/image-upload/style.ts
new file mode 100644
index 0000000..7401bfe
--- /dev/null
+++ b/src/image-upload/style.ts
@@ -0,0 +1,53 @@
+/**
+ * @internal
+ */
+export type StyleProps = { [key: string]: string }
+/**
+ * @whatItDoes Represents custom style for various elements and controls.
+ */
+export interface Style {
+    /**
+    * Sets custom style for select button.
+    *
+    * ```
+    * selectButton: {
+    *   "background-color": "#800080",    
+    *    "color": "#FFF"
+    * }
+    * ```
+    */
+    selectButton?: StyleProps;
+    /**
+    * Sets custom style for clear button.
+    *
+    * ```    
+    * clearButton: {
+    *    "background-color": "#FFFF00",
+    *    "color": "#FFF"
+    * }
+    * ```
+    */
+    clearButton?: StyleProps;
+    /**
+    * Sets custom style for entire layout.
+    *
+    * ```    
+    * layout: {
+    *    "border": " #d0d0d0 dashed 1px",
+    *    "margin": "5px"
+    * }
+    * ```
+    */
+    layout?: StyleProps;
+    /**
+    * Sets custom style for entire layout.
+    *
+    * ```    
+    * previewPanel: {    
+    *    "background-color": "#FFFF00",
+    *    "padding": "5px"
+    * }
+    * ```
+    */
+    previewPanel?: StyleProps;
+}
\ No newline at end of file

From 7e4506504ccda0667c4224361f650765d33bba5c Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Sat, 22 Jul 2017 20:14:57 +0530
Subject: [PATCH 2/9] fix(css) : Pushed style to parent selector from child.

---
 src/image-upload/image-upload.component.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/image-upload/image-upload.component.css b/src/image-upload/image-upload.component.css
index 30acc96..04c9468 100644
--- a/src/image-upload/image-upload.component.css
+++ b/src/image-upload/image-upload.component.css
@@ -6,6 +6,7 @@
     border: #d0d0d0 dashed 1px;
     font-family: sans-serif;
     position: relative;
+    color: #9b9b9b;
 }
 
 .img-ul-file-is-over {
@@ -22,8 +23,7 @@
     padding: 16px;
 }
 
-.img-ul-drag-box-msg {
-    color: #9b9b9b;
+.img-ul-drag-box-msg {    
     display: inline-block;
     font-weight: 600;
     margin-left: 12px;

From 9d1b5f486159b58ab765d07c12c7ffb24e2e02f8 Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Sat, 22 Jul 2017 20:47:30 +0530
Subject: [PATCH 3/9] feat(css): Added ability to set css class on highest
 level component

---
 src/image-upload/image-upload.component.html | 5 +++--
 src/image-upload/image-upload.component.ts   | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/image-upload/image-upload.component.html b/src/image-upload/image-upload.component.html
index 16b70b7..02faf06 100644
--- a/src/image-upload/image-upload.component.html
+++ b/src/image-upload/image-upload.component.html
@@ -1,9 +1,10 @@
-<div class="img-ul"
+<div
      fileDrop
      [accept]="supportedExtensions"
      (fileOver)="onFileOver($event)"
      (fileDrop)="onFileChange($event)"
-     [ngClass]="{'img-ul-file-is-over': fileOver}"
+     [ngClass]="klass"
+     [ngClass]="{'img-ul-file-is-over': fileOver}"     
      [ngStyle]="style?.layout"
 >
   <div class="img-ul-file-upload img-ul-hr-inline-group">    
diff --git a/src/image-upload/image-upload.component.ts b/src/image-upload/image-upload.component.ts
index 8468dfc..055f6e7 100644
--- a/src/image-upload/image-upload.component.ts
+++ b/src/image-upload/image-upload.component.ts
@@ -26,6 +26,7 @@ export class ImageUploadComponent implements OnInit {
 
   @Input() beforeUpload: (UploadMetadata) => UploadMetadata | Promise<UploadMetadata> = data => data;
   @Input() buttonCaption: string = 'Select Images';
+  @Input('class') klass: string = 'img-ul';
   @Input() clearButtonCaption: string = 'Clear';
   @Input() dropBoxMessage: string = 'Drop your images here!';
   @Input() fileTooLargeMessage: string;

From 7965a869a9453a5b8364b163e4a3860f11129ccf Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Mon, 24 Jul 2017 20:29:25 +0530
Subject: [PATCH 4/9] fix(css): Close mark alignment

---
 src/image-upload/image-upload.component.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/image-upload/image-upload.component.css b/src/image-upload/image-upload.component.css
index 04c9468..0f4dfe3 100644
--- a/src/image-upload/image-upload.component.css
+++ b/src/image-upload/image-upload.component.css
@@ -109,9 +109,9 @@ label.img-ul-button input[type=file] {
     background-color: #FFF;
     border-radius: 2px;
     content: '';
-    height: 16px;
+    height: 15px;
     position: absolute;
-    top: 2px;
+    top: 0;
     width: 2px;
 }
 

From bb1a960f42576dce9d0eda43afb6b322973128dd Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Tue, 25 Jul 2017 19:59:24 +0530
Subject: [PATCH 5/9] chore(css): Updated readme file

---
 README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/README.md b/README.md
index fef60ab..d65ec70 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,58 @@ you can use `[headers]` directive like this.
 
 `[clearButtonCaption]="'Clear'"` - Text shown on the "Clear" button. Default is "**Clear**".
 
+#### CSS Class
+
+`[class]="'customClass'"` - Set custom class for this component. It is set on parent level element `<image-upload>` which can be customized as follow :
+
+    .custom-class{    
+        background-color: #dd3;
+        border-radius: 5px;
+        margin:5px;
+        width: 500px;        
+    }
+    .custom-class .img-ul-upload{
+        background-color: #000 !important;
+    }
+    .custom-class .img-ul-clear{
+        background-color: #B819BB !important;
+    }
+    .custom-class .img-ul-drag-box-msg {
+        color: purple !important;
+    }
+    .custom-class .img-ul-container{
+        background-color: #FF6CAD !important;
+    }
+    
+**Note:** 
+- `.img-ul-*` is class overridden with new styles. 
+- Also set `encapsulation: ViewEncapsulation.Native/None` in your component.
+
+#### Custom Style
+
+
+`[style]="'customStyle'"` - Set custom style properties for this component. `customStyle` is typescript object defined in your component.
+
+    customStyle = {
+      selectButton: {
+        "color": "white",
+        "background-color": "purple",
+      },
+      clearButton: {
+        "color": "white",
+        "background-color": "yellow",
+      },
+      layout: {
+        "background-color": "black",
+        "color": "red",
+        "font-size": "15px",
+      },
+      previewPanel: {
+        "background-color": "red",
+      }
+
+**Note:** `selectButton`, `clearButton`, `layout` and `previewPanel` are optional properties.
+
 #### Events
 
 `(uploadFinished)="onUploadFinished($event)"`. If `[url]` is specified this event is fired when component gets a response from the server, also in this case event has field `serverResponse` which contains the status code and response from the server `{status, response}`. If `[url]` is not specified it's fired immediately after an image(s) dropped into file-drop zone of choosed in file browser. So what you can do, is not specify `[url]` to handle upload yourself, for exapmple send the image into firebase storage. To get file use `event.file`.
@@ -83,6 +135,7 @@ In the final state it should look something like this:
       [buttonCaption]="'Select Images!'"
       [dropBoxMessage]="'Drop your images here!'"
       [extensions]="['jpg','png','gif']"
+      [class]="'customClass'"      
       (removed)="onRemoved($event)"
       (uploadFinished)="onUploadFinished($event)"
       (uploadStateChanged)="onUploadStateChanged($event)">

From 02a3c3f567853f6c03edc15d84d68ada93336b34 Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Sat, 29 Jul 2017 11:59:02 +0530
Subject: [PATCH 6/9] fix(css): Updated `klass` to `cssClass`

---
 src/image-upload/image-upload.component.html | 2 +-
 src/image-upload/image-upload.component.ts   | 2 +-
 src/image-upload/style.ts                    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/image-upload/image-upload.component.html b/src/image-upload/image-upload.component.html
index 02faf06..c8e07aa 100644
--- a/src/image-upload/image-upload.component.html
+++ b/src/image-upload/image-upload.component.html
@@ -3,7 +3,7 @@
      [accept]="supportedExtensions"
      (fileOver)="onFileOver($event)"
      (fileDrop)="onFileChange($event)"
-     [ngClass]="klass"
+     [ngClass]="cssClass"
      [ngClass]="{'img-ul-file-is-over': fileOver}"     
      [ngStyle]="style?.layout"
 >
diff --git a/src/image-upload/image-upload.component.ts b/src/image-upload/image-upload.component.ts
index 055f6e7..db6ae84 100644
--- a/src/image-upload/image-upload.component.ts
+++ b/src/image-upload/image-upload.component.ts
@@ -26,7 +26,7 @@ export class ImageUploadComponent implements OnInit {
 
   @Input() beforeUpload: (UploadMetadata) => UploadMetadata | Promise<UploadMetadata> = data => data;
   @Input() buttonCaption: string = 'Select Images';
-  @Input('class') klass: string = 'img-ul';
+  @Input('class') cssClass: string = 'img-ul';
   @Input() clearButtonCaption: string = 'Clear';
   @Input() dropBoxMessage: string = 'Drop your images here!';
   @Input() fileTooLargeMessage: string;
diff --git a/src/image-upload/style.ts b/src/image-upload/style.ts
index 7401bfe..2646639 100644
--- a/src/image-upload/style.ts
+++ b/src/image-upload/style.ts
@@ -33,7 +33,7 @@ export interface Style {
     *
     * ```    
     * layout: {
-    *    "border": " #d0d0d0 dashed 1px",
+    *    "border": "#d0d0d0 dashed 1px",
     *    "margin": "5px"
     * }
     * ```

From cdf8b3b0cf2f293daccf190cf2571a732820b726 Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Sat, 29 Jul 2017 13:52:30 +0530
Subject: [PATCH 7/9] feat(demo): Added  style component for custom css class
 and style

---
 demo/src/app/app.component.html         |  1 +
 demo/src/app/app.module.ts              |  4 +-
 demo/src/app/style/style.component.css  | 18 ++++++++
 demo/src/app/style/style.component.html | 61 +++++++++++++++++++++++++
 demo/src/app/style/style.component.ts   | 40 ++++++++++++++++
 5 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 demo/src/app/style/style.component.css
 create mode 100644 demo/src/app/style/style.component.html
 create mode 100644 demo/src/app/style/style.component.ts

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index 108b065..868a091 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -26,4 +26,5 @@ <h1 class="display-3">
   <div class="mt-3"></div>
   <events></events>
   <div class="mt-5"></div>
+  <styles></styles>
 </div>
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
index 03d1000..fb182b6 100644
--- a/demo/src/app/app.module.ts
+++ b/demo/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { BasicExampleComponent } from './basic/basic.component';
 import { FilterExampleComponent } from './filter/filter.component';
 import { CustomiseComponent } from './customise/customise.component';
 import { EventsComponent } from './events/events.component';
+import { StyleComponent } from './style/style.component';
 
 @NgModule({
   declarations: [
@@ -14,7 +15,8 @@ import { EventsComponent } from './events/events.component';
     BasicExampleComponent,
     FilterExampleComponent,
     CustomiseComponent,
-    EventsComponent
+    EventsComponent,
+    StyleComponent
   ],
   imports: [
     BrowserModule,
diff --git a/demo/src/app/style/style.component.css b/demo/src/app/style/style.component.css
new file mode 100644
index 0000000..d084f60
--- /dev/null
+++ b/demo/src/app/style/style.component.css
@@ -0,0 +1,18 @@
+.customClass{    
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;        
+}
+.customClass .img-ul-upload{
+    background-color: #000 !important;
+}
+.customClass .img-ul-clear{
+    background-color: #B819BB !important;
+}
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+.customClass .img-ul-container{
+    background-color: #FF6CAD !important;
+}
\ No newline at end of file
diff --git a/demo/src/app/style/style.component.html b/demo/src/app/style/style.component.html
new file mode 100644
index 0000000..5aab0c3
--- /dev/null
+++ b/demo/src/app/style/style.component.html
@@ -0,0 +1,61 @@
+<h4 class="mb-3 mt-5">Styles</h4>
+
+<h5 class="mb-3 mt-3">Custom CSS Class</h5>
+
+<image-upload url="https://httpbin.org/status/200" class="customClass"></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" class="customClass"></image-upload>]]></code></pre>
+
+<pre><code class="language-css"><![CDATA[.customClass{    
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;        
+}
+.customClass .img-ul-upload{
+    background-color: #000 !important;
+}
+.customClass .img-ul-clear{
+    background-color: #B819BB !important;
+}
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+.customClass .img-ul-container{
+    background-color: #FF6CAD !important;
+}
+]]></code></pre>
+
+<h5 class="mb-3 mt-3">Custom Style</h5>
+
+<image-upload url="https://httpbin.org/status/200" [style]="customStyle"></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [style]="customStyle"></image-upload>]]></code></pre>
+
+<pre><code class="language-typescript"><![CDATA[customStyle = {
+    selectButton: {
+      "background-color": "yellow",
+      "border-radius": "25px",
+      "color": "#000"
+    },
+    clearButton: {      
+      "background-color": "#FFF",
+      "border-radius": "25px",
+      "color": "#000",
+      "margin-left": "10px"
+    },
+    layout: {
+      "background-color": "purple",
+      "border-radius": "25px",
+      "color": "#FFF",
+      "font-size": "15px",
+      "margin": "10px",
+      "padding-top": "5px",
+      "width": "500px"
+    },
+    previewPanel: {      
+      "background-color": "#894489",
+      "border-radius": "0 0 25px 25px",
+    }
+  }
+]]></code></pre>
\ No newline at end of file
diff --git a/demo/src/app/style/style.component.ts b/demo/src/app/style/style.component.ts
new file mode 100644
index 0000000..9bf22bd
--- /dev/null
+++ b/demo/src/app/style/style.component.ts
@@ -0,0 +1,40 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'styles',
+  templateUrl: './style.component.html',
+  styleUrls: ['./style.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class StyleComponent {
+
+  constructor() { }
+
+  customStyle = {
+    selectButton: {
+      "background-color": "yellow",
+      "border-radius": "25px",
+      "color": "#000"
+    },
+    clearButton: {
+      "background-color": "#FFF",
+      "border-radius": "25px",
+      "color": "#000",
+      "margin-left": "10px"
+    },
+    layout: {
+      "background-color": "purple",
+      "border-radius": "25px",
+      "border": "none",
+      "color": "#FFF",
+      "font-size": "15px",
+      "margin": "10px",
+      "padding-top": "5px",
+      "width": "500px"
+    },
+    previewPanel: {
+      "background-color": "#894489",
+      "border-radius": "0 0 25px 25px",
+    }
+  }
+}

From 498d3bfe191b760591c03949a13366bfbb3d1e4d Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Thu, 3 Aug 2017 23:24:40 +0530
Subject: [PATCH 8/9] chore(docs): Updated readme for custom  css class

---
 README.md | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index d65ec70..99e123b 100644
--- a/README.md
+++ b/README.md
@@ -70,28 +70,27 @@ you can use `[headers]` directive like this.
 
 `[class]="'customClass'"` - Set custom class for this component. It is set on parent level element `<image-upload>` which can be customized as follow :
 
-    .custom-class{    
+    :host >>> .custom-class{    
         background-color: #dd3;
         border-radius: 5px;
         margin:5px;
         width: 500px;        
     }
-    .custom-class .img-ul-upload{
-        background-color: #000 !important;
+    :host >>> .custom-class .img-ul-upload{
+        background-color: #000;
     }
-    .custom-class .img-ul-clear{
-        background-color: #B819BB !important;
+    :host >>> .custom-class .img-ul-clear{
+        background-color: #B819BB;
     }
-    .custom-class .img-ul-drag-box-msg {
-        color: purple !important;
+    :host >>> .custom-class .img-ul-drag-box-msg {
+        color: purple;
     }
-    .custom-class .img-ul-container{
-        background-color: #FF6CAD !important;
+    :host >>> .custom-class .img-ul-container{
+        background-color: #FF6CAD;
     }
     
 **Note:** 
 - `.img-ul-*` is class overridden with new styles. 
-- Also set `encapsulation: ViewEncapsulation.Native/None` in your component.
 
 #### Custom Style
 

From 61c91c2d61b27e7856c2488fa720844e1916d5bb Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Thu, 3 Aug 2017 23:32:31 +0530
Subject: [PATCH 9/9] chore(docs): Updated read me

---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 99e123b..e945587 100644
--- a/README.md
+++ b/README.md
@@ -89,8 +89,7 @@ you can use `[headers]` directive like this.
         background-color: #FF6CAD;
     }
     
-**Note:** 
-- `.img-ul-*` is class overridden with new styles. 
+**Note:**  `.img-ul-*` classes which are overridden with new styles. 
 
 #### Custom Style