Creating a Theme
From Jade
We are going to create a Theme for Jade, and tell Jade to use the new theme. To start you will need the latest release of Jade, so go to "download" from the top of the page.
For this specific tutorial we will show you how to create a Jade theme for the Windows Operating System. However, in most cases, the only difference is the location of the "Jade" program directory. Doing a search for this directory should help guide you
Contents |
[edit] Getting Started with Jade Themes
First lets take a look at where Jade loads the themes. Jade loads the theme from a CSS file that it is directed to by Preference File, config.pref.egt. Jade then navigates to the appropriate folder inside the "Theme" directory and loads the data from the CSS Document. Since Jade uses a CSS Document if you are familiar with HTML CSS Jade uses the exact same structure and keywords.
Navigate to the Install Directory or c:/program files/Jade (for windows only). Open the "Themes" folder. Let's copy the Jade folder and rename the copy "Simple." In this case we are copying the first style and starting a new one based off it.
Take a look at the files and folders in side the new directory. You'll note that some files have unique file names and extensions, most of these files will open with jade. You may also note that there is a file called an EGT SmartSense File, don't open that yet.
[edit] Changing the CSS
In our theme we want a simple white background with few images. You'll note that the original theme has tons of images and some of them may not be used.
Lets open main.css from the new folder we just created, with your favorite CSS editor, in this example we will use Aptana. When you open Jade you will notice that the style looks very similar and follows all standard CSS settings. If you do not know CSS please use a online tutorial for more information. We are simple gonna change the background of the body to white (#FFFFFF.) Select the body object and choose the "background" tag and change "#6599AF" with "#FFF" or "#FFFFFF" (same result). Then change the "color" tag to black ("#000000") from white.
Save and close the file.
[edit] Changing the jade.Theme.egt File
The next file to change before you tell Jade to use this theme, is to tell Jade any changes you made to the theme and what the theme is to be called etc. Open the EGT SmartSense File "jade.Theme.egt" with Jade. It should be already listed as the default, since Jade is the first desktop application to implement the .egt EGT SmartSense File.
Quick Background Information: EGT SmartSense is a nifty idea, its a Universal File Type. It is deigned to be used as your all-in-one solution for files. IE, no more .mscx, .xml, .wtf, and misc extensions. If your editor supports multiple format, chances are it supports something called a Meta-Type Attribute. The editor will read this attribute to figure what file type it is. We hope to see operating systems choose this method of file viewing, as the EGT SmartSense application would be able to encrypt, compact, index, as it wills for as long as the meta type information is safe. In the future you will be able to 7zip a Theme and rename it to .egt and import this directly to Jade and Jade will install the theme based off of your jade.theme.egt file.
!--- Do not edit this file outside of JADE!!! ---!
Failure to do so, and when we change the standards of this file. The file may no longer work!
Open the file, "Jade.theme.egt." You'll notice this appears to be a standard xml file with one problem. This XML file has 2 namespaces, AirNote and LIC. We will be working with AirNote first.
The file should look like this:
<?xml version="1.0" ?>
<AirNote>
<theme>
<style>main.css</style>
<tabs>
<width>156</width>
<rightOfTabs>34</rightOfTabs>
<leftOfTabs>136</leftOfTabs>
</tabs>
</theme>
</AirNote>
<LIC>
<NewEntry>
<Define>
<uid>\[\[EGT001-006-85548\]\]</uid>
<type>Theme</type>
</Define>
<Name>AirNote Theme</Name>
<Author>EGT and AirNote Open Source Team</Author>
<Website>http://4egtv.net/AirNote</Website>
<PathId>AirNote</PathId>
<Application>AirNote</Application>
</NewEntry>
</LIC>
If you changed the original name of the "main.css" style sheet, be sure to include the name here and the name in the below steps. To do so change the value "style" in the Theme attribute of the AirNote namespace.
[edit] Modify Tab Layout
This Article Appears Incomplete: This article appears to be incomplete and missing some information. Please review this section or page and make the appropriate corrections. If you feel that this article is complete, remove this tag.
Jade Development Team
Second if you changed the very delicate navigation menu you are going to need to take care of filling this information in or else the program will not behave like you want it to. The object Tab has 3 variables "width", "rightOfTabs", and "leftOfTabs." These are designed to help position the Tab system in the proper place. "width" is the total amount of space, including the border of the tabs and margins/padding, between the start and end of a singular tab. "rightOfTabs" is the space at end of the tabs and the end of the window, designed to leave space for a fade effect and the arrow button. "leftOfTabs" is the space directly from the start of the window to the first tab, same reasons as before. Measurements are pixels only.
[edit] The LIC - Local Information Collective
The LIC, Local Information Collective, name space of this file is designed to tell an operating system where a Forever (EGT Forever) compiler is present to store these values in the LIC Database. When Jade first starts these values go straight to virtual memory without hesitation, only for active themes. Where a Forever Compiler is not present (as in most cases) Jade will treat these files, one at a time, and load them into a temporary Jade LIC Database.
[edit] Customizing Basic Information
In this case these values specify the data necessary to display in the future Jade theme selector. NOTE: AirNote was the original name of jade, so the Jade theme file for the Jade theme never got updated in release v1(.6.7) and below.
Simply change the UID to a new sequence of random numbers or replace all text with the system assign command. To choose a number the value should be in the following mask "\[\[EGT###-###-#####\]\]". To use the command simple replace the number with the following command:
FDATA[[f()init[
on dim forever as compiler.runtime +[
on Start LIC #038 [
Pascal.main.impersonate[].lic.appendNewUID;
]
];
];]]
Make sure to enter a line break between the xml tag and the FDATA code, this tells Jade to generate a new one if the Forever Compiler could not or did not open this application.
[edit] Personalize the LIC
Change the name, author,website to the appropriate information. Change PathID to the path of the style itself, such as our example: "Simple". Leave Application as "Jade".
[edit] Tell Jade to Use the new Theme
Open up the "config.pref" file, it is an XML type file so opening it in your Native XML Editor should work. In our case we just used Jade, itself.
The file should look like:
<config>
<Theme>
<Title>Jade</Title>
<Path>Jade\main.css</Path>
</Theme>
</config>
You'll notice the only setting used is the Theme Setting with 2 values. "Title" is the name of the theme, such as "Jade." "Path" is the relative path to the main.css file from the themes directory. Let's change the theme title to "Jade Simple" and the theme path to "Simple\main.css." Please keep the casing, some operating systems will require this.
[edit] Viewing the Jade Theme
Restart Jade, and when jade first opens up it will appear blank and without a style. Give Jade a moment to cache the files in memory from first use.
Attached is a screen shot of the simple theme.
Enjoy!
