Default Website Development: Difference between revisions
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) |
||
(28 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
==The default CMX website Development== |
==The default CMX website Development== |
||
These section of the Wiki will enable you to get the latest information and resources for the |
These section of the Wiki will enable you to get the latest information and resources for the alternative to the default CMX website shipped with version 3.10.x |
||
=== |
===Alternative public website=== |
||
As part of the development process, a new public website template is available which can either sit on top of of totally replace the template supplied with CumulusMX. |
|||
This will always be available to you in the 'websites' folder of your Cumulus MX Installation. However, it is not a published site until you decide to make it so. |
|||
This template introduces a number of features and/or improvements. |
|||
To publish the default website you will need a web host and a domain name that you can access. |
|||
*It is significantly more responsive - adaptable to different viewing devices |
|||
=== Publishing the Default Site === |
|||
*;All the fonts correctly scale on all browsers |
|||
To publish the site you need to upload '''ALL''' of the contents of the website folder to a location on your website. Normally this would be to the public_html folder in your control panel for your web host. However, there is nothing to stop you using a sub-folder off the public_html one. If you do this you will need to '''make a note of the folder name''' you use. |
|||
*;All tables have been removed and replaced with more flexible elements |
|||
*;Panels correctly redistribute themselves on all screens. |
|||
*Panels can be rearranged with minimal coding skills |
|||
*Different colour schemes can be applied, again with minimal coding required |
|||
** It includes a high contrast theme as well. |
|||
*It has the facility to specify a separate location for your data files |
|||
* Sub-menus can now have dividers to separate sections as required |
|||
* The mobile menu now closes sub-menus automatically when you select another sub-menu. |
|||
* '''New with this release - Lightning data for those that have the required sensor.''' |
|||
* '''This release sees some tidying up and wet bulb temperatures added (if added to website data.json)'''. |
|||
* If you are a new station, only available months on your monthly and all records pages will be accessible - the buttons will be removed. |
|||
Once you have copied all the above files, you need to configure CumulusMX to upload your data at regular intervals. |
|||
'''Download the [https://www.cumuluswiki.org/images/0/08/PublicWebsite.zip latest version here]''' (Updated: Monday 5/05/2024 14:57) - Added WetBulb data. |
|||
==== Configure CumulusMX to upload data ==== |
|||
This is done on the '''Internet Settings''' Page. |
|||
Under the Web/Upload Site' tab check the following: |
|||
* Enable Upload Connections |
|||
* Select a FTP protocol - Do this in consultation with your web host provider. |
|||
* Enter a Host name: - this will usually be your domain name without the http/https prefix. |
|||
* FTP and FTPS is usually port 21 but you should select the port in consultation with you web host provider. |
|||
* Enter the directory you wish to upload to. This will usually be public_html/ as this is where your pages are. If you have copied your pages to another location then give the path to them. |
|||
* Provide a username and password for an account that can FTP to the specified location.* |
|||
'''You can view my site using the new default templates on [https://ai2weather.uk Oaktree Weather ]. |
|||
You should not need to change either General or Advanced settings at this stage. |
|||
====Amendments since last revision==== |
|||
Under the '''Interval Configuration''' tab check the option: 'I wish to use the supplied default web site'. |
|||
# Repositioned the popups on the gauges page to be vertically centred. |
|||
This should make all the configuration changes needed but it is worth while to check: |
|||
==Installing== |
|||
Under '''Normal Interval Settings''' make sure that everything is selected and that the interval to use is what you want. |
|||
Download the current zip file to you local machine and upload it to your web server. |
|||
Under '''Real time Interval Settings''' make sure that it is enabled, that the interval in seconds is what you want and that ''''Upload'''' is enabled. |
|||
*Unzip it in the same location as your existing site - it will not overwrite the existing pages |
|||
*:The new site uses .html pages whereas the existing default site uses .htm |
|||
*; If you visit your site without specifying a page you will be taken to the new template pages, |
|||
*;Specifying a page such as index.htm will display your old template pages. |
|||
*: Please clear your browser cache before viewing. |
|||
One final task you need to complete is to enable the load of the moon image. This is on the '''Moon Image''' tab of the '''Internet Settings''' page. |
|||
===Changing where you data is found=== |
|||
You can accept the default settings unless you have copied your site to a different location. |
|||
This applies to the data used for your pages, the data used for the charts and the data used by the gauges. It does '''not''' affect your moon image or your NOAA reports. |
|||
* You will obviously need to create the required folder on your web host system. |
|||
Your site should now be functioning. However, you may wish to visit the '''Utilities''' page and initiate an FTP upload of everything. |
|||
* You need to configure CumulusMX to upload to that folder. |
|||
*: This is done on the '''Internet Settings ~ Web/Upload Site''' options under ''Remote FTP Directory''. |
|||
:; You should check that the data is being uploaded to the correct location and adjust your settings if not. |
|||
* You then need to edit the '''ws-extra.js''' file. |
|||
*: The variable on line 13 is used to point to your data so it should be the name of the folder created above with a trailing forward slash. |
|||
*;; Please note that it should be empty if your data is uploaded to the normal location. |
|||
=== |
===Your Own Pages=== |
||
'''As with previous releases, the public website template also includes a template page'''. |
|||
The template.html page is provided to make it easier for you to add your own pages while retaining the look and feel of the website. The template page is called '''template.html'''. |
|||
To enable NOAA Reports you need to visit the '''NOAA Settings page'''. |
|||
<big>Editing</big> |
|||
* Firstly check the box 'Create NOAA files after daily rollover. |
|||
The template page shows all the different column layouts that are available. These are: |
|||
* Setup your site details on the '''Site Details''' tab. |
|||
ow-oneCol, ow-TwoCol, ow-ThreeCol, ow-FourCol, ow-FiveCol and ow-SixCol |
|||
* Under '''Report Options''', configure the settings that suit you. |
|||
* Under '''Upload Options''' either accept the default location which is Reports/ or specify a location based on where you upload your data. To avoid issues always name this <somewhere>/Reports/ |
|||
: These will always try to display the indicated number of columns but as the screen becomes small will automatically collapse into fewer columns as appropriate. |
|||
Finally you need to dose research to find out the '''Normal Mean Temperatures''' and '''Normal Precipitation''' for your location. These values need to be entered into the appropriate boxes under the respective tabs. |
|||
:; If there are more panels than columns they will gracefully split onto additional rows while retaining their column settings. |
|||
:; Rows with fewer panels than columns will centre panels up to the stated number of column. |
|||
If you decide '''NOT''' to generate NOAA Reports then you need to edit the ''menu.js'' file uploaded to your web host. See below: |
|||
==Editing the website menu== |
==Editing the website menu== |
||
The website menu is held in the file ''menu.js''. |
The website menu is held in the file ''my-menu.js''. This ensures that it does not conflict with the existing menu. |
||
It is now possible to add dividing bars to sub-menus as well as extra menu items. The menu is shown below: |
|||
<nowiki> |
|||
menuSrc = [ |
|||
{title: "Dashboard", menu: "b", url: "index.html"}, |
|||
{title: "Today", menu: "b", url: "today.html"}, |
|||
{title: "Yesterday", menu: "b", url: "yesterday.html"}, |
|||
{title: "Today-Yest", menu: "b", url: "todayVyest.html"}, |
|||
{title: "Gauges", menu: "b", url: "gauges.html"}, |
|||
{title: "Records", menu: "b", submenu: true, items: [ |
|||
{title: "This Month<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsthismonth.html"}, |
|||
{title: "This Year<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsthisyear.html"}, |
|||
{title: "All Time<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsalltime.html"}, |
|||
{title: "Monthly<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsmonthly.html"}, |
|||
{title: "", menu: "b", url: "#"}, |
|||
{title: "All records<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "records.html"} |
|||
]}, |
|||
{title: "Charts", menu: "b", submenu: true, items: [ |
|||
{title: "Trends<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartstrends.html"}, |
|||
{title: "Select-a-graph<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartsselect.html"}, |
|||
{title: "Historic<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartshistoric.html"} |
|||
]}, |
|||
{title: "Reports", menu: "b", url: "noaareports.html"}, |
|||
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true}, |
|||
{title: "Webcam<i class='fa-solid fa-camera'></i>", menu: "b", url: "#", webcam: true} |
|||
]; |
|||
</nowiki> |
|||
'''Things to note''' |
|||
* It is possible to use ''Font-Awsome'' icons in the menu |
|||
*; You don't need to add sub-menu indicator icons as this is embedded in the code. |
|||
* You can add menu dividers to the sub-menus by adding an entry as shown below: |
|||
'''{title: "", menu: "b", url: "#"}''' |
|||
*; It can be placed in both menus, only the full screen menu or the mobile menu as required. |
|||
====Other changes==== |
|||
The mobile menu now collapses correctly if you select a different sub-menu - you don't have to close a submenu manually before you open another one. |
|||
==Changing the Theme and Other Settings== |
|||
This template comes with 33 themes to enable you to personalise the public website. Sixteen of these are light, 16 are dark and one is a high contrast theme. They are all located in the /themes folder. |
|||
To change the theme you will need to edit the page-manager.js file located in the 'js folder. The pertinent section is shown below: |
|||
<nowiki> |
|||
Menu configuration file for NEW CuMX template |
|||
let CMXConfig = { |
|||
Last modified: 2022/07/05 11:39:38 |
|||
'Theme': 'Nebulas-Blue', |
|||
menu.js - typical name, you define the one used in setpagedata.js<br> |
|||
'StaticHead': true, |
|||
It is STRONGLY RECOMMENDED that if you customise this file, you create a new file with a different name, e.g. mymenu.js |
|||
'StaticFoot': true, |
|||
and change setpagedata.js to use that file. This will avoid your customisations being accidentally overwritten during upgrades<br> |
|||
'Units': 'vh', |
|||
Properties: |
|||
'PaddingTop': 2, |
|||
.title - This is the text that appears in the menu bar. |
|||
'PaddingBottom': 1, |
|||
.menu - can be 'b' (both menus), 'w' (wide menu ONLY), 'n' (narrow [mobile] menu ONLY) |
|||
'Seagull': { |
|||
.new_window:true - forces the link to open in new browser window |
|||
'Animation': '', |
|||
.url - This is the address of the page. if it is to an external page on another site it must include the full url |
|||
'Duration': 5, |
|||
The two entries that are '#' are special and are configured by the website. |
|||
'OnTop': true |
|||
.forum:true - flags a forum link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden |
|||
}, |
|||
.webcam:true - flags a webcam link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden |
|||
'Version': 3.0 |
|||
}</nowiki> |
|||
This is located at the start of the file between lines 9 and 22. Do '''not''' edit anything else as you will in all likelihood break the site. |
|||
some text |
|||
menuSrc = [ |
|||
{title: "Now", menu: "b", url: "index.htm"}, |
|||
{title: "Today:, menu: "b", url: "today.htm"}, |
|||
{title: "Yesterday", menu: "b", url: "yesterday.htm"}, |
|||
{title: "Today-Yest", menu: "b", url: "todayyest.htm"}, |
|||
{title: "Records", menu: "b", submenu: true, items: [ |
|||
{title: "This Month", menu: "b", url: "thismonth.htm"}, |
|||
{title: "This Year", menu: "b", url: "thisyear.htm"}, |
|||
{title: "All Time", menu: "b", url: "record.htm"}, |
|||
{title: "Monthly", menu: "b". url: "monthmlyrecords.htm"}, |
|||
]}, |
|||
{title: "Charts", menu: "b", submenu: true, items: [ |
|||
{title: "Trends", menu: "b", url: "trends.htm"}, |
|||
{title: "Select-a-graph", menu: "b", url: "selectchart.htm"}, |
|||
{title: "Historic", menu: "b", url: "historic.htm"}, |
|||
]}, |
|||
{title: "Reports", menu: "b", url: "noaareport.htm"}, |
|||
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true}, |
|||
{title: "Webcam", menu: "b", url: "#", webcam: true} |
|||
]; |
|||
===Theme=== |
|||
* If you want to change the language, simply enter translations for the titles only. |
|||
The available themes are: |
|||
* If you want to add an entry copy the entry above and edit it as required. |
|||
<nowiki> |
|||
* To create a whole new sub-menu, copy and paste either the section that starts with the '''title: "Records"...''' or '''title: "Charts"...''' and then edit as required. |
|||
Arcadia, Arcadia-Dark, Cherry-Tomato, Cherry-Tomato-Dark, |
|||
Chili-Oil, Chili-Oil-Dark, Crocus-Petal, Crocus-Petal-Dark, |
|||
Cylon-Yellow, Cylon-Yellow-Dark, Dark-Grey, Dark-Grey, |
|||
Emporador, Emporador-Dark, High-Contrast, |
|||
Lime-Punch, Lime-Punch-Dark, Marsala, Marsala-Dark, |
|||
Martini-Olive, Martini-Olive-Dark, MeerKat, MeerKat-Dark, |
|||
Nebulas-Blue, Nebulas-Blue-Dark, Red-Pear, Red-Pear-Dark, |
|||
Russet-Orange, Russet-Orange-Dark, Spring-Crocus, Spring-Crocus-Dark, |
|||
Valiant-Poppy, Valiant-Poppy-Dark</nowiki> |
|||
Any of these can be used but be careful not to disrupt the formatting - It must be in quotation marks and the whole entry must be followed by a comma. |
|||
==An Alternative Default Website== |
|||
===Other Settings=== |
|||
Following on from the development of the current default website, the author of the default website has generated an alternative that is more adaptable and responsive. |
|||
====Layout==== |
|||
The next '''FIVE''' options affect the overall layout of the pages. |
|||
* Static Header |
|||
*; By default the header will stay at the top of the page when long pages are scrolled. |
|||
*: If you prefer to have it scroll, then set '''StaticHead''': false, |
|||
* Static Footer |
|||
*; By default the footer will always stay at the bottom of your screen regardless of the length of the page. |
|||
*: If you want it to scroll then set '''StaticFoot''': false, |
|||
* Units to use for gaps |
|||
*; By default the site uses responsive units to adjust the gap between the header content and footer. |
|||
** You can use '''vh''' which ties the gap units to a percentage of the screen height |
|||
** You can use '''em''' which ties the gap to the height of the font (which is responsive), or |
|||
** You can use '''px''' which is a fixed height based on the resolution of your browser/screen. |
|||
* Gap between header and page content |
|||
*; Any positive value can be used but if using pixels, it must be an integer. |
|||
* Gap between page content and footer |
|||
*; As for above. |
|||
====The Seagull==== |
|||
It is designed to work on all screen sizes while using exactly the same data that is uploaded to the default website. |
|||
The seagull is a fixture on your screen. By default it fades in over two seconds. However, you can use a different animation if you prefer. The available animations are: |
|||
* Float down - the seagull will fall from the top of the screen and grow as it does so until it sits on the footer. |
|||
*: Set ''''Animation'''': 'FloatDownLeft', |
|||
* Slide across screen - the seagull will slide in for the side of the screen along the footer. |
|||
*: Set ''''Animation'''': 'slideLeft', |
|||
* Appear - the default animation. |
|||
*: Set ''''Animation'''': 'appearLeft', |
|||
** If you set this animation then you can also adjust the default animation speed to zero to stop the animation completely. |
|||
* Duration - this adjusts the time taken for the animation in seconds. Decimal numbers are allowed. |
|||
It allows your data to be sent to its own sub-folder of the site rather than mixing in with the web pages so makes it easier to manage. It comes with a number of themes or colour schemes that you can implement as required. |
|||
* Stay on Top - The seagull can be made to stay on top of your page content or hide behind it. This only applies if the screen is narrower than apron 1200px. |
|||
To find out more please visit the [[Alternative Public Website]] page. |
|||
==Changing other features== |
|||
==An Alternative Interface== |
|||
In order to change other features you will need to edit the html of the pages. As this is a more involved task it is covered on a second page. |
|||
In addition to the existing Interface site used for managing your weather station, an additional Alternative Interface is also available from the author of the default website. |
|||
To learn about editing the html please visit: [[Editing website pages]] |
|||
Details of this can be found here: [[Alternative_Interface|Alternative Interface]]. |
Latest revision as of 12:18, 8 September 2024
The default CMX website Development
These section of the Wiki will enable you to get the latest information and resources for the alternative to the default CMX website shipped with version 3.10.x
Alternative public website
As part of the development process, a new public website template is available which can either sit on top of of totally replace the template supplied with CumulusMX.
This template introduces a number of features and/or improvements.
- It is significantly more responsive - adaptable to different viewing devices
- All the fonts correctly scale on all browsers
- All tables have been removed and replaced with more flexible elements
- Panels correctly redistribute themselves on all screens.
- Panels can be rearranged with minimal coding skills
- Different colour schemes can be applied, again with minimal coding required
- It includes a high contrast theme as well.
- It has the facility to specify a separate location for your data files
- Sub-menus can now have dividers to separate sections as required
- The mobile menu now closes sub-menus automatically when you select another sub-menu.
- New with this release - Lightning data for those that have the required sensor.
- This release sees some tidying up and wet bulb temperatures added (if added to website data.json).
- If you are a new station, only available months on your monthly and all records pages will be accessible - the buttons will be removed.
Download the latest version here (Updated: Monday 5/05/2024 14:57) - Added WetBulb data.
You can view my site using the new default templates on Oaktree Weather .
Amendments since last revision
- Repositioned the popups on the gauges page to be vertically centred.
Installing
Download the current zip file to you local machine and upload it to your web server.
- Unzip it in the same location as your existing site - it will not overwrite the existing pages
- The new site uses .html pages whereas the existing default site uses .htm
- If you visit your site without specifying a page you will be taken to the new template pages,
- Specifying a page such as index.htm will display your old template pages.
- Please clear your browser cache before viewing.
Changing where you data is found
This applies to the data used for your pages, the data used for the charts and the data used by the gauges. It does not affect your moon image or your NOAA reports.
- You will obviously need to create the required folder on your web host system.
- You need to configure CumulusMX to upload to that folder.
- This is done on the Internet Settings ~ Web/Upload Site options under Remote FTP Directory.
- You should check that the data is being uploaded to the correct location and adjust your settings if not.
- You then need to edit the ws-extra.js file.
- The variable on line 13 is used to point to your data so it should be the name of the folder created above with a trailing forward slash.
- Please note that it should be empty if your data is uploaded to the normal location.
Your Own Pages
As with previous releases, the public website template also includes a template page.
The template.html page is provided to make it easier for you to add your own pages while retaining the look and feel of the website. The template page is called template.html.
Editing The template page shows all the different column layouts that are available. These are:
ow-oneCol, ow-TwoCol, ow-ThreeCol, ow-FourCol, ow-FiveCol and ow-SixCol
- These will always try to display the indicated number of columns but as the screen becomes small will automatically collapse into fewer columns as appropriate.
- If there are more panels than columns they will gracefully split onto additional rows while retaining their column settings.
- Rows with fewer panels than columns will centre panels up to the stated number of column.
The website menu is held in the file my-menu.js. This ensures that it does not conflict with the existing menu.
It is now possible to add dividing bars to sub-menus as well as extra menu items. The menu is shown below:
menuSrc = [ {title: "Dashboard", menu: "b", url: "index.html"}, {title: "Today", menu: "b", url: "today.html"}, {title: "Yesterday", menu: "b", url: "yesterday.html"}, {title: "Today-Yest", menu: "b", url: "todayVyest.html"}, {title: "Gauges", menu: "b", url: "gauges.html"}, {title: "Records", menu: "b", submenu: true, items: [ {title: "This Month<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsthismonth.html"}, {title: "This Year<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsthisyear.html"}, {title: "All Time<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsalltime.html"}, {title: "Monthly<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsmonthly.html"}, {title: "", menu: "b", url: "#"}, {title: "All records<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "records.html"} ]}, {title: "Charts", menu: "b", submenu: true, items: [ {title: "Trends<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartstrends.html"}, {title: "Select-a-graph<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartsselect.html"}, {title: "Historic<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartshistoric.html"} ]}, {title: "Reports", menu: "b", url: "noaareports.html"}, {title: "Forum", menu: "b", url: "#", forum: true, new_window: true}, {title: "Webcam<i class='fa-solid fa-camera'></i>", menu: "b", url: "#", webcam: true} ];
Things to note
- It is possible to use Font-Awsome icons in the menu
- You don't need to add sub-menu indicator icons as this is embedded in the code.
- You can add menu dividers to the sub-menus by adding an entry as shown below:
{title: "", menu: "b", url: "#"}
- It can be placed in both menus, only the full screen menu or the mobile menu as required.
Other changes
The mobile menu now collapses correctly if you select a different sub-menu - you don't have to close a submenu manually before you open another one.
Changing the Theme and Other Settings
This template comes with 33 themes to enable you to personalise the public website. Sixteen of these are light, 16 are dark and one is a high contrast theme. They are all located in the /themes folder.
To change the theme you will need to edit the page-manager.js file located in the 'js folder. The pertinent section is shown below:
let CMXConfig = { 'Theme': 'Nebulas-Blue', 'StaticHead': true, 'StaticFoot': true, 'Units': 'vh', 'PaddingTop': 2, 'PaddingBottom': 1, 'Seagull': { 'Animation': '', 'Duration': 5, 'OnTop': true }, 'Version': 3.0 }
This is located at the start of the file between lines 9 and 22. Do not edit anything else as you will in all likelihood break the site.
Theme
The available themes are:
Arcadia, Arcadia-Dark, Cherry-Tomato, Cherry-Tomato-Dark, Chili-Oil, Chili-Oil-Dark, Crocus-Petal, Crocus-Petal-Dark, Cylon-Yellow, Cylon-Yellow-Dark, Dark-Grey, Dark-Grey, Emporador, Emporador-Dark, High-Contrast, Lime-Punch, Lime-Punch-Dark, Marsala, Marsala-Dark, Martini-Olive, Martini-Olive-Dark, MeerKat, MeerKat-Dark, Nebulas-Blue, Nebulas-Blue-Dark, Red-Pear, Red-Pear-Dark, Russet-Orange, Russet-Orange-Dark, Spring-Crocus, Spring-Crocus-Dark, Valiant-Poppy, Valiant-Poppy-Dark
Any of these can be used but be careful not to disrupt the formatting - It must be in quotation marks and the whole entry must be followed by a comma.
Other Settings
Layout
The next FIVE options affect the overall layout of the pages.
- Static Header
- By default the header will stay at the top of the page when long pages are scrolled.
- If you prefer to have it scroll, then set StaticHead: false,
- Static Footer
- By default the footer will always stay at the bottom of your screen regardless of the length of the page.
- If you want it to scroll then set StaticFoot: false,
- Units to use for gaps
- By default the site uses responsive units to adjust the gap between the header content and footer.
- You can use vh which ties the gap units to a percentage of the screen height
- You can use em which ties the gap to the height of the font (which is responsive), or
- You can use px which is a fixed height based on the resolution of your browser/screen.
- Gap between header and page content
- Any positive value can be used but if using pixels, it must be an integer.
- Gap between page content and footer
- As for above.
The Seagull
The seagull is a fixture on your screen. By default it fades in over two seconds. However, you can use a different animation if you prefer. The available animations are:
- Float down - the seagull will fall from the top of the screen and grow as it does so until it sits on the footer.
- Set 'Animation': 'FloatDownLeft',
- Slide across screen - the seagull will slide in for the side of the screen along the footer.
- Set 'Animation': 'slideLeft',
- Appear - the default animation.
- Set 'Animation': 'appearLeft',
- If you set this animation then you can also adjust the default animation speed to zero to stop the animation completely.
- Duration - this adjusts the time taken for the animation in seconds. Decimal numbers are allowed.
- Stay on Top - The seagull can be made to stay on top of your page content or hide behind it. This only applies if the screen is narrower than apron 1200px.
Changing other features
In order to change other features you will need to edit the html of the pages. As this is a more involved task it is covered on a second page.
To learn about editing the html please visit: Editing website pages