Demo

Download

Blocks

Plugins

Blog

Extras

Forum

Bugs/Suggestions

Translations

Users
Meteotemplate WIKI
A - Introduction
B - Download
C - Configuration
D - Data Import
E - Updates Setup
F - Control Panel and Homepage
G - Customization
H - Glossary
I - About
J - Videos
K - API
FAQ

G. Customization

You are now almost done, it is time to further tweak and customize your template.

Getting to Know Meteotemplate

Plugins

Once your homepage is ready, your template is in the default state - i.e. it includes all the main pages that are same for everyone. However, there are tens of different plugins for you to choose from, which will add additional functionality and pages to your template. Think of plugins as add-ons. Unlike the homepage blocks, plugins are not on your homepage, they are separate pages that appear in your menu. Simply go to the Plugins section and choose the one you want. In this section, each plugin has three links - one points to the demo at meteotemplate.com. The Demo at meteotemplate.com has all the plugins installed so you can easily look and try it yourself before installing it. The second link points to the download file. The last link, the info icon, is a documentation page, which describes each plugin in detail. This description includes not just a list of features, but also instructions how to install it.

Most plugins are extremely easy to install, you just download the plugin package, extract it and upload it to your server. There is only one very important thing to remember. All your plugins MUST be uploaded to the plugins directory in your template root folder. In other words, each plugin will have its own folder in the plugins directory. This is important because the plugins use the settings from setup.php and the paths would otherwise not work.

A few general comments about plugins.

  • all plugins must be placed in a separate directory in the plugins directory of the template
  • plugins are linked with the rest of the template and will therefore use the settings specified in setup.php - colors, fonts, language etc.
  • the plugins are NOT stand-alone scripts and will not work outside Meteotemplate as they also use many functions that are part of the main Meteotemplate package
  • once you install a plugin, you will only have to put a link in your menu (how menu works is described further down on this page).
  • plugins have their own versioning and are released and updated separately from the template

Once you download the plugin and upload it to your Plugins directory, they work pretty much the same way as blocks. There is a Plugin setup page in the Control panel, where you see the current version, the latest version, a link to update if necessary and most importantly, a Settings link if any setting is required. If so, then just click it, follow the instructions and you will this way create the necessary settings file. Then, whenever you want to change the settings, you can do so by simply going back to this page and clicking Settings again. This will overwrite your original setting. When you are updating a plugin (if you do it manually), it is important to always replace all the files, just not the settings.php file. This file is not even included in the update, this file was created later after you uploaded the Plugin, by going through the Settings for that plugin. However, it means you cannot update a plugin by simply deleting the original folder and replacing it. If you do this, you would lose your previous settings and have to go through the process of setting it up again. However, you should still go through the Settings every time you update a plugin which has this link. Why? Simply because there might be some new parameters introduced that you must specify and create a new settings file. However, if you did not delete your original settings, then that would already be prefilled, so you always have to set up something only if it is new.

Custom Pages

Next step is adding custom pages. This of course is optional, but it is very easy to add your own custom pages to the template. Simply go to your control panel and click the "Custom pages" link in the top right Administration section.

In version 11.0 Passion Fruit, a completely new way of working with the menu was introduced. You can now fully edit it and customize it from your template control panel. Make sure you read very carefully how it works so that you are able to use it to its full potential. The text below will guide you step by step through the process of creating and editing the menu and also includes examples.

The very first step is to go to your Meteotemplate control panel and click the menu icon, which will get you to the menu setup page.

At the top you will see two buttons: "Generate Default Menu" and "Check Menu".

  • generate default menu - this button is quite self-explanatory. Once you click it, the template will generate the default menu, which will include links to all the core pages of the template, which are included in the main download file. This means that it does NOT include links to any plugins. The very first time you create the menu, this is how you should start - create the default menu and then add whatever plugins or other links you want. You can also use this button any time in the future and it will reset whatever menu you have at that moment and create again the default one with just the links to all core pages.
  • check menu - this button "checks" your menu. What this means is that it will check if you have anything installed, but not included in the menu. This is how it works: the script has a list and knows about all the pages which are included in the main template file and which therefore is included on everyone's site. It therefore scans whatever menu you currently have and checks if all the items are there. If not, it will give you a warning. This warning will not change anything, it is only to tell you: "you are missing a link to page XYZ, which is part of the default template". It could of course be that you intentionally deleted this link from the menu, in which case you would obviously ignore this. Or it could be that you really forgot about something, in which case you know exactly what to add. It will then do the exact same thing with the Plugins folder - it will check all the plugins you have installed on your site and warn you if there are any plugins not referenced in the menu. Please note: it will also show you names of plugins which are not really meant to be included in the menu - for example the Stickers, the WU upload, the other upload plugins like the one for NetAtmo, WeatherCat or WeatherLink. In this case obviously you know that the fact it is missing from the menu is ok. But it could of course be that there are also some other plugins which you simplu forgot to include and this page will remind you about this.

Now let's start the easy way - click the Generate Default Menu button and the page should create a menu with all the default pages included (not including plugins). You will get an alert warning you that it will reset your existing menu, you can ignore it for now, you currently don't have any menu so it will just create a new one. Also, once this is done, you might have to refresh the page.

OK, so now we have the default menu so let's start customizing it. Ideally you should now see rows that correspond to the main tabs on the menu. Also notice that the menu even in the admin page already includes the new default elements - this is a good way of checking, your menu in the admin section is the same as what you will later see on the actual public site.

Each row is one tab and on the right you will see three icons - the first one "settings" is for specifying the actual items in that tab. The second one - "edit" - is for changing the tab name or its icon (the large icon visible on the left if you open that particular tab). And finally an icon that when clicked will delete that tab including all the items in it.

Right now you probably see the default tabs - weather station, weather, climate etc. Before we start editing them, let's just try creating one new main tab. This is done in the section below the tabs, where it says "Add New Tab". Here you have to fill in three fields, read this carefully:

  • tab text - this is the text shown on the tab, i.e. its name. One thing you should remember - it is ideal if you use English word for this. This is because the template will try to translate this string automatically. So, let's assume you are using the template in Czech. In Czech, the word "weather" is "počasí". If I put in "počasí", this string is not in the language database so in such case, the template will simply show the word as it is. However, if instead I put in "weather", this string is in the language database so if your template is set to Czech language, you will also see "počasí", but users who change the language of your template, will see it in whatever language they choose. So someone might see "weather", while a different person who sets language to let's say Spanish, will see "tiempo". It is also very important to note that the language strings for translation should be entirely lowercase, the template will then capitalize them automatically where necessary - so "weather", not "Weather". It is also possible to use an icon. Remember that this sets the icon for the menu you see when the tab is closed. The large icon you see in the actual menu tab when opened is specified as the third parameter (see below).
  • namespace - think of this as the label for the tab for the template. This will actually not be displayed anywhere on the page, it will only be for the template code. The reason you have this is because if for example you used spaces for the name - eg. "weather station" - this will cause problems if it was the name of the actual variable used in the code. So for the namespace, simply put some label, ideally for example "weatherStation" or "weather_station", it could even be "tab1", it does not really matter, only keep in mind 2 things: it must use only English alphanumeric symbols, it must not start with a number and it must not contain spaces. And also make sure you never create two tabs with the same namespace, that will not work.
  • icon namespace - the large icon you see when the corresponding menu tab is opened. This is now very important. In version 11, I completely restructured the icons. They are no longer images, but instead they are SVG graphics in the form of a font. This has many advantages such as faster loading, indefinite scaling possibilities, possibility of coloring the icons etc etc. You do not have to worry about that now. For now, it is just important to understand this concept: there are two "fonts", which are not really letters, but symbols. First one is the well-known Font Awesome, the most popular used symbol font, used widely on the internet by all the major sites. The other font is "Meteotemplate font" - font I created with some extra symbols that are not normally included in the Font Awesome set and are related to weather etc. What you need to do is specify the namespace (class) of the icon you want to use. So, first click the link "here" in the description of this field. This will show you a page of all the available icons you can use. At the top you will see the icons from the Meteotemplate font. Below that are icons from the Font Awesome font. Now, here is the syntax for specifying which icon you want:
    • icon from the Meteotemplate set - put "mticon-" followed by the icon name given below the icon.
      Examples:
      mticon-davispro2
      mticon-gauges
      mticon-weather
    • icon from the Font Awesome set - put "fa fa-" followed by the icon name given below the icon.
      Examples:
      fa fa-image
      fa fa-external-link
      fa fa-plane

OK, now let's try creating our new tab. Specify the name, the name space and the icon and click "Add". Hopefully you should now see your new tab at the bottom of the table with the tabs above the Add new tab section. OK, so we have that, however, what if we want the tabs in a different order. What if we want our newly created tab to be between the weather and the climate tabs. This is of course possible. One thing to note: first in the menu is always the "home" button link and likewise, the last tab is always automatically the admin tab. The Admin tab is not listed in your tab list and is always added automatically and includes links to some of the admin actions. Your users will not see this tab, it is only displayed if you are logged in as an admin, so don't worry about this one.

In order to change the tab order, you use the tab buttons below the "Add" button you just used to create the new tab. Let's say we now want to move the new tab between the weather and climate tabs. Just hover over the tab button and simply click with the mouse, drag the button and drop it wherever you want to. Then you can re-arrange the other tabs in a similar way. Once you are happy with the order, click the Save order button. Now, please note: the list of the tabs on this page (where you can delete it, edit it or rename it) simply goes by the order in which the tabs were created. But your tab order in the menu should now correspond to whatever you specified in the tab order row. So if you dragged the new tab between weather and climate tabs, it will still be last in your tab list because it was created last, but in the actual menu you should see the tabs in the correct order you wanted.

Right, now you know how to create/delete tabs and how to change their order, so the next step is to actually set their content. For this you need to click the Edit icon next to each tab on the right in the tab list. You now see a page with a textarea at the bottom, where you specify how and what links you want to have in the menu.

Each link/command is on a new line and in general there are four types of possible links/commands:

  • link to a default template page - link to pages, which are by default in the template and this should be automatically created via the Generate default menu button
  • link to a plugin - this is a link to a plugin you installed and should be relatively easy to do as lot of it is automated as you will see later
  • custom link - you can insert any link to your menu and assign an icon to it
  • special command - this is not really a link, but rather a syntax command which does something in the menu (again, you will see what I mean later)

Let's start with the commands as that is how you structure the tab. As you can see if you open some of the tabs, there are "sections" or you could also call them "columns" in each tab. You can create as many columns in the tab as you like, but obviously keep in mind that it should not be too many because it needs to fit the page width. What this means is that the links under each tab can be arranged in several columns in that tab. Because you created the default menu, you should already have the default links and it should also help you to understand how to write the commands and links.
To create a column, you always have to write

		>>>
	

this >>> has to be on a separate line, nothing else can be on that line.
Let's say you want to have a tab with links in three columns, you would then use:

		>>>
		column1 content
		>>>
		column2 content
		>>>
		column3 content
	

Before we continue, let me again emphasize one thing - the template will try to translate all names of sections, links etc. If the string is found in the language database, it will be translated, if not, it will show whatever you typed as it is. However - this means you should write all link names, section names etc. in lowercase. The template will auto-capitalize it and it is necessary for the translation mechanism to work. Any capitalization directly in the name will be ignored.

OK, so we know how to create columns, but now we have to learn how to add content to our tab columns. Anywhere in the menu you can place a heading. A heading is not a link, it does not link to any page, it is simply a heading with a slightly bigger font. This heading can be placed at the top of each column, or anywhere below, you can have more headings in the column. Just so you know what I am talking about - if you look at your default menu, open the Weather Station tab and you will see this tab is arranged into 3 columns. And in column one there are four headings - Live, Interactive Views, Reports and Trends. These cannot be clicked and they appear bigger and are in bold. So to create a section heading, you use this syntax (command):

		>> heading1
	

Unlike the column command (>>>), here you use >> and then followed by a space and the text of the heading (again, remember this will be translated if possible, so use lowercase). Just to recap, let's see what it would look like if we wanted 2 columns and in each column 2 headings:

		>>>
		>> column1 heading1
		.....
		>> column1 heading2
		.....
		>>>
		>> column2 heading1
		.....
		>> column2 heading2
		.....
	

In the above example, the dots (......) simply mean that is where you will put the links (explained below). There is one more important thing to note, the >> command can also be used to insert a blank line in the menu. Imagine you do not want to have any heading, but want to create a blank line in the menu to separate the links. In such case, simply use the >> symbol on a separate line and do not give any heading text, like this:

		....
		>>
		....
	

Again, to see what I mean, look at the Weather Station tab and look at column three. You will see a blank line between Rain Seasons and Calendar. This is created using the >> on a separate line, not providing any heading. In the default menu it is for example also used when you want to create a bit more space at the top of the new column, you then simply create a new column and place this right at the top as the first command, like this:

		>>>
		>>
		.....
	

In addition to headings you can also use subheadings. These are very simply to use, instead of >> you just use >-

		>>>
		>> Heading
		>- Subheading
	

Last command you can use is a command that will insert a horizontal line, sort of another alternative for a separator. To do this, you have to specify the separator command and give the width. This width is the width of that column that this separator should span. The line will be drawn from left to right, if you put 50, it will go from left to write and stop in the middle of the current menu column width. If you want the line to span the entire column width, you use 100 (or you simply do not specify anything, if you only use -- it will use 100% as default). The syntax is as follows:

		-- 50
		-- 100
		-- 80
	

Now we finally get to the content of these tabs. So, let's start with the default pages. When you want to insert link to one of the default pages of the template, you simply put:

		#default(xxxxx)
	

In this example, the xxxxx stands for the namespace of that page. Each default page has its namespace. If you generated the default menu, you will have all these pages inserted in the menu already, so if for example you want to move one default link to a different tab, simply find it in the already existing syntax and see what the namespace for that particular page is and copy/paste it to the new location. The namespace should be pretty much self-explanatory and you will understand which page it refers to, examples:

  • #default(currentData) - current live data
  • #default(reports) - reports
  • #default(statisticsNight) - night statistics

Now, normally, for each link in the menu you have to specify three things: the URL of the page to which you want it to link, the actual text of that link and last, the icon next to this link. However! If you use the above syntax, the template will automatically use the appropriate URL, it will use the correct text for that page (which is desirable because it will use the standardized text, which is also present in the language database so your menu will be localized) and it will choose the appropriate icon. But! Just in case you really wanted to, you could achieve the same result by using a normal link syntax (explained later), where you would use the page URL, and in such case you could customize the text or icon should you want to.

Now let's move on to the plugins. This works in a pretty much same way, to create a link to a plugin, you use this:

		#plugin(xxxxx)
	

Each plugin has a namespace (provided in each plugin's documentation) and that is what you put instead of the xxxx.

  • #plugin(apparentTemp) - link to Apparent temperature (feels like) plugin
  • #plugin(solarSystem) - link to the Solar system plugin
  • #plugin(co2) - link to the CO2 plugin

Just like in case of the default pages, the template knows what plugins exist and it will automatically generate the correct URL, text and icon. But, you can again use the normal link syntax (explained below) if you for some reason wanted to further customize this.

Now, this is very important!!! For the above syntax to work, it means that the template has to have a list of all the available plugins, so that it can identify it and know what is the correct URL and which icon and text for the link to use. This means that after you install any new plugin, you have to update your menu.php. The menu.php is always updated when a new plugin is released and can be downloaded separately in the Downloads section or, starting from version 14, it can also be done automatically directly from your admin tab in the menu. HOWEVER!!! This means the new menu.php needs to be downloaded from my server at meteotemplate.com. Some servers might have problems with communicating with my server, especially https sites. So you need to check that the menu was actually updated and if not, simply do it manually by downloading it from the Downloads section at meteotemplate.com (click Menu on the left) and replacing just the menu.php manually in your template root folder. It is located directly in the root folder of your template. So the procedure is as follows - once you download a new plugin, you upload it, set it up via the control panel if necessary and then you add link to it in your menu. But for the above syntax to work, you have to update your menu.php because your old menu.php does not contain information about the new plugin. This only applies to NEW plugins. When you first install the template, your template will already include the menu.php, which will include links to all plugins that were available at the moment of this version release. So this is only necessary for either brand new plugins or recently released new plugins. Nevertheless, if you wanted to, as I explained earlier, you could use the syntax for normal link, which means you would not need to update your menu, but you would have to specify the URL, icon and text yourself.

So now we get to what I already mentioned above. You can put a link to any URL in your menu. In such case, you need to provide three pieces of information: the actual URL to link to, the text of that link and the icon that is displayed next to it. These should be separated by the "|" symbol, so the general syntax for a link looks like this:

		text|link|icon
	

Let's go through each of the above:

  • text - this is the actual text displayed in the menu, which when clicked will redirect you to the link specified. You should again use lowercase text and if possible the template will translate it - there is lot of words in the language database so it might actually be able to translate it even though this is your custom text, if not, it will simply show the text as it is.
  • link - this is the link to which you want the link to point. Note!!! It is absolutely essential that you include the http:// or https:// in the link, unless you are pointing to a page on your server. This means that "www.meteotemplate.com" will NOT work. You have to use "http://www.meteotemplate.com". If your link does not have http or https at the front, the template will auto-insert the path to your template, so it might not work as expected.
  • icon - here you have several options.
    • custom icon - you can use your own link, in which case you would provide URL of the icon image (again, making sure you use the full URL that includes http/https).
    • flag - if you want to insert a flag of some country (ideal for some plugins etc), you simply put "flag(xx)" where the xx is the ISO-2 code of that country in lowercase. So if you want to insert the Czech flag, you would simply put flag(cz). The flag image will be pulled from the flag images that are part of the template.
    • built-in icon - last option is to use on of the built-in icons. You have already seen these icons when you were selecting the icon for the tabs. You can use any icon from the Meteotemplate icon set or the Font Awesome icon set and you again use the same syntax as before. Open a new tab in your browser and go to the icon page of your template, which is found at ..../admin/menu/menuIcons.php. Here choose an icon from either the Meteotemplate icon set, or the Font Awesome icon set. Then look carefully at the name of that icon and based on which set you chose, either use "mticon-xxxxxxx" or "fa fa-xxxxxxx".
  • blank - optionally you can provide a fourth parameter "blank" at the end of the string, which means that the link will open in a new browser tab

Now time for some examples:

		meteotemplate|http://www.meteotemplate.com|mticon-logo
	

The above will create a link with the text "Meteotemplate", link to http://www.meteotemplate.com and use the logo icon from the Meteotemplate icon set.

		wxforum|http://www.wxforum.net|fa fa-commenting|blank
	

This is the same as the first example, but in this case the link will open in a new browser tab.

		wxforum|http://www.wxforum.net|fa fa-commenting
	

The above will create a link with to the WxForum and use the "commenting" icon from the Font Awesome icon set.

		my link|http://www.meteotemplate.com|http://www.mysite.com/myicon.png
	

The above will create a link with the text My link, pointing in this case to meteotemplate.com and as an icon, it will use image from URL http://www.mysite.com/myicon.png.

Now last feature of the menu. It is possible to place a pulsating "New" label to any of the links. So whenever you add a new link to the menu and you want to have the label "New" next to it (the word "new" will be translated to whatever language you have set), you simply use (new) at the end of that link, here are some examples:

		#default(calendar) (new)
		#plugin(diary) (new)
		meteotemplate|http://www.meteotemplate.com|mticon-logo (new)
	

Last thing, just to recap. You might be thinking to yourself why you still need to update the menu.php if you add the links yourself. Technically you don't have to, however, if there is a new plugin released, if you update your menu.php you can use the syntax #plugin(...), if not, then you would have to use the new plugin as your custom link, where you would provide the full link to the plugin landing page as well as icon etc. Which also means that if for example you don't like the default icon I chose for some plugin, you simply do not use the #plugin(...) syntax, but use the plugin as a custom link, where the icon and text will be up to you and for the URL you would use something like http://www,......./plugins/.../index.php.

Keyboard Shortcuts

In the Main setup you can enable keyboard shortcuts. If you do this, you can use several key combinations to trigger specific action, here is a list of what the available shortcuts are:

  • ALT+C - anywhere on the site, redirects to main control panel
  • ALT+D - anywhere on the site, redirects to desktop homepage layout setup
  • ALT+M - anywhere on the site, redirects to mobile homepage layout setup
  • ALT+P - anywhere on the site, redirects to menu setup
  • ALT+S - save, some pages with "save button" (block settings page, plugin settings page etc.)

Languages

Now you should learn how languages are handled by the template. In the setup.php you specified which language you want to use by default. If your language is not available, send me an email and indicate if you are willing to help with the translation. I am quite happy to add it. I strongly recommend you look at the Translations section at meteotemplate.com. There you can learn more about how translating works, submit your own translations and can also download the most up-to-date language strings. The only important thing to note is that every time you download a language strings file, it will have the name corresponding to the two letter ISO abbreviation of the language and it must be placed in the Lang directory in your template root folder. As of version 16 you can update all language files automatically from the control panel. Make sure you keep these up-to-date.

Station Info Pages

There is a section in the menu called Info. There are pages about your station, location, website, text for the help dialog and settings for the Links page. The content of these pages is set in the control panel, as explained earlier.

Meteotemplate Blog

As you might have noticed already, Meteotemplate also has a Blog. This is great way if you want to stay informed about what is new, updates and sometimes I also post here some general information. It is also possible to add comments to all the posts or to subscribe to the blog. If you enter your email and name, you will then get emails about news regarding Meteotemplate, now in the form of the Meteotemplate Newsletter.

There is a feedback form available. If you want, you can fill it anonymously or if you want you can include your nick and email so that I can respond to your feedback. I read all the replies and it helps me to decide what to change, what to add etc., so any responses are highly appreciated.

You are done!

And that is it! I hope you enjoy using the template! It is still relatively new and I have many ideas what could be added, in addition, this is purely a hobby and I have no formal education in programming so I learn all the time. Feel free to contact me if you have any problems, find a bug, a mistake in the wiki, something is unclear, you have a suggestion. The best way is using my email, which I check several times a day. You are guaranteed a reply, the time it takes for me to respond will of course depend on how many others have contacted me before you, but you should get a reply within 24 hours.

If you like the template and find it useful, you can help me by making a donation using the PayPal button. All the money will be used towards funding the operational costs (webhosting, domain) as there are no ads at all on the site. I will offer support whether or not you decide to contribute, but your help is always appreciated.