diff --git a/README.md b/README.md
index 3832d7e..d17651a 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,10 @@ To create **a page separate from the homepage**, run
 hugo new my-new-page.md
 ```
 
+### Adding your branding / colors / css
+
+Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag *or* you may add a `<link>`-tag referencing your own `override.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/janraasch/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file to get started and to find more detailed instructions.
+
 ## Issues / Feedback / Contributing
 Please use [GitHub issues](https://github.com/janraasch/hugo-scroll/issues) and [Pull Requests](https://github.com/janraasch/hugo-scroll/pulls).
 
diff --git a/exampleSite/layouts/partials/custom_head.html b/exampleSite/layouts/partials/custom_head.html
index 0f92585..53db59d 100644
--- a/exampleSite/layouts/partials/custom_head.html
+++ b/exampleSite/layouts/partials/custom_head.html
@@ -1,4 +1,66 @@
-<!-- Generated via https://favicon.io/favicon-generator/ -->
+<!-- A partial to be overwritten by the user.
+     Its content will appear before the closing </head>-tag -->
+
+<!-- Custom CSS via inline styles
+     You may use this template to add custom CSS to your site like so: -->
+
+<!-- <style>
+     /* Links */
+     a:hover {
+         color: #b6b84c;
+     }
+
+     /* Header Buttons on Startpage */
+     a.btn {
+         color: white;
+          background-color: #ced067;
+     }
+     a.btn:hover {
+          background-color: #b6b84c;
+     }
+
+     /* Scroll Menu on Startpage */
+     a.fn-item.active {
+          color: #b6b84c;
+     }
+     a.fn-item:hover {
+          color: #ced067;
+     }
+
+     /* Content / Sections */
+     .post-holder.odd {
+          background: #B80135;
+          color: white;
+     }
+     .post-holder {
+          background: #f2efe8;
+     }
+     body {
+          color: #3A4145;
+     }
+
+     /* Footer */
+     .site-footer {
+          color: #BBC7CC;
+          background-color: #22343A;
+     }
+</style> -->
+
+<!-- Custom CSS via "custom.css"-file
+     If you would rather place your custom CSS into
+     a separate file, create a "custom.css" in your
+     local "static/css"-directory. Then add a <link>-tag
+     referencing your "custom.css" like so: -->
+
+<!-- <link rel="stylesheet" href='{{ "css/custom.css" | absURL }}'> -->
+
+<!-- Custom CSS: Color Codes
+     You may checkout https://htmlcolorcodes.com/ to get those
+     weird color codes (like "#22343A") ;-). -->
+
+<!-- Custom link-tags for different icons
+     Generated via https://favicon.io/favicon-generator/ -->
+
 <link rel="apple-touch-icon" sizes="180x180" href='{{ "images/apple-touch-icon.png" | absURL }}'>
 <link rel="icon" type="image/png" sizes="32x32" href='{{ "images/favicon-32x32.png" | absURL }}'>
 <link rel="icon" type="image/png" sizes="16x16" href='{{ "images/favicon-16x16.png" | absURL }}'>