Exporting And Tweaks

#1

These are some of my notes i wrote when i was building a multi-page website with Wick and, depending on what i was exporting and changes i needed, i wrote down a few things that might help some newbies like myself, especially when exporting several Wick files for a single Web / Game project.

-------------------NOTES

EXPORTING HTML:

Once you have exported your project / app in HTML, open it in VSCODE and, add the following line, without the brackets.

<(( meta name=“viewport” content=“width=device-width, height=device-height, initial-scale=1, user-scalable=no, viewport-fit=cover” ))>

To change the page background (HTML), type or search for “off-screen” (lines 63196 - 63219) and change the 8 values from black to grey or any colour of choice.

REMOVING BLACK BOARDERS IN VSCODE:

Search for “off-screen” and change the project background colour by editing the 8 values in lines 63196 - 63219 from black to grey or any colour of choice.

FITTING TO PAGE WITH HEADER OR MENU:

Link the page navigation css
Link to the wick.css file
change the wick canvas to 90%

——————————————————————————————

EXPORTING ZIP:

Exporting in ZIP format has size and security advantages over HTML, the html file is smaller in size compared to a single html file and offers better security incase of a download as the wick file will not be downloaded making it absolute.

  1. Export individual projects to their own ZIP files.

  2. Unzip the files and rename the index and wick files to match the name of the page you want. For example, about.html or php and make sure you rename the wick project the same else it won’t work.

  3. Drag the files to your HTTDOCS project folder (make sure only one wickengine and preloader.js are present in that folder).

  4. Open the project in vscode and click on the HTML / Index page that needs changes and,

  5. Change the Page Title at the top

  6. Add this line just above or, below the Title,

  1. Go to line 24 (Download project) and change the name of the wick file to match the target file in your project (e.g index.wick).

  2. Disable or comment out (SHFT+ALT+A) the pre-loader on all html files in lines 28 - 30 (Hide Preloader)

                        // Hide preloader
                    document.getElementById('preloader').style.display = 'none';
                    document.getElementById('preloader').remove();

  3. Then, comment out the preloader div at the bottom of the page and, remove preload.min.js from this line,

  4. Change the background colour of the page and pre-loader to match that of the index page by editing line 53 and 69.

  5. Disable or comment out (SHFT+ALT+A) the Preloader div towards the end of the page (lines 140 to 165).

EDIT WICKENGINE.JS FILE

  1. Click the wickengine.js and type or search for “off-screen” and change the project background colour by editing the 8 values in lines 63196 - 63219 from black to grey or any colour of choice.

NB: This needs to be done on each of the wickengine.js files in each folder…!

OTHER FOLDERS:

Do the same for all files in different folders, rename your files and wick projects and use a single wickengine and preloader.js files in each folder.