On this page:

There are two ways to add your logo to the cover page:

  • Configuring the logo image in the Cameo Collaborator template properties and using this template when publishing a document. The logo will appear in the Cameo Collaborator document and on the cover page of the exported document. The cover page template has a placeholder at the top of the page where the logo is placed.
  • Removing the current placeholder for the logo and adding another logo image in the desired place of the cover page the template. In this case you will need to modify the <template folder>/common/coverPage.html file.
    To add the logo image to the cover page template, do one of the following:

    • Encode the image as the Base64 encoded string and use it as the value of the img src attribute. This is the preferred way to indicate a source of an image in templates.

      • The URL must be absolute, relative URLs are not going to work.
      • The URL must be accessible from the server where the web application platform is deployed if users are exporting a document to the PDF format.
      • The URL must be accessible from the user computers if users are exporting a document to the HTML format. The URL will appear in the output HTML file as is.

        Use a URL to the remote image as the value of the img src attribute:

Example of adding a logo to the cover page by modifying an HTML template

Let’s assume that you want to make your logo appear on the cover page without configuring the logo for the project. Or you just want to use another logo image for the cover page than the one configured in the template used for publishing. In addition, you want your new logo to appear at the top of the cover page, the same place where the placeholder for the default logo is configured.


To add a logo to the cover page by modifying an HTML template

  1. Encode the image as a Base64 string. You can use an online converter or your own code or tools to make the conversion.
  2. Open the <template folder>/common/cover-page.html file.
  3. Find the div tag with the company-logo-container.
  4. Locate a single img tag within the div.
  5. Replace the src of the img tag with <img src="{data:image/<image type>;base64,<image as a Base64 encoded string> }" alt="<alt text>">.

  6. If necessary, use other HTML tags and CSS styling information to display the logo image the way you want.

    Code example when using the PNG image type

    <div id="company-logo-container">
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAF5AAABeQGfAOmRAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABf1JREFUWIXtmH1wlNUVh5/z7mY3yWbZLWGDSTYMgYaEEkAwgaB1dKRVwFosCDM4QFUcHEcxfqCgf4jAOGNbDOhYv5ii2EIUpyUw01KZCCkfgliBhIAJkIRAgGy+swmb7Gb3vf1jww5CiJtsqM7omdnZd+6977nPnnvu79y9IjOeU/yATfu+Ab7LfgKM1H5sgBL6ll7HhW/GiF4WYezIJLLTnIxMjGeo3YrFHEVnV4CLTa0crbzAzq/LaWzrRNE/seg3oCj424sPMnPKOFAgIhg1Da07dKobyeP18cpHO1hbsK9fiBKZDqoQkCDYYmNIGWpjwogkZt02nhnZo9FEQ1c6E5/Mo+SMC/qIGWEOCroKfgIKmi51UlLp4sPCI8xc+QE7/vtNCD4p3tqvGSLKwWvtykwTEmxxAHh8XRwqr6Gv0YMbJDOC8MBtmWSlOdFVgLVbi2hq7+yXrxsCOH64g/dy5wDCf0oreTW/kP5EDwZ4iQXh5uEJ/PPVxdhiY/iyrJo5qzfi8/d/Hw4YoAB3TxzJ5mULsFliKThYzENrttDe2cXl6EnoSXVLebClN/wBATQILH3gDlbNn45f13nhL9t4o2A/ulKICNmjUshKSyE5fhAmo5F2r5faRjdl5+spqTxPU7v3xgEOjoth49J5TLslnV3Fp8h9t4CymgYEGD/8Jj5YOo9xqUmgBEQPxkxJqCr6AgFe2fQZf/xkd4+RjAhQUGxf+QjtHV5mvLyewiOnQ5OYowxsX7mI5CF2AA6UVbKp6DBVF5tpueShwxvAH/Dj6fRR09B63WWOCFAh/GrZ2/j8Cv2qvpsGW0mOtyEIulL8/k/5VLia+zxHWIAmo5A9ahjZo1LIcDpIHmLDHhtLQOk0uD2cvtDAgW/O8Pnhk7T7AoDiXF0LFbWN/DzRgQC/zEylwtVCX+XmO2uxxWzkyzefJSPZccV+E0SCSwwSmrPO3cbz729nU9FRFMLc2zPJX74QAFdzG5Nz13Gu0T2wgABGUVhiogkEdHRdYTYaGBQXjdNhZ3L6MBbdM5l0ZwKaCH5dkbUkj5LqWkQpNjwzl4VTJyEiHK44x9Rl79Da4QsbMKxKElAarR4vnq4ufp2VTkuHl7P1rXxx4ix5W/eSk7uOC81uQDBoGmNTE0EFc/SJP2/l0MlqlFJMGOFk8/L5mAzhF7CwRioUAvzhoXtZteCekOBeXvJ2r5/6ljYAdKU4cKIq9G6HL8Cs1R9RXd8ECNNuGc3ri3/bnR4DBIjAfZMyePp3d7B6886rdqyQ7nSQOTwJhaLgi2KqXE3f+nEXm93cv3IDbo8HAR6/91Yem54T1h+DsAAT7XG8lzuX3cdO8Y99pd/qMxs03n1qNkbRaPN4WbbhX6ge3B474+LhvHx0gtXl9cUzGTPMETmgpuCdJbMZbLXw/Ppt6KETNJg0eP+ZOdz+i1T8us6j6z6m0tXYox8FbDtYxpY9RxCEaFMUK+bfHTngg1Mn8JtJY9i8+2tKqupABRfGGmPm45cWMv/Oifh1xRNvfcrf95cGS9o1dvlgoFNUfDrYoiBndCqo3nOxV6F2WKNZs+g+dAWvbSkMnUQmpSWz4bl5pDuH0urp4OE1+Ww/dAIBYs1RxEWbiTEbsUSbiTWbsFmiSfyZlczURBbcldXtRXGo/CxI73l4XUABViyYToJ9EHtKT3PyfDMp8TaWz72TRdOnYNQ09h2v4NG1n1BR24wARXlLyBmVgqCFYiZXASilCCid3cUnefKtrb3CwXWFWhjtjOfI20sxGYzUtbRRVlNHTsYwDAYDtU1uVvz133xY+BW6CqIICqMGI5KGkJbkICXBTqLdgt0Sh8lkRCmF+5KHKlcz+45Xcry6Liyh6SGCwclWLZxGlGYAIMFuJcFupbq+iTcL9rJ+x0Euef3d6giXFbFLh/KaBsprGuCKvit9X9vWZ0BFRsoQ7p8yFkThDejsOlrOxp1fUXCgFF8gXOc9jev70b/HHIyJMvPap7soqbpAUfEpGtyd3dH6/991RnizcOPtx3b9NvD2E2Ck9oMH/B9keU0IMh7vDQAAAABJRU5ErkJggg==" width="200" height="200" alt="Logo"/>

    </div>




If the document is exported using the modified template, the cover page with a custom logo may look like the one below.


Example of the cover page with a custom logo.


Example of configuring a logo in a Cameo Collaborator template

Let’s assume that you want to configure a logo image in the Cameo Collaborator template you use for publishing a document. In this case, you can either modify the default template or create your own custom template. For more information on hoe to create custom document templates, refer to Creating a custom template.

This example demonstrates how to modify the SysML Template for Cameo Collaborator.


To configure a logo in a Cameo Collaborator template based on the SysML Template for Cameo Collaborator

  1. Open the SysML Template for Cameo Collaborator Cameo template in a modeling tool.
  2. Clear the Standard/System Profile checkbox in the Project Properties dialog so the template is not considered a system file. For more information, refer to Creating a custom template.
  3. Open the Specification window of the Document element as shown below.



  4. In the Specification window, select your logo image as the value of the Image property.



  5. Save the template file.
  6. Open the project from which you want to publish a Cameo Collaborator document.
  7. In the main menu, select Tools > Cameo Collaborator > Publish.
  8. In the Cameo Collaborator Publisher dialog, select to use your custom template. Select Use Local Template or Use Server Template depending on where the template is stored.



  9. After the template is used select it in the Template drop-down box.
  10. Define other publishing properties and publish the document.

 

If the logo image was successfully added, it will be displayed in the App bar of the Cameo Collaborator document as shown below. Furthermore, the logo image will be displayed on the cover page of the exported document as well. If you want the logo to be displayed in a non-default location or make other changes, you can adjust the styles of the cover page in the common/cover-page-styles.html file.


Cameo Collaborator document with a custom logo.