Theme Basics

[TomM]

I am trying to create a custom theme. I feel like I am missing the "basics" section of the documentation. I can't find any examples or instructions on how to do some basic stuff with a theme. I must be missing something.


Anyway...

I want to position some fields that are in every program we have (Title, Program name, Date, etc...). I understand how to create a new item:

Code: Select all

{
       "id": "TTLTEXT132",
       "field type": "output field",
	   "value": { 
			 "fieldName": "TTLTEXT132", 
			 "designValue": "[TTLTEXT132]", 
			 "dataType": "char", 
			 "formatting": "Text", 
			 "trimLeading": "false", 
			 "trimTrailing": "false", 
			 "textTransform": "none", 
			 "dataLength": "108" 
		 }, 
       "z index": "2",
       "locked in place": "true",
       "css class": "title-text"
    },

When I run "Convert Green Screen", it gives me two TTLTEXT132 fields. The default one that is created...somewhere, and the one I create with the code above. I want to hide or override the one that is created by default. How do I get a handle on that? I can't find anything in the documentation on how to do this, but I assume it must be pretty simple.


Thanks

[Glenn]

Tom,

If the fields already exist on the screen I would suggest that you move them as opposed to creating new ones.

For a few of the properties available in our themes (http://www.profoundlogic.com/docs/display/PUI/Themes), you can specify a function instead of a static value. One of the properties that will assist you is called "process field". Assuming you know the ID of the element you want to change (it appears from your message that you do) you could put the following code in your theme to move that element to wherever you'd like (I'm using the ID of the element you list in this sample).

Notes
- This code assumes you know the fixed position you'd like to put the element.
- The theme file is in JSON format so you need to pay special attention to the commas that should be located before and/or after this property

Code: Select all

  "process field": function(field, item, isSubfile, isWindow) {
    
    if (item["id"] == "TTLTEXT132") {
      // Change these values to where you want the element placed
      item["left"] = "10px";
      item["top"] = "10px";
    }

  }

[TomM]

This is exactly what I was looking for.

Thanks!