Customizing page components | HCL Digital Experience
Each page component is constructed from a common pattern of design, configuration, and content features. These features can all be customized to match the design of your site. When a content author adds a page component to a page, copies of the items used by the page component are created.
Edit the authoring template
Edit the authoring template named Your Page Component located at .
- Add or remove elements:
Each generated authoring template contains a set or predefines elements. You can modify these elements, remove them, or add your own.
- Reapply the authoring template:
Once you have completed these changes, reapply the authoring template.
- Documentation resource: An overview of authoring templates
- Documentation resource: Creating authoring templates
- Documentation resource: Reapplying an updated authoring template
Assigning a workflow to the content item
By default, the content item for the page component used the system workflow. To use a different workflow:
- Create a draft of the content item located at .
- Select a workflow.
- Publish the item.
- Documentation resource: How to work with draft items
- Documentation resource: Content item workflow settings
Update the CSS
An HTML component named Styles: Your Page Component stores the default CSS used to set design parameters for the rendered content is also generated. It is located at .
You can update the CSS in this component, or update the presentation template to reference a different HTML component that contains the CSS used by your site. You can also update the classes used in the presentation template to match those used by your theme. If you choose to use styles not included in the Styles component, it can be deleted.
If you want to update the styles of two page components of the same type that will be used on the same page, you must update the style names for one of your page components and update the presentation template for the page component to match the new style names.
Update the presentation templates
The presentation templates used to display the content on a page are located at .
If you add or remove elements from the content template, you must update the HTML in the presentation template as well. You can also edit each individual design used by your Page Component.
- Documentation resource: Presentation templates
- Documentation resource: Creating a presentation template
Updating the icons
Images used to represent the page component and its designs are stored in image components located at .
You can replace these images with your own icons.
Image sizes of 18x18, 32x32, 64x64,
or 128x128 are best suited for custom
images. If other sizes are used, the custom image is resized to fit
the default sizes and your image might not display as expected. Creating
images for use with each of these sizes will also prevent distorted
images from being displayed.
Updating localized text
Update the localization settings to match the locales that are used by your site, or remove localizations if your site isn't localized. This is located at .
- Documentation resource: How to store translated text in a content item or site area
Move items into a different library
By default, the items that are generated are created directly under the top-level sections of the library you specified when you generated the new templates. Use the Move feature to move these items to your preferred location.
- Documentation resource: Moving a content item
Displaying the page component in the Page Components palette
There are two ways you can make a page component be displayed in the Page Components palette:
- Add ibm.portal.toolbar.NewContent as a keyword under the page component content item
When you first create a page component, a keyword named ibm.portal.toolbar.NewContent is added to the page component content item.
If you don't want the content item to appear in Page Components palette while you customize the page component, remove the ibm.portal.toolbar.NewContent keyword from the content item.
- Move the page component content item under the Page Components site area
You can also add ibm.portal.toolbar.NewContent as a keyword in a site area. Any content items located under a site area tagged with ibm.portal.toolbar.NewContent will also be displayed within the Page Components palette. This is useful if you have a large number of page components and want to display them within sub-folders within the Page Components palette.
- Documentation resource: Moving a content item
- Documentation resource: Creating new categories for the Page Component palette by using the Web Content Authoring Portlet
Hiding the page component from the Page Components palette
If you want to retire a page component so that it no longer appears in the Page Components palette, either:
Remove the ibm.portal.toolbar.NewContent keyword from an individual content item.
Move the content item out of the Page Components site area, or any site area tagged with the ibm.portal.toolbar.NewContent keyword.
- Documentation resource: Moving a content item
- Documentation resource: Creating new categories for the Page Component palette by using the Web Content Authoring Portlet
Deleting a page component
To delete a Page Component, and all the content displayed in a site created using that Page Component, remove items in the following order:
- Use the Content by Authoring Template view in the authoring portlet to find all the content created using your page component.
- Delete all these content items.
- Then delete all the authoring templates associated with the page component.
- Then delete all the presentation templates associated with the page component.
- Then delete component folder associated with the page component.