**HOWTO Customizing Web Page**

# Contents

* [Files involved](#files)
* [What you should not do](#do-not)
* [What you can do](#can-do)
    * [Customize the look of the web page in `user.css` ](#css)
    * [Customize the web page `index.php`, including `QrBillsDelete.php` and `QrBillsUpload.php`](#web-page)



# <a name="files"></a>Files involved

Name                                | Type              | Description
------------------------------------|-------------------|------------
`css/user.css`                      | CSS source        | allows to design the web page
`js/QrBillsProcess.js`              | JavaScript source | asynchronous requests, live status
`index.php`                         | PHP / HTML source | main web page
`QrBillsConfigurationSelection.php` | PHP / HTML source | configuration selection form
`QrBillsDelete.php`                 | PHP / HTML source | delete form and handling thereof
`QrBillsProcessAsync.php`           | PHP source        | Target for execution requests in `QrBillsProcess.js`
`QrBillsProcessStatus.php`          | PHP source        | Target for status request in `QrBillsProcess.js`
`QrBillsProfileSelection.php`       | PHP / HTML source | profile selection form and handling thereof
`QrBillsSaveCfg.php`                | PHP source        | handles configuration save requests in `QrBillsUseCaseSelection.php` and `QrBillsConfigurationSelection.php`
`QrBillsUpload.php`                 | PHP / HTML source | Target for file upload requests in `QrBillsUploadForm.php`
`QrBillsUploadForm.php`             | PHP / HTML source | upload form for one file
`QrBillsUseCaseSelection.php`       | PHP / HTML source | use case selection forms



# <a name="do-not"></a>What you should not do

Unless you are an experienced PHP and JavaScript programmer, you should not touch these files:

* `QrBillsProcess.js`
* `QrBillsProcessAsync.php`
* `QrBillsProcessStatus.php `
* `QrBillsSaveCfg.php`

In the other PHP files, you should not touch the PHP code, but you may change the HTML code.



# <a name="can-do"></a>What you can do

If you do not understand the following text then it's probably better, you don't touch the files at all. ;-)


## <a name="css"></a>Customize the look of the web page in `user.css`

For these changes you need some knowledge in Cascading Style Sheets (CSS).

You may change any of the given styles or add new styles.


## <a name="web-page"></a>Customize the web page

For these changes you need some knowledge in Hyper Text Markup Language (HTML).

As already stated: Unless you are an experienced PHP and JavaScript programmer, you should not touch the PHP code, but only change the HTML code.

You may change the look (probably add another CSS), title, heading and all texts (see translation files!).

You may change the structure (possibly together with adaptions in the CSS) of header, `div` and `p` tags.

Pay attention to the (many) forms: You may change the text of the `label` tags (translation!), you must not change the `form` tags nor the `type`, `name`, `id` or `onclick` attributes of the `input` tags (but you may change the `value` of the `submit` or `button` input type); otherwise the form will not work anymore with its counterparts.

Do not change the `id` attributes `status` and `debug`, they are used by `QrBillsProcess.js` to write text into the web page.
