How to Rearrange the Layout of the SiteKiosk Chrome Browser

Here is a quick way to completely move around the main parts of the SiteKiosk Chrome browser. This for example can be used to show the tool bar not at the top but at the bottom.

Open the file C:\Users\Public\SiteKiosk\data\content\local\files\projects\d97aa96b962543fcb39625a3f8e8d8fb\000000000000000000000000\content.json with an editor, e.g. Notepad. And look for the lines

"templates": {
	"main": {

A few lines below you will see the start of the elements segment, that by default lists the element with the name topContainer first.

"elements": [
	{
		"type": "content-container-linear",
		"name": "topContainer",
		...
		"_editor_propertiesToEditRestrictedUser": {}
	},
	{
	...

There are 6 elements that can be separated by their names. In an unedited content.json file the order is topContainer (this element represents the tool bar), tabBarContainer (this element represents the tab bar), loadProgress (this element represents the progress bar), tabPageArea (this element represents the area where web pages are rendered), surfTimeContainer (this element is for internal use only) and popupWindow (this element represents the popups used for the zoom and language selections of the tool bar).

The 4 elements topContainer, tabBarContainer, loadProgress and tabPageArea are those that can be rearranged to change the overall look of the browser. The other two elements can be left untouched.

All element definitions are in the same order in the JSON document as they appear on the screen if you start SiteKiosk. To reposition an element you simply have to move its complete definition from opening bracket ({) to closing bracket (}) to the new place you would like the element to have on the screen.

If the elements are rearranged in the order tabPageArea, loadProgress, tabBarContainer, topContainer and the content.json file is saved, you will see this user interface when you start SiteKiosk:

Note that depending on how you reposition the elements and the SiteKiosk configuration you are using, there may be minor side effects, e.g. overlapping parts. Also note that the task bar of the SiteKiosk Chrome browser is not part of the content.json file, it can be found in this folder instead C:\Program Files (x86)\SiteKiosk\Skins\Chrome_NG_Skin.