Table of contents

Images

When inserting an image from a link or Google document make sure the image is uploaded into Confluence and does not retain the link to the source; otherwise you risk of loosing an image when it is deleted from the source.

For Google documents it is also true if the access to the document, where the image comes from, is restricted.

An example of an image attached (uploaded into Confluence) to a confluence page. The extension (.png) and version of the file are present.

An example of broken images. The source of the image is most likely outside Confluence.

When you try to view a broken image, Confluence will display something similar. The link is the original source of the image:

Icons

General icons to use within the PSL knowledge base. It will ensure that all icons look the same and are stored in the same place which in turn will reduce the risk of broken or missing images.

The images shown below are attached to the main PSL page and are tagged as icon.

To add an image to the general collection, attach it to the main PSL page and add a tag "icon"; be mindful of the file name as it will be used to search for the icon. To replace an existing icon upload a new one with the same name as the old one, and it will be updated, all the pages using the icon should show the new version of the icon as well.

icon_back_to_top.png

icon_confluence.png

icon_ERP_BAAN.png

icon_ERP_PE1.png

icon_ERP_PF1.png

icon_ERP_PI1.png

icon_ERP_WP1.png

icon_excel.png

icon_google_drive.png

icon_google_sheets.png

CSS for operating procedures

Small snippets of CSS code to use within HTML macro to make the instruction manuals more appealing.

Place all the code provided below in between the style blocks for it to work.

<style>
	/*your code here*/
</style>

Table of contents numbering

To achieve the table of contents numbering as shown below. Has to be used with the Table of contents macro.

Currently is included with the "PtP - Operating procedure" template.

<style>
.toc-macro ul {display: block; counter-reset: item}
.toc-macro li {list-style-type: none}
.toc-macro li:before { content: counters(item, ".") ". " ; counter-increment: item}
</style>

Necessary presets in the table of contents macro for the adjustments to work as intended

• Output Type: list
• List Style: none
• Exclude Headings: (Table of contents).* - will exclude all headings listed
  

Hide Google Translate language selector

Use this code to hide the language selector when necessary. For example: on title pages.

<style>
#google_translate_element{ display: none;}
</style>

Back to top button

To create a button that brings you to the top of the wiki page you will need following:

• HTML wrap macro with an assigned ID
• An image for the button
• An anchor that leads to the top of the page

Steps to follow:

1. Create an anchor at the top of the page and give it a name.  In this example the name is "thisitop"
   
2. Insert an HTML Wrap macro and assign a CSS ID to it (ID = backToTopButton). Leave the rest unchanged.
   
3. Place an image for the button inside the HTML Wrap and create an advanced link for the image to the anchor you made earlier. 
   Alternatively, if you have a permanent heading at the top of the page (like "Table of contents"),  you can create a link to that heading and remove the Anchor.
   
   

4. Insert the following code into the HTML macro: 

   <style>
   #backToTopButton{
   	position: fixed;
   	right: 20px;
   	bottom: 20px;
   	Z-index: 1;
   }
   </style>

The final composition looks as follows:

Move workflow information to page footer

<script>
document.addEventListener('DOMContentLoaded', function() {
   	var metadata = document.querySelector('.page-metadata');
	var sect = document.querySelector('#workflow-page-footer');
	sect.appendChild(metadata);
}, false);
</script>