Overview

Skill Level: Any

What can be a better way to learn about the product than exploring and experiencing it! The sample OSLO website that comes with the Watson Content Hub (WCH) Trial and Standard edition provides you the experience of creating a website in WCH.
Your experience begins with having a Standard edition of the WCH or subscribing to a Trial if you do not have WCH. After you enter the Website tab of the WCH UI, you see the sample, OSLO website ‚Äď a fictitious furniture website ‚Äď loaded in your screen. The screen that you see is the preview of the site. You can edit the site and can immediately see it in the preview. Start to explore website creation in WCH by editing the sample site.
The following tutorial shows you how easy it is to customize the Header and Footer in the sample site. The Header and Footer are individual components that are repeated throughout the site. The Header displays the Logo and the navigation for the site.

Prerequisites

To get started, you need:

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Step-by-step

  1. Customize the Header look and style

    You can make stylistic changes like change the background color by editing the color code in the \src\app\wchHeader\wch-Header.scss file.

  2. Customize the logo

    1. To replace the logo, go to Content > All Content and assets, and locate the headerConfig content item. The headerConfig content item has the current OSLO logo as an image file.
    2. Create a draft of the content item and replace the image with your logo image. You can see the image that is replaced in the preview site. Publish the content item to publish the replaced logo to the live site.  Note: If the image you add is in the Draft state, when you click Publish the Ready for Publish screen appears. Click Apply to publish your logo image and republish the headerConfig content item with the new image. 
    3. Go to the preview to see the site logo that is replaced with your image.
    4. The logo image size is set in the source file \src\app\wchHeader\wch-Header.scss. You can customize the logo image size here.

    To find  what image size and renditions the sample logo image has, see Content model -How the sample site is built.

  3. Customize the navigation

    Open the Website > Site manager in the WCH UI to start exploring. You see the top-level pages Home, Design Articles, Events, and About us and its subpages provided in the sample site.

    1. Change the name of the page by opening the Actions menu > Edit page settings for the page.
    2. Change the name and click Save. You can see the page name change in the preview immediately.
    3. You can add a new top-level page or add child pages to create an extra level of navigation. To add a child page, complete the following steps.
      • Open the Actions menu > Create child page.
      • Select the¬†page type, for example, Standard page type and click Next.
      • Provide a Page name, a Page path, and click Create. A draft page is created. The sample site by default displays only two levels of navigation that display in the page header.
    4. For more advanced navigation, if you want to add more levels you must edit the source file src/app/wchHeader/wch-header.html.
        • In the wch-header.html file, find the following section of code:
          <ul class="vertical menu" *ngIf="page.children.length > 0">
           <li *ngFor="let child of page.children">
              <a (click)="menuItemSelected()" href [routerLink]="child.route">
                <span class="limit-page-name" title="{{child.name}}">{{child.name}}</span>
           </a>
           <!--Add your code here-->
           </li>
          </ul>
        • Copy and paste the following code in the ‚ÄúAdd your code here‚ÄĚ section to add level 3 navigation.
          <!--3rd level-->
          <ul class="vertical menu" *ngIf="child.children.length > 0">
             <li *ngFor="let third_level_item of child.children">
               <a (click)="menuItemSelected()" href [routerLink]="third_level_item.route">
                 <span class="limit-page-name" title="{{third_level_item.name}}">{{third_level_item.name}}</span>
               </a>
           <!--Add 4th level of menu items-->
             </li>
          </ul>
          <!--3rd level ends-->
        • To add the fourth level of navigation, copy and paste the whole section of code that you added for level 3 again in the ‚ÄúAdd 4th level of menu items‚ÄĚ section of the code.

        • Change all the variables that are named¬†child¬†to¬†third_level_item¬†and the variables that are named¬†third_level_item¬†to¬†fourth_level_item.
        • Change the comment to identify the section as the forth level navigation code.
          For example, the fourth level of menu items section must look like the following example: 
          <!--4th level-->
          <ul class="vertical menu" *ngIf="third_level_item.children.length > 0">
          <li *ngFor="let fourth_level_item of third_level_item.children">
          <a (click)="menuItemSelected()" href [routerLink]="fourth_level_item.route">
          <span class="limit-page-name" title="{{fourth_level_item.name}}">{{fourth_level_item.name}}</span>
          </a>
          <!--Add more levels of menu items-->
          </li>
          </ul>
          <!--4th level ends-->

      You can continue to add multiple levels of navigation as you want.¬†If you want to add more levels of menu items, add similar code in the section “Add *4 levels of menu items” and follow the step 4 repeatedly. Make sure that you change the variable names and comments iteratively as shown in the previous example.

      Note: You can control what pages show in the navigation. You can create Hidden pages, pages that do not show up in the navigation but can still be accessed in the site.

    5. Now that multiple levels of navigation is enabled, go to the Watson Content Hub UI and create the child pages that match the level of navigation you added. For example, if you customized the navigation menu to include four levels of child pages, you can create up to four child pages for each parent page from the WCH UI. For more information on creating child pages from the UI see, Site manager: Add pages to your site hierarchy.

      Note: Creating the child pages in the WCH UI is required for you to test the changes locally. The child pages can be published only when you publish the code to your site.

  4. Customize the Footer look and style

    The Footer is  similar to the header and you can make similar changes.

    You can make stylistic changes like change the background color by editing the color code in the \src\app\wchHeader\wch-footer.scss file.

  5. Customize the Footer elements

    1. Go to Content > All Content and assets, and locate the footerConfig content item. The footerConfig content item has the current OSLO logo as an image file and various text fields to provide the contact information such as email and phone numbers.
    2. You can add more information such as additional phone numbers, emails, links etc by first adding the elements to the Footer content type that the footerConfig content item is created from.  For example, add a text element email. 
    3. You can access the Footer content type, from the footerConfig content item by clicking the Footer Content type link in the Information tab.
    4. After you open the Footer content type, add text element from the Element palette.
    5. You must now update the source template with the new element for the element to be used in the layout.
    6. From your local development environment, run npm run update-app-module -- --type Footer.
    7. The layout template is updated with the new element key that is retrieved from the content type JSON.
    8. Go back to the Content > All Content and assets>footerConfig content item create a draft and add the email address to the new element. 

    Note: Updating the content item in the WCH UI is required for you to test the changes locally. The new  email address  can be published only when you publish the code to your site.

  6. Preview your code changes locally

    When you change the SPA code, you can preview the new changes locally before you publish them to your site. After you change your code, run the SPA locally.

    1. Open src/app/Constants.ts file.
    2. Add the following lines to the top of the Class and provide your Domain name and Content hub ID. You can obtain the Domain name and the Content hub ID from WCH UI > Hub information.
      static readonly DOMAIN_NAME = "change.this.to.your.domainname"; 
      static readonly CONTENT_HUB_ID = "change-this-to-the-id-for-tenant-that-you-want-to-test-content-on";
    3. From your project folder, run:
      npm start
    4. The site application runs on your local host at http://localhost:4200/. The changes that you make to the code is automatically updated in the local site.
  7. Publish the code changes to your site

    After you verify your changes locally, you must publish these changes to your site.

      • Run the following command to build your new site.
        npm run build
      • Run the following command to deploy your updated local site to the remote site.
        npm run deploy

    Note: You must reenter your Watson Content Hub password for you to successfully run the commands.

  8. Publish the changes made to the Header and the Footer

    After you made the code changes and the necessary content changes in the WCH UI, you must publish the draft pages and the draft footerConfig content item. After you publish, the additional levels of navigation pages added to the Header and the new email address added to your Footer are visible in the live website.

     

    Next step ‚Äď Adding a new element to the banner section

    Parent topic – Customizing the sample site

Expected outcome

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Join The Discussion

Your email address will not be published. Required fields are marked *