Appendix: Adding Styles to an Attribute

Style attributes for Enterprise Server are written in JavaScript Object Notation (JSON). Each attribute determines how the affected content will appear on phones, tablets or both. In each case you will need to clearly define which platform the styles will be applied to by writing style properties within two objects called phone and tablet.

When you open the Styling panel on a new attribute it will be empty, so add the following objects:

{
	tablet:
	{
	},
	phone:
	{
	}
}

You can now add style properties to each object as required, separating each property with a comma.

For example, if you wanted to change the formatting of a question on both phones and tablets, such that their background colour is red and their font size is large, you would apply the same style properties to both:

{
	tablet:
	{
		WrapperBackgroundColour:'#FF0000',
		FontSize:'Large',
	},
	phone:
	{ 
		WrapperBackgroundColour:'#FF0000',
		FontSize:'Large',	
	}
}

Since the style for each platform is defined independently, you could change the question's appearance on phones without affecting how it appear on tablets. In the following example, when the question is rendered on a phone it will have a blue background and the default text size, but have a red background and large text on tablets:

{
	tablet:
	{
		WrapperBackgroundColour:'#FF0000',
		FontSize:'Large',
	},
	phone:
	{ 
		WrapperBackgroundColour:'#0000FF',
	}
}

If you prefer not to override any styles in one version of the content, you can remove all style properties from the corresponding object, as seen in the example tablet object below:

{
	tablet:
	{	
	},
	phone:
	{ 
		WrapperBackgroundColour:'#0000FF',
	}
}