From 00b3727a258ea2e6b72700426b58207e9e2835c4 Mon Sep 17 00:00:00 2001
From: Robert Wallach <rowa97@gmail.com>
Date: Fri, 6 Apr 2018 11:25:00 -0500
Subject: [PATCH] Update custom-css.md (#174)

* Update custom-css.md

* add hubBlock

* Update custom-css.md
---
 articles/hubs/custom-css.md | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/articles/hubs/custom-css.md b/articles/hubs/custom-css.md
index eb58b1b..e2581d4 100644
--- a/articles/hubs/custom-css.md
+++ b/articles/hubs/custom-css.md
@@ -1,11 +1,17 @@
 # Custom CSS
 
+![Applying Custom CSS](https://github.com/stoplightio/docs/blob/develop/assets/gifs/hubs-custom-css.gif?raw=true)
+
+## What 
+
+Want to add some style and flair to your documentation? Add your own custom CSS to enhance your Hub’s look and feel. Below are some of the classes you can modify: 
+
 ```
 .Hub
   .HubHeader
     .HubHeader-section
       .HubHeaderItem.is-active
-        .HubHeaderItem-name 
+        .HubHeaderItem-name
   .HubMain
     .HubSidebar-overlay
     .HubSidebar-wrapper
@@ -17,7 +23,24 @@
         .HubPage-inner
           .HubPage-content
             .HubPageCrumbs
-              .HubPageCrumb
-            .HubPageBody
+              .HubPageCrumb 
+            .HubPageBody 
+              .HubBlock
             .HubPageFooter
 ```
+
+## How
+
+1. Select the Hub you wish to modify 
+2. Select the **Design View**
+3. Click on **Theme** in the top toolbar 
+4. Select **Custom CSS** in the bottom left 
+5. Input CSS in the text area at the bottom of the page 
+6. Input CSS in the generated **theme** file (optional)
+7. In publishing, check the **Custom CSS** box under **Advanced** to apply the Custom CSS to that Hub when published
+
+>After accessing Custom CSS, a **theme** file will be generated under Documentation in the file explorer. After making changes to your CSS, make sure to save the **theme** file. 
+
+---
+**Related Articles**
+- [Theming](/documentation/design/theming)