Customizing the HTML in a topic
The HTML you see when you view a topic in a web browser is generated by transforming the XML in your topic or document with a set of XSL stylesheets specifically prepared to be customized.
About this task
These steps describe how to customize the HTML output of a topic. However, a parallel set of steps could be completed to modify the PDF output of a topic as well. If your HTML style changes are based on existing customized XSL styles for the DITA Open Toolkit, refer to Using XSL from the DITA Open Toolkit for instructions on how to load these custom XSL styles into an Content Delivery skin.
Note: When Content Delivery is installed in a third-party web application server, ContentDelivery_home refers to ContentDelivery_InstallDir\WEB-INF (ContentDelivery_InstallDir/WEB-INF on Linux). When Content Delivery is installed with its bundled web application server, ContentDelivery_home refers to your installation directory, ContentDelivery_InstallDir.
Procedure
- Content Delivery provides an XSL file specifically for custom modifications to the HTML transform. Create or modify ContentDelivery_home/db/LiveContent/ui/skins/<your skin>/xsl/<your standard>/html_custom.xsl.
Note: Standard names (<your standard>) within Content Delivery are all converted to the upper-case code name for the standard: for example,
DITA. If you were adding support for ATA iSpec 2200, you might choose to use the standard code nameATA2200within Knowledge Center. - Identify the XSL templates you need to override, or the XML node you need to match. The base XSL processing starts in ContentDelivery_home/db/LiveContent/ui/skins/<your skin>/xsl/<your standard>/html.xsl. For the DITA standard, the XSLs in the ContentDelivery_home/db/LiveContent/ui/skins/<your skin>/xsl/DITA/xslhtml/ folder are also used.
- Modify ContentDelivery_home/db/LiveContent/ui/skins/<your skin>/xsl/<your standard>/html_custom.xsl.
- The Content Delivery XSL customization is based upon the ability to add
priorityormodeto override templates in the core XSL with customized templates. Add a new<xsl:template>for each template you need to modify. If you are adding a new template with amatchattribute, be sure to add apriorityattribute with a value of11or higher.<xsl:template match="*[contains(@class, ' topic/image ')] /@href" priority="10"> <!-- include the result of the template here --> </xsl:template> - Modify your new template to complete the required transform. The following example shows a high priority template that customizes how the
hrefattribute for animagetag is handled. This customization modifies the value of thestyleattribute, which is produced by the template and appended to the parent HTML element. In this example, an additional margin and a black border are added to all images.<xsl:template match="*[contains(@class, ' topic/image ')]/@href" priority="10"> <xsl:variable name="srcfile"> <xsl:call-template name="strip_path"> <xsl:with-param name="link" select="."/> </xsl:call-template> </xsl:variable> <xsl:attribute name="src"> <xsl:value-of select="$rel_app_url"/>media/<xsl:value-of select="$pub.lang"/> /<xsl:value-of select="$pub.id"/>/<xsl:value-of select="$srcfile"/> </xsl:attribute> <xsl:attribute name="style"> padding:0px 4px 0px 4px; margin: 2pt; border: 1pt solid black; </xsl:attribute> </xsl:template> - You can customize the HTML wrapper and toolbar that is built around the topic by modifying the template for the
DOCUMENTelement. In Content Delivery, each individual topic or document XML object loaded into the system is wrapped in aDOCUMENTfor consistency within the system.Note: Modify theDOCUMENTtemplate with care, as it generates a number ofDIVelements with specific classes or importantIDattributes, used by the JavaScript in your skin to perform post-load functions. For example,<div id="lc_doc_header"/>is an empty element into which the topic's ANT trail is inserted by JavaScript, and the<div id="xform_footer"/>is an empty element into which document attached forms are inserted by JavaScript. Removing either of these elements from theDOCUMENTtemplate would prevent these two post-load functions from completing successfully. - Upload the new skin customization into the database.
- You can upload the resources using the web UI, as described by Adding a Skin and Resources.
- You can also update the skins via the command line using the loaddb tool. Copy the updated skin resources from the source code repository to ContentDelivery_home/db/LiveContent/ui/skins/<your_skin>/.
- On Windows, to load the most recent changes into the database run this command:
loaddb.bat UPGRADE
- On Linux, run this command:
loaddb.sh UPGRADE
- On Windows, to load the most recent changes into the database run this command:
- Configuring Social Media Network Plug-ins
You can configure Content Delivery for Collaborative Review to share pages on a public internet site with other users in social media networks. By default, these configurations include Facebook, Google +1, and LinkedIn.