Creating an O-MEGA Template

Post Reply
User avatar
Plugin Developer
Posts: 938
Joined: Sat Feb 18, 2012 10:51 am
Location: Germany

Creating an O-MEGA Template

Post by Sem;colon » Wed Apr 08, 2020 3:06 pm

Templates are (custom) html pages within the O-MEGA tool.
Basically you don't need to create a template. You can just configure buttons on the pre-defined default templates. However, if you like things a little different or more fancy, you can create your very own templates, and this is how you do it.
! To create your own templates you need at least basic knowledge about html and JavaScript and you will get involved with the structure of the O-MEGA system !
1. You need to switch the webinterface in developing mode: On the webinterface go to settings -> settings -> turn on "advanced configuration" -> save your changes with the button in the upper right corner.
Your page will reload and you're back on the dashboard.
2. Go to your windows explorer and navigate to webserver files, usually %APPDATA%\EventGhost\plugins\O-MEGA\web.
Here you find a folder called templates. Open it and create a new folder with the name of your new template - let's name it hello_world. This new folder is the container for all your template specific files. You can create subfolders, add images, css files, script files etc. Let's start with an .html file. As we are lazy we don't write it from scratch, but copy the code from a default template.
So, create a new empty file called "hello.html" and paste this into the file:

Code: Select all

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.nicescroll.js"></script>
<script type="text/javascript" src="/scripts/localFunctions.js"></script>
Hello World!
As you can see, there are some references loaded in the beginning - they are highly important.
The body can be edited as you like of course, in our case there's just "Hello World" there, but any html code will do.
3. Now go on the webinterface to settings -> configuration. You may notice it looks a little different there from before and there are some new menus:
-extensionsCfg (I explain another time)
-templatesCfg - here we go, that's where you tell the O-MEGA system where it can find your newly created .html template file and set some settings how the system should handle them. Create a new entry and configure it as in the picture below. Make sure the ID (not the name) you choose is globally unique, means not only in your configuration but also in others across the globe (so you can export and share the template with others)
template configuration
hw1.PNG (5.7 KiB) Viewed 5991 times
Don't forget to save the changes once you setup your new template!
-you also find a new button there in that menu called "show API Docu", it opens a window showing you all the functions of the template API with examples, use this as resource and reference when you write your .html files so they play properly together with the O-MEGA system and Eventghost!
4. Go to the pages configuration page and add your new template as page.
page configuration
hw2.PNG (4.04 KiB) Viewed 5991 times
That's it! You just created your first new template
how it should look in the end
If you like my work, Image me a drink :wink:

Post Reply