From 49b834036e8812eb7940a01fb47b63697eb6e1af Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 9 Aug 2018 16:12:02 -0700
Subject: [PATCH] added customization guide

---
 README.md    |  4 +++
 customize.md | 84 +++++++++++++++-------------------------------------
 2 files changed, 28 insertions(+), 60 deletions(-)

diff --git a/README.md b/README.md
index f09e2f69..d418698a 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,10 @@ $ npm run start
 
 #### view in browser
  *  visit [http://localhost:3000](http://localhost:3000) in your browser
+ 
+#### customize your app
+
+check out the [customization guide](https://github.com/lbryio/spee.ch/blob/readme-update/customize.md) to change your app's appearance and components
 
 #### (optional) add custom components and update the styles
 
diff --git a/customize.md b/customize.md
index 090772d3..7698372a 100644
--- a/customize.md
+++ b/customize.md
@@ -1,73 +1,37 @@
 # Configure your own spee.ch
 
-## * Change some **css**
+_note:this guide assumes you have done the []quickstart](https://github.com/lbryio/spee.ch/blob/readme-update/README.md) or [fullstart](https://github.com/lbryio/spee.ch/blob/readme-update/fullstart.md) guide and have a working spee.ch server_
 
-	* Navigate to *public/assets/css* folder and open **general.css** for editing.
-`$ cd public/assets/css`
-`$ nano general.css`
+## Custom Components
+The components used by spee.ch are taken from the `client/` folder, but you can override those components by defining your own in the `client_custom/` folder. 
+ 
+### Add a new custom Logo component.
 
-	* Add `background-color: yellow;` to the `html, body` declaration.
-```css
-html, body {
-margin: 0;
-padding: 0;
-height: 100%;
-word-wrap: break-word;
-background-color: yellow;
-}
+To create your own custom component to override the defaults, create a folder and an `index.jsx` file for the component in the `client_custom/src/components/` folder.
+
+```	
+$ cd client_custom/src/components/
+$ mkdir Logo
+$ cd Logo
+$ touch index.jsx
+$ nano index.jsx
 ```
-* 
-	* Restart the server, and you should see your site with a yellow background!    
-`$ npm run start:dev`
 
-* Update the custom **About** Page component
-	* Most of the components used by [www.spee.ch](http://www.spee.ch) are taken from the spee.ch-components repo, but you can override those components by defining your own locally. As part of the [www.spee.ch](http://www.spee.ch) repo, a local custom **About** page is already included. You can edit the contents of this component in the *src/views/pages/* folder.
-	`$ cd src/views/pages/AboutPage`
-	`$ nano index.jsx`
+Create a simple react component in `index.jsx`.
 
-	* Change the text, or edit the **HTML** however you like.
-	* Restart the server, and you should see your site with an updated **About** page!
-	`$ npm run start:dev`
-
-* Add a new custom Logo component.
-
-	* To create your own custom component to override the defaults, create a folder and **index.jsx** file for the component in the *src/views/components* folder.
-	
-		`$ cd src/views/components`
-		`$ mkdir Logo`
-		`$ cd Logo`
-		`$ touch index.jsx`
-		`$ nano index.jsx`
-
-	* Create a simple react component in **index.jsx**.
-```js
+```
 import React from 'react';
+
 function Logo () {
-return (
-<p>My Logo</p>
-);
+  return (
+    <p>My Logo</p>
+  );
 };
+
 export default Logo;
 ```
-* 
-	* Restart the server, and you should see your site with a new Logo in the top left corner!
-`$ npm run start:dev`
 
-**__4. Bonus:__**
-    
-* [Install PM2](http://pm2.keymetrics.io/docs/usage/quick-start/) and run your server with PM2.
-    
-* Install PM2.
-`$ sudo npm i -g pm2`
-
-* From inside your project’s folder, start your server with PM2.
-`$ pm2 start server.js`
-	* Visit your site and see if it is running!
-
-* Sync Your Spee.ch Instance with the full **Blockchain**
-
-	* Install **lbrycrdd**.
-	*  Install **lbry-decoder**.
-	* Start **lbry-decoder**.
-	* Install & run [spee.ch-sync](https://github.com/billbitt/spee.ch-sync)
-	* Configure **spee.ch-sync**.
+Restart the server, and you should see your site with a new Logo in the top left corner!
+```
+$ npm run start
+```