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 will show the new version of the icon as well.

<style>
.image{
	position: relative;
	float: left;
	width: 230px;
	height: 60px;
	padding: 5px;
	margin: 1px !important;
	border-style: solid;
	border-width: 0.3px;
	border-color: rgb(150,150,150);
}
a img{
	max-height: 30px;
	width: auto;
	text-position: right;
}

</style>

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.

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

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.

#google_translate_element{ display: none;}

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.
   
   

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: