Fix code block formatting and image links

Author: Brylie Christopher Oxley

docs/advanced-customizations.md

@@ -15,17 +15,11 @@ _As a prerequisite the CC Base Child Theme starter must be installed in the **wo
 - Open the wordpress directory in a text editor or IDE of your choice.
 - Navigate into  the **wordpress**/**wp-content**/**themes**/**cc-wp-base-theme-starter**/**front** directory.
 - Install all the necessary node modules by running the command below in your terminal:
-
-```
-npm install
-```
-
+    - `npm install`
 - To add custom styles cd into the styles folder, add your styles in the relevant sass files. 
-- Run the npm scripts below in your terminal, to watch and compile your styles respectively.```
-npm watch
-
-npm build
-```
+- Run the npm scripts below in your terminal, to watch and compile your styles respectively.
+    - `npm watch`
+    - `npm build`
 
 ## Advanced Widgets
 
@@ -47,7 +41,7 @@ These are used to create containers. Column Containers are blocks of space that
 The Column Container Open widget is used to initialize a container component.
 Its parameters are shown in the screenshot below:
 
-![Open column container widget parameters](/assets/content-images/advanced-widgets/open-column.png)
+![Open column container widget parameters](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/advanced-widgets/open-column.png)
 
 - Remove Gap: This parameter denotes horizontal the space in between inner columns as well as the space below and above the container, in css those spaces are defined by grid gap,  margin bottom, and margin top respectively. These all have a default value of 0.75rem.
 - Column Count: This parameter will allow you to set the number of columns in the container.
@@ -66,7 +60,7 @@ These widgets effectively form a single column structure which can be populated
 The Single Column Open widget is used to initialize a column component.
 Its parameters are shown in the screenshot below:
 
-![Single column open container widget parameters](/assets/content-images/advanced-widgets/single-column-open.png)
+![Single column open container widget parameters](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/advanced-widgets/single-column-open.png)
 
 - How many columns should be used: This parameter is used to configure the span of a single column. The parent container (refer to the previous section for more details) consists of a fixed number of columns which are set using the parameter Column Count. The How many columns should use field will allow you to set the number of columns the single column should occupy from the preset number columns.
 - Color: This parameter is used to set the background color of the single column.

docs/customizations.md

@@ -13,7 +13,7 @@ The Creative Commons Base Theme is highly flexible. Continue reading to learn ho
 - Go to **Customize** > **Site Identity** 
 - In the field labeled **Site Title** enter a custom title of your site.
 
-<![Emphasized title field and label](/assets/content-images/customizations/set-title.png)
+<![Emphasized title field and label](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/set-title.png)
 
 ## Custom site description or tag line
 
@@ -22,7 +22,7 @@ The Creative Commons Base Theme is highly flexible. Continue reading to learn ho
 - Go to **Customize** > **Site Identity** 
 - In the field labeled **Site Tagline** enter a custom tagline(or description) of your site.
 
-![Emphasized tagline field and label](/assets/content-images/customizations/set-description.png)
+![Emphasized tagline field and label](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/set-description.png)
 
 ## Custom Icon
 
@@ -32,19 +32,19 @@ The Creative Commons Base Theme is highly flexible. Continue reading to learn ho
 - Click the button labeled **Select Icon** to set up an icon.
 Note that the site icon must be a square that is 512 x 512 pixels.
 
-![Emphasized icon field and label](/assets/content-images/customizations/set-icon.png)
+![Emphasized icon field and label](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/set-icon.png)
 
 ## Custom Navigation Menus
 
 There are two menu locations in the site which are namely: Main Navigation and Footer Navigation. 
 
 The screenshot below shows an example of a custom menu in the Main Navigation:
 
-![Main navigation](/assets/content-images/customizations/main-nav.png)
+![Main navigation](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/main-nav.png)
 
 The screenshot below shows an example of a custom menu in the Footer Navigation:
 
-![Footer navigation](/assets/content-images/customizations/footer-nav.png)
+![Footer navigation](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/footer-nav.png)
 
 _The menus shown above are displayed in the desktop view. On any other screens, their appearance and or position might be different from what is shown above._
 
@@ -56,15 +56,15 @@ _The menus shown above are displayed in the desktop view. On any other screens,
 - To proceed to the next step in the form, click the button labeled **Next**.
 - Then click the button labeled **+Add Items**, it will reveal all of the items which can be included in the menu.
 
-![Form used to configure a custom menu on live preview](/assets/content-images/customizations/set-menu-live-preview.png)
+![Form used to configure a custom menu on live preview](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/set-menu-live-preview.png)
 
 - Select menu items by clicking on them. 
 - You are able to re-order the arrangement of selected menu items by dragging them up and down.
 - After you are done you may proceed to publish the changes.
 
 ### To create a custom menu using the dashboard:
 
-![Form used to configure a custom menu on live preview](/assets/content-images/customizations/set-menu-dashboard.png)
+![Form used to configure a custom menu on live preview](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/set-menu-dashboard.png)
 
 - Go to **Dashboard** > **Appearance** > **Menus**, the form in the diagram above will be shown.
 - Enter the menu name in the filled labeled **Menu Name**.
@@ -92,7 +92,7 @@ There are three layouts in the theme you can use to configure the structure of y
 
 #### Default Layout
 
-![Default page layout](/assets/content-images/customizations/default-page.png)
+![Default page layout](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/default-page.png)
 
 This is the default layout of the page template, it has a default sidebar component on the left. To populate the sidebar with widgets:
 
@@ -121,7 +121,7 @@ In order to display a static page on the homepage:
 - Create another page and give a title of your choice(e.g. Blog).
 - Go to **Dashboard** > **Settings** > **Reading**, and set your homepage display to the static page. Then set your Homepage to display the Homepage(the static page we created above) and set your posts to be displayed on the Blog page.
 
-![Reading Settings](/assets/content-images/customizations/reading-settings.png)
+![Reading Settings](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/reading-settings.png)
 
 - There are other optional settings outlined in the **Reading Settings** which you can use to also manage your site.
 - When done, click the button labeled **Save Changes**.
@@ -151,10 +151,10 @@ In order to display a static page on the homepage:
     - Select the Document tab
     - You will find Post Format listed in the Document settings.
     - Select your desired Post format from the dropdown:
-    ![Form to set post format](/assets/content-images/customizations/set-post-format.png)
+    ![Form to set post format](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/set-post-format.png)
     - Close the Settings by clicking on the gear icon.
     - On your editor at the very bottom of your post, click on the Post Format Panel so as to enlarge it.
-     ![Post format settings](/assets/content-images/customizations/post.png)
+     ![Post format settings](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/post.png)
     - Add relevant configuration details which will be influenced by the format you selected in the Settings.
 
 ### Post Formats
@@ -183,7 +183,7 @@ _If the above-listed post formats do not meet your requirements, you can complet
 
 The widgets are available in **Dashboard** > **Appearance** > **Widgets**. On the left panel, we have the available widgets and the small panels on the right are the widget areas available in the theme.
 
- ![Available widgets](/assets/content-images/customizations/view-widgets.png)
+ ![Available widgets](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/view-widgets.png)
 
 ### To add a widget:
 - Drag it from the left panel into a widget area and provide the configuration information if it is required.
@@ -196,17 +196,17 @@ The widgets are available in **Dashboard** > **Appearance** > **Widgets**. On th
 
 - Go to **Customize** > **Widgets**. If you are on a page that does not have any widget areas you will get a message shown in the screenshot below:
 
-![No widgets listed on the live preview](/assets/content-images/customizations/no-widgets.png)
+![No widgets listed on the live preview](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/no-widgets.png)
 
 When the page has widgets areas they are listed as shown in the screenshot below:
 
-![Available widgets listed on the live preview](/assets/content-images/customizations/has-widgets.png)
+![Available widgets listed on the live preview](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/has-widgets.png)
 
 - You select a widget area by clicking it. 
 - To add widgets click the +Add Widget button and then select a widget from the widget panel on your right.
 - You are also able to search for widgets in the event the one you need is not displayed.
 
-![Set widgets listed on the live preview](/assets/content-images/customizations/set-widgets.png)
+![Set widgets listed on the live preview](https://opensource.creativecommons.org/creativecommons-base/assets/content-images/customizations/set-widgets.png)
 
 - After adding widgets you can then publish your changes.