+

Search Tips   |   Advanced Search


Create 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.


Create the custom theme

  1. Click...

      Applications menu > Theme Development > Create Theme

  2. In the Title field, enter Greenwheels.

  3. From the Template menu, select Simple.

  4. Click Create.

  5. When the dialog indicates that the theme was successfully created, click Done.

Now that you created the new theme, we 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.

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


Change the theme logo

Ensure that you created a custom theme for Greenwheels that uses the Simple Theme template.

  1. Create the directory ThemeLogo.

  2. Use a WebDAV client to download the Greenwheels theme.

  3. Open the directory ThemeLogo.

  4. Upload the new logo to a folder in the theme, such as Greenwheels/css/images. In this example, the new logo is a .png image called logo.png.

  5. Open the theme.html file in the root theme folder, Greenwheels/theme.html.

  6. Locate the following code string:

      <svg class="stLogo" role="img" aria-label="HCL Portal"> <title>IBM Digital Experience</title> <use xlink:href="#stBee"></use> </svg>

  7. Replace the code string in the step above with the following code string:

      <img src="css/images/logo.png">.

  8. Save the file.

  9. Use a WebDAV client to upload the changes files of the theme.
The default theme logo is replaced by the Greenwheels logo.

See also:

Parent topic: Roadmap: Implement a design wire frame for a new landing page