Roadmap: Creating a custom theme

This roadmap highlights how to create the custom theme of the design from an HTML component. The theme is used to customize the site builder template and other page templates for the new site that the content author creates.

Who should use this roadmap

You are a developer on the technical team that is tasked with implementing the HTML prototype. You are responsible only for creating a custom theme and replacing the default logo with your company logo. Other developers are responsible for developing other pieces of the design. Learn the basics of creating and changing the theme logo to reflect your business.

Creating your custom theme

Procedure

  1. Click the Applications menu icon. Then, click Theme Development.
  2. Click Create Theme.
  3. In the Title field, enter Greenwheels.
  4. From the Template menu, select Simple.
  5. Click Create.
  6. When the dialog indicates that your theme was successfully created, click Done.
Now that you created your new theme, you can customize its look and feel.
  1. From the Theme Manager, locate Greenwheels and select Manage properties.
  2. In the General tab, select 1Column from the Default Layout menu.

Results

Your custom Simple Theme is now ready for the content author to use to customize site and page templates.

Changing the theme logo

Before you begin

Ensure that you created a custom theme for Greenwheels that uses the Simple Theme template. To learn how to create the custom theme, see Roadmap: Creating a custom Simple Theme.

Download HCL Digital Experience File Sync on Github. Then, learn more about using DXSync to edit theme files by reading Editing static theme resources and connecting with DXSync.

Procedure

  1. Create the directory ThemeLogo.
  2. Use the command line to switch to ThemeLogo and run dxsync init.
  3. Enter the necessary server information.
  4. Select the Greenwheels theme from the list of themes.
  5. On the command line, run dxsync run. DXSync downloads all of the resources that are associated with the Greenwheels theme to your local workstation and uploads any changes you make to those files in the background.
  6. Open the directory ThemeLogo.
  7. Upload your new logo to a folder in the theme, such as fs-type1/themes/Greenwheels/css/images. In this example, the new logo is a .png image called logo.png.
  8. Open the theme.html file in the root theme folder, fs-type1/themes/Greenwheels/theme.html.
  9. Locate the following code string:
    <svg class="stLogo" role="img" aria-label="HCL Digital Experience"> <title>IBM Digital Experience</title> <use xlink:href="#stBee"></use> </svg>.
  10. Replace the code string in Step 9 with the following code string:
    <img alt="Logo" src="css/images/logo.png">.
  11. Save the file.

Results

The default theme logo is replaced by the Greenwheels logo.