Octeth

Before you begin

This documentation will take you through the process of understanding and customizing your Oempro interface and skin. Before we begin and take you through the whole process we assume that you have installed the Oempro on your server.

We are going to cover the following topics one by one:

• Structure of the templates and how they work
• Explanation of the Tag’s and Block’s and their usage and how they work
• Detailed explanation of how to enable disable things for administrator’s and clients using the template engine
• Detailed Examples
• How to change the look-n-feel by editing template files

Structure of the templates

Oempro’s interface and skin is designed in a manner that anyone can customize it very easily. In this chapter we will see the basic structure of the templates found with the Oempro interface. We are assuming here that you are using the latest version of Oempro.

Below screenshot gives you the idea of the template structure. Oempro ships with the basic default skin and interface called enhanced_english. The directory of the templates is located under the path “/oempro_path/system/data/templates/”. All your templates should be uploaded to this directory. Oempro has a default templates set in a directory called “enhanced_english”.

You can see in the above screenshot that the default skin and interface enhanced_english has the several directories for different types of interfaces. Let’s now check out the directory structure.

There are basically four types of templates for the enhanced_english skin and interface. There are directories specifying the interfaces; one interface for Administrator (section_administrator), one for client accounts (section_client), one for members (section_member) and one for the public/visitors (section_public). Let us check out below the basic description for all the templates and their usage.

“section_administrator” templates:

These are the templates used for the administrative interface of Oempro. When you need to customize the administrator interface and the skin you will have to edit the file founds inside this directory. The section_administrator directory will have several template tiles as shown in the below screenshot:

All the template files are simple html files with related TAGS and BLOCKS which will be parsed by Oempro’s backend template engine and merged with the actually interface when it is served to the end user.

“section_client” templates:

These are the templates used for client interface. Oempro is a multi user and multi tier environment and you can create a client access for your clients and assign the related lists to these client id’s so that your clients can go through the campaign activities and other statistical data.

“section_member” templates:

These are the templates which are responsible for the interface seen by members and subscribers. You can change the look and feel of the member’s section by editing these templates.

“section_public” templates:

These are the templates responsible for displaying the redirection related procedures, rss, archives, opt-in/out subscription messages etc.

In all the template directories whether be it for administrator, member, client or public the basic internal directory structure will remain as it is and the files would change.

Explanation of the Tag’s and Block’s

In this chapter we will learn the basics of TAGS and BLOCKS. Oempro uses very simple to use and effective tagging and block system – which would dynamically integrate the data from the database into a template.

Let us first understand the difference between TAG’s and BLOCK’s.

Tags:

Oempro uses an advance and proprietary template system yet very simple to use and manage. There are pre-defined tags if added to a template they can replace the actually value when the template is parsed. In case you need to display the number of people read the particular newsletter then Oempro uses “_{LANGUAGE:TimeOpened}_” tag, which will fetch the correct value for the particular campaign and display it in the default language of your Oempro interface.

This means when the tags are used you can actually display certain values dynamically through the templates.

Blocks:

As we learned what are the tags and how they are used and how Oempro utilizes these tags to perform certain functions and display the related values to the end user accessing the Oempro interface. Now we need to understand what are the BLOCKS – blocks are set of instructions and can include several tags within the block.

These are defined the way XML files look – for example:

The above block will contain the related instructions and tags so that it can be parsed by Oempro template engine and the relevant data is displayed to people those who are authorized to view the BLOCK.

This means the BLOCK can contain set of instructions and data which can be displayed as and when required.

TAGS Examples and how they work

We have seen the difference between the TAGS and BLOCKS and its basic definition – let us now check some of the examples and tags which can parse the major data.

In order to understand the tags and use them you will need to first study the Oempro’s default skin and interface files. These files will show you and give you an idea on how the tags are used to perform and show some related texts and values.

In this example we will check out couple of tags and what values they replace when the templates are actually parsed.

Please go to “/oempro_path/system/data/templates/enhanced_english/section_administrator/”. Open the file called “campaign_new.html” in any of the HTML file editor – for this manual we have used TextMate Editor to open this file. You will be able to see the file as shown in the below screenshot:

Now if you look at the Line number 20 then you should see the tag called _{LANGUAGE:CampaignName2}_

The above tag will be replaced by the text “New Campaign” without the double quotes. This means whenever you want to display the text called New Campaign you can use the above mentioned tag so that it will be replaced when oemPro template engine will parse the tag.

The parsed page will look like as shown in the below screenshot.

Let us take another example of how the tags work. This time we will take the member’s interface and check out the tags.

In order to do this we will need to first go to the member interface template files under the following directory:

/oempro_path/system/data/templates/enhanced_english/section_members/

Open the file called settings_subscriptions.html using any of the HTML editor or notepad. For this documentation we have used TextMate Editor. Once you open the file it will be displayed as shown in the below screenshot:

If you look at the line number 7 you should see the tag called _{LANGUAGE:SubscribedMailLists}_

This tag will be replaced with the text “Subscribed Mail Lists” – when you are actually on the subscription settings page as shown in the below screenshot.

Please remember that before editing the templates and modifying the skin make sure that you go through all the tags used on each template from the existing Oempro skin and Interface files.

If there is a mistake for any of the tags some of the functionalities may not work or can break the Oempro’s working.

That’s about it – now you will be able to customize the templates and Oempro skin to suite your needs and branding.

BLOCKS Examples and how they work

In order to understand the blocks concept – let us first open one of the template files from section_administrator template group. For this example we will choose main.html found under the following path.

/oempro_path/system/data/templates/enhanced_english/section_administrator/

For this example we will open this file in TextMate Editor – the file will be displayed as shown in the below screenshot.

Here we can see there are couple of blocks defined. First block is for the Quicktip message(s) from Octeth.

The above block will enable the QuickTip message(s) from octeth.com website. Using these blocks we can restrict a particular user to have certain information displayed or not.

Say for example you want to enable quicktip’s only for super administrator and not to other admin ID’s then you can add a block which will only allow super administrators to see the Quick Tip Message(s).

To do this you can add the following lines as shown in the example:

This would make sure that only super administrators are able to see the Quick Tips and no other administrator ID will be able to see it.

The blocks are very useful to enable / disable certain functionality or content and also to identify a particular content by its block.

How to enable/disable content and functionalities for Administrators and Clients

As we learned how the blocks work for the templates – in this chapter we will learn how to enable and disable blocks and functionalities for the different levels of users [such as administrators, super-administrators, clients, members etc].

To start with we can take an example of how to enable the content only for super administrators and not for the administrator id’s.

To do that let us first go to our section_administrator directory where our admin templates are located and open up the file called main.html.

When we open the above file in the TextMate Editor it should look as shown in the below screenshot:

Now if you look at the above screenshot you will realize that the first three lines are to display the Quicktips from octeth.com – let us login to the admin area with the super-administrator username and password and see how it looks.

Once you login to the Oempro admin area with super administrator id – it would look something like as shown in the below screen shot. For this example we have highlighted the Quick Tips with red circle.

Now that we want keep this QuickTip message visible only to the super administrator and not to the normal Administrator we will need to add the following block as shown in the below screenshot.

Please add the ONLYFOR:SUPERADMINISTRATOR block as shown in the above screenshot and save your main.html file and upload it to your template directory. Now try logging in with the administrator ID and you should not see the Quick Tip message at all.

Oempro makes your life much more easier with the easy to use blocks which can enable and disable functionalities and content for certain users only.

Now let’s check out how to enable and disable certain things from the client area. For example we want to disable showing the exact email address of the subscriber to our client but also want him to check the reports such as how many people read the email what number of times. In order to do that we will first check out how the normal template looks like before we disable the email address display.

In the above screenshot the member email addresses are visible. In order to make them not visible to your client you will need to edit the related template. To edit the template you will need to go to the section_client directory and open the file called “campaign_tracker_details.html”.

Please note that we are using TextMate Editor for editing these template files. If you use some other editor the orientation might be different.

If you look at the above screenshot – the tag which lists the member email address is _ListEmailAddress_

In order to hide the member email id’s just remove this tag and add “hidden” text to your template. Once that is done – save the template and upload it to your template directory and see the result.

That’s it – as you can see in the above screenshot that you can make the email id hidden to your client when he/she is logged in to check the statistical data for read ratios.

Similarly you can perform certain changes to your templates to show and hide content from different types of user levels.

This gives you much more flexibility in order to make sure that you don’t compromise certain important things to your clients or to your administrators. Sometimes it happens that you are running a campaign for your client and you are not willing to show your clients the email addresses for your subscriber database.

Enabling and disabling certain things from your administrators can also help you limit them from using certain important features of Oempro.

How to change the look & feel by editing template files

In the earlier chapters we have seen how the tags and blocks work and how you can enable disable certain functionality or content for different level’s of users.

Now let’s take an example on how can we change the look and feel of Oempro by editing template files.

In order to change the look and feel you need to understand the structure of the templates along with the related css files, inserts and any other required files.

If you look at the enhanced_english [Default templates shipped with Oempro] directory you will realize that there are couple of folders as mentioned below.

“info” Directory:

This directory will contain four files – copyright.txt, description.txt, name.txt and screenshot.gif.

If you develop your own skin you can use these text files to set the description and name along with the screenshot of your skin.

“media” Directory:

This directory will hold all the graphics used for the interfaces, css files and the javascript files necessary for Oempro interface. You can either choose to replace these graphics with your own keeping the sizes and aspects of the graphics as it is – or you may load new graphics required for your new theme.

“section_administrator” Directory:

This directory will hold all the html template files necessary for the administrator interface, these files can be modified.

“section_client” Directory:

This directory will hold all the html template files necessary for the client interface, these files can be modified.

“section_member” Directory:

This directory will hold all the html template files necessary for the member interface, these files can be modified.

“section_public” Directory:

This directory will hold all the html template files necessary for the public interface, these files can be modified.

“templates” Directory:

This directory holds the body templates for each of the above sections we talked about. This means the directory will have 4 body templates for each section and 4 POP Up templates for each section.

These body templates are the important most for the look and feel and design related aspects of Oempro. These templates will be parsed and then the main template files found in every section are merged to this body template to create a nice and slick interface.

You must understand that in order to completely change the look and feel of Oempro you have to edit the CSS files and also replace the default images in the template directory. All the CSS and Images are located under the directory called media.

Let us check out what CSS files we have in our css directory. Below is the screenshot which will list all the necessary css files.

calendar.css

This file will help you customize the look and feel of the pop up calendar required for certain date related functions within Oempro.

styles_help.css

This file contains the stylesheet for the integrated help.

styles_menu.css

This file will allow you to manage the style sheet for the drop down menu’s in the Oempro interface.

styles_quickstats.css

This file has the style sheet for the Quick Statistics procedure.

styles_screen_popup.css

This is the main style sheet for the whole interface Oempro is based on. This is very important and you need to be careful when you make any changes to this CSS file since Oempro interface highly depends on this file.

styles_screen.css

This style sheet is used when there are pop-ups within the Oempro interface – such as personalization screen, spam-rating screen etc.

tab-view.css

This style sheet is useful for the Tabbed menu’s used in the Oempro’s administrative interface.

Now that we have seen what the css files are for – lets check out the images folder found under the media folder.

Within the images folder you will have 5 more folders which will have all the graphics and images related to the Oempro’s default skin.

calendar_images

This folder will have all the images related to the calendar utility used by the oemPro.

charts

This folder will have all the flash files used for plotting the charts within the oemPro interface.

extension_icons

This folder will have the extension icons for file types.

icons

several small icons used in Oempro

theme

This folder will have the images and graphics used across the Oempro interface for administrators, clients and for members. You can simply edit these graphics keeping the aspect ratio of all the graphics as per the existing ones and modify the theme according to your color – combination.

Now let us try and replace some of the graphics to create our own branded skin and interface. Firstly we will see how to replace the existing graphics – such as logo’s and other related things to create our own branded theme.

In order to do that – go to the theme folder.  For this example we will take the image called “013.gif”.  This is the Oempro logo – if you want to have your own company’s logo then you got to replace this images.  Before replacing this image please remember that since this is the theme already made and requires you to maintain the size of the image in terms of width and height.

So lets find out what is the height and the width of “013.gif” image. You can use Photoshop, Macromedia fireworks to check the size of the image as well to create the new image of that size.

Width: 173 pixels
Height: 89 pixels

This means we need to create an image with the above dimensions as well keeping the same background color.  The RGB value for the color used is 100,123,208 respectively.

After you are done with the editing of this image you can export it into a gif format with the same name 013.gif.  Please remember to backup your existing image so that there is no issue in case you goof it up.

Now upload your newly exported image to the Oempro installation on your server.  Once the image is uploaded you can visit your Oempro installation’s admin area or any area for that matter. You should see the new logo reflected as shown in the below screenshot.

That’s it – customizing your existing interface to reflect your logo’s and branding is pretty much easy.  You can do this with other images and also change the colors and fonts using the CSS files.

Please note that in order to create the custom branding and skin you need to be familiar with the HTML, CSS and image editing tools. If you have no experience with these tools for editing html, css or image editing then we would suggest you to outsource the theme creation from a professional.

23rd Aug 2007, Posted by Cem Hurturk under Branding / Localization / Translation