HOWTO Customizing Web Page

Contents

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 index.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
translations/messages.de.php PHP source translations for German
translations/messages.en.php PHP source translations for English

What you should not do

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

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

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. ;-)

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.

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.

Translate (or change existing texts)

Files messages.de.php and messages.en.php

You may change the texts on the right side (after the characters =>).

Translation for a new language

You may translate the whole interface to a new language by copying an existing translation file, renaming the new file to messages.[new language].php (for example messages.fr.php) and just translate all the texts on the right side (after the characters =>) into the new language (for example French).
Pay attention to the encoding of the new file: it must be UTF-8.