Customize header and footer

What can be a better way to learn about the product than exploring and experiencing it! The sample OSLO website that comes with the Content trial and standard edition provides you the experience of creating a website in Content. Your experience begins with having a standard edition of the Content or subscribing to a trial if you do not have Content. After you enter the Sites tab of the Content UI, you see the sample, OSLO website a fictitious furniture website loaded on 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 Content 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.

Before you begin

To get started, you need:

• Your Acoustic Content trial or standard edition. To get a free trial version or to upgrade to standard, go to Acoustic Content.
• Install a Node environment with a recent stable version greater than Node >= 8.
• Access to the site application code. To access the code download Acoustic Content Sites single page application. For more information about working with the source files, see wch-site-application/README.md.
• For more information about setting up your development environment, see Setting up your development environment. For more information about developing sites with Acoustic Content, see Acoustic Content Sites Customization Programming Model.

Customize the header look and style

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

Customize the logo

1. To replace the logo, go to Content > All Content, 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 your logo image is included in the list of items to be published.

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\responsiveHeader\wch-Header.scss. You can customize the logo image size here.

Customize the navigation

Open Sites > Site manager in the Content 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/responsiveHeader/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 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 on the site.

5. Now that multiple levels of navigation are enabled, go to the Content 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 Content UI. For more information on creating child pages from the UI see, Creating and editing pages.

📘

Note:

Creating the child pages in the Content 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.

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\responsiveHeader\wch-footer.scss file.

Customize the footer elements

1. Go to Content > All Content, 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 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 Details tab.
4. After you open the footer content type, add a text element from the Design tab.
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 > footerConfig content item create a draft and add the email address to the new element.

📘

Note:

Updating the content item in the Content 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.

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 ID. You can obtain the Domain name and the Content ID from Content UI > Developer > URL 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 localhost at http://localhost:4200/. The changes that you make to the code are automatically updated on the local site.

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 Acoustic Content password for you to successfully run the commands.

Publish the changes made to the header and the footer

After you made the code changes and the necessary content changes in the Content 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 on the live website.