Available styling properties

Available styling properties

OrangeML provides a lot of styling properties for the main OrangeML elements:

Blocks
Sections
Formatted text
Navigation elements
Forms
Tables and lists
Orange world video components

The “class” column specifies if the property supports the class mechanism.

Headers and footers

Block properties

Name	Description	Class	Comment
BLOCK_BGCOLOR	Background color of normal <block>	Yes	Affect all the components in the block, except if their own properties are overridden. Has no effect on major blocks (use MAJORBLOCK_BGCOLOR)
BLOCK_COLOR	Foreground color of normal <block>	Yes	Affect all the components in the block, except if their own properties are overridden. Has no effect on links. Has no effect on major blocks (use MAJORBLOCK_COLOR).
BLOCK_LINKCOLOR	Link color in normal <block>	Yes	Affect all the components in the block, except if their own properties are overridden. Has no effect on major blocks (use MAJORBLOCK_LINKCOLOR).
BLOCKSEPARATOR_COLOR	Color of the line above the <block>, or NONE if this line has to be removed	Yes	Has no effect on major blocks (use MAJORBLOCKSEPARATOR_COLOR in this case). Ignored if a BLOCKTITLE_IMAGE_URL has been specified.
BLOCKTITLE_ALIGNMENT	Alignment of normal AND major <block> title	no	Has effect on both major and normal blocks
BLOCKTITLE_BGCOLOR	Background color normal <block> title	Yes	Has no effect on major blocks (use MAJORBLOCKTITLE_BGCOLOR).
BLOCKTITLE_BORDERCOLOR	Color of the top/bottom border of the normal and major <block> title, or NONE if these borders have to be removed	Yes	Has effect on both normal and major blocks. Only considered if a BLOCKTITLE_IMAGE_URL has been specified.
BLOCKTITLE_COLOR	Foreground color normal <block> title	yes	Has no effect on major blocks (use MAJORBLOCKTITLE_COLOR).
BLOCKTITLE_IMAGE_ALIGNMENT	The horizontal alignment of the optional background image for normal and major <block> title	yes
BLOCKTITLE_IMAGE_URL	The URL of the optional background image for normal and major <block> title, or NONE to remove the background image	yes	Has effect on both normal and major blocks. Currently only considered for Orange France. Can be an orangeicon URL point that points on an orangeicon asset or an actual URL. In this last case, you can use the height attribute of the <meta> element to specify the height of your image so that the platform can choose the most appropriate (typical height must be between 18px and 31px). You can obviously use some filtering_expression to modulate the size of the image depending on the device characteristics
BLOCKSUBTITLE_BGCOLOR	Background color normal AND major <block> subtitle	Yes	Has effect on both major and normal blocks
BLOCKSUBTITLE_COLOR	Foreground color normal AND major <block> subtitle	yes	Has effect on both major and normal blocks
BLOCKSUBTITLE_ALIGNMENT	Alignment of normal AND major <block> subtitle	no	Has effect on both major and normal blocks
HR_SUBTITLE_COLOR	Color of the rule below normal AND major <block> subtitle	yes	Has effect on both major and normal blocks
MAJORBLOCK_BGCOLOR	Background color of major <block>	Yes	Affect all the components in the block, except if their own properties are overridden. Has no effect on normal blocks (use BLOCK_BGCOLOR)
MAJORBLOCK_COLOR	Foreground color of major <block>	Yes	Affect all the components in the block, except if their own properties are overridden. Has no effect on links. Has no effect on normal blocks (use BLOCK_COLOR).
MAJORBLOCK_LINKCOLOR	Link color in normal <block>	yes	Affect all the components in the block, except if their own properties are overridden. Has no effect on normal blocks (use BLOCK_LINKCOLOR).
MAJORBLOCKSEPARATOR_COLOR	Color of the line above the major <block>, or NONE if this line has to be removed	Yes	Has effect only on major blocks (use BLOCKSEPARATOR_COLOR for other kinds of block). Ignored if a BLOCKTITLE_IMAGE_URL has been specified.
MAJORBLOCKTITLE_BGCOLOR	Background color major <block> title	Yes	Has no effect on normal blocks (use BLOCKTITLE_BGCOLOR).
MAJORBLOCKTITLE_COLOR	Foreground color major <block> title	yes	Has no effect on normal blocks (use BLOCKTITLE_COLOR).
SMARTBLOCK_BGCOLOR	Background color of smart <block>	Yes	Affect all the components in smart blocks, except if their own properties are overridden.
SMARTBLOCK_COLOR	Foreground color of smart <block>	Yes	Affect all the components in smart blocks, except if their own properties are overridden. Has no effect on links.
SMARTBLOCK_LINKCOLOR	Link color in smart <block>	yes	Affect all the components in smart blocks, except if their own properties are overridden. .

Section properties

Name	Description	Class	Comment
DIV_BGCOLOR	Background color of <div>	Yes	Also affects dropdown div (except if a DROPDOWN_DIV_BGCOLOR is specified)
DIV_COLOR	Foreground color of <div>	Yes	Also affects dropdown div (except if a DROPDOWN_DIV_COLOR is specified)
DIVTITLE_ALIGNMENT	Alignment of <div> title	No
FOCUS_BGCOLOR	Background color for focused headline. cf. navigation_properties below	Yes	Only supported on some devices.
HR_COLOR	Color of the horizontal lines above <div> and normal <headline>, or NONE to remove this line	Yes	Also affects major headlines (except if a MAJORHR_COLOR is specified) and dropdown div (except if a DROPDOWN_HR_COLOR is specified)
HEADLINE_BGCOLOR	Background color of normal <headline>	Yes	Has no effect on major headlines (use MAJORHEADLINE_BGCOLOR)
HEADLINE_COLOR	Foreground color of normal <headline>	Yes	Has no effect on major headlines (use MAJORHEADLINE_COLOR)
HEADLINE_TITLE_COLOR	Color of normal <headline> title	Yes	Has no effect on major headlines (use MAJORHEADLINE_TITLE_COLOR)
CHEVRON_COLOR	Color of double chevron (“more” link) for normal <headline>	Yes	Has no effect on major headlines (use MAJORCHEVRON_COLOR)
MAJORHR_COLOR	Color of the horizontal lines above major <headline>	No	Has no effect on normal headlines (use HR_COLOR)
MAJORHEADLINE_BGCOLOR	Background color of major <headline>	Yes	Has no effect on normal headlines (use HEADLINE_BGCOLOR)
MAJORHEADLINE_COLOR	Foreground color of major <headline>	Yes	Has no effect on normal headlines (use HEADLINE_COLOR)
MAJORHEADLINE_TITLE_COLOR	Foreground color of major <headline> title	Yes	Has no effect on normal headlines (use HEADLINE_TITLE_COLOR)
MAJORCHEVRON_COLOR	Color of double chevron (“more” link) for major <headline>	Yes	Has no effect on normal headlines (use CHEVRON_COLOR)
HR_ALERT_COLOR	Color of line below Alert sections	No
HR_CONFIRM_COLOR	Color of line below Confirm sections	No

Formatted text properties

Name	Description	Class	Comment
EM_NORMAL_COLOR	Color of <em> text	No
EM_POSITIVE_COLOR	Color of positive <em> text	No
EM_NEGATIVE_COLOR	Color of negative <em> text	No

Navigation properties

Name	Description	Class	Comment
FOCUS_BGCOLOR	Background color for focused links. Affects <headline>, <pagination>, <ni> inside <al>, <nl>, <navbar>, <a> and <pagination>, <vignette> and <ii>	Yes	Only supported on some devices.The class mechanism is only available for <headline> and <ni> inside <al>, <nl> and <navbar>
ACTIONLIST_BGCOLOR	Background color for <ni> inside <al>	No
ACTIONLIST_COLOR	Foreground color for <ni> inside <al>	No
AIBULLET_BGCOLOR	Background color of <ni> bullet (chevron) inside <al>	No	This color is used only for devices that don't use action icons
AIBULLET_COLOR	Foreground color of <ni> bullet (chevron) inside <al>	No	This color is used only for devices that don't use action icons
LETTERNAV_BGCOLOR	Background color for <letternav>	No
LETTERNAV_COLOR	Foreground color for <letternav>	No
NAVBAR_BGCOLOR	Background color for the <navbar> element	No
NAVBAR_COLOR	Foreground color for <navbar> element	No
NAVBAR_CURRENT_COLOR	Foreground color for current <navbar> element	No
NAVBARSEPARATOR_COLOR	Color for the separator of the <navbar> element	No
NAVITEM_SEP_COLOR	Color of vertical separator for direct access inside <nl>, or NONE if you don't want a separator	No
NI_BGCOLOR	Background color for <ni> inside <nl>	No
NI_COLOR	Foreground color for <ni> inside <nl>	Yes
NI_SEPARATOR_COLOR	Color of the horizontal separator of <ni> inside <nl>, or NONE if you don't want a separator	Yes	Only supported by a couple of devices
NIBULLET_COLOR	Color of <ni> bullet (chevron) inside <nl>	Yes
PAGINATION_BGCOLOR	Background color for <pagination>	No
PAGINATION_COLOR	Foreground color for <pagination>	No	Has effect on both pagination text and links
PAGINATION_CURRENTPAGE_COLOR	Color for <pagination> current page	No
PAGINATION_PREVNEXTSTRIPE_COLOR	Color for <pagination> chevrons	No

Form properties

Name	Description	Class	Comment
FORMLABEL_COLOR	Foreground color for <input> label	Yes
ACTIONFORM_BGCOLOR	Background color for “action” <form>	No
ORANGEACTIONFORM_BGCOLOR	Background color for “orange-action” <form>	No
BUTTON_BGCOLOR	Background color for <buttons>	No	Only applicable for devices that support background colors on buttons
BUTTON_COLOR	Foreground color for <buttons>	No	Only applicable for devices that support background colors on buttons

Tables and list properties

Name	Description	Class	Comment
GRAYED_CELL_BGCOLOR	Background color for “grayed” <td>	No
HEADER_CELL_BGCOLOR	Background color for <th>	No
HEADER_CELL_COLOR	Foreground color for <th>	No
LIBULLET_COLOR	Color of <li> bullet	No

Dynamic OrangeML properties

Most of the “standard” properties are applicable to Dynamic OrangeML components . However, there are a couple of properties that are specific to Dynamic OML.

Name	Description	Class	Comment
ACTIVEBLOCKTAB_BGCOLOR	Background color of active tabs	yes
ACTIVEBLOCKTAB_BORDERCOLOR	Border color of active tabs	yes
ACTIVEBLOCKTAB_COLOR	Foreground color of active tabs	yes
BLOCKTAB_BGCOLOR	Background color of tabs	yes
BLOCKTAB_BORDERCOLOR	Border color of tabs	yes
BLOCKTAB_COLOR	Foreground color of tabs	yes
BLOCKTAB_PREVNEXT_BGCOLOR	Background color of prev/next buttons in section tabs	yes
BLOCKTAB_PREVNEXT_BORDERCOLOR	Border color of prev/next buttons in section tabs	yes
BLOCKTAB_PREVNEXT_COLOR	Foreground color of prev/next buttons in section tabs	yes
CAROUSEL_HR_COLOR	Border color of the navbar of the carousels	no
CAROUSEL_ITEM_BGCOLOR	Background color of carousels items	yes
CAROUSEL_NAV_BGCOLOR	Background color of the carousels navbar	no
CAROUSEL_NAV_COLOR	Foreground color of the carousels navbar	no	only used for the central part of the navbar, see CAROUSEL_LINK_COLOR for the links of the navbar
CAROUSEL_LINK_COLOR	Foreground color of prev/next links in the carousels navbar	no
CAROUSEL_NUMNAV_BGCOLOR	Background color of the center part of the carousels navbar	no
DROPDOWN_CLOSED_ICON_URL	Url of the open icon of closed dropdown <div> or <block>	yes
DROPDOWN_OPEN_ICON_URL	Url of the icon of open dropdown <div> or <block>	yes
DROPDOWN_DIV_BGCOLOR	Background color of dropdown <div>	Yes	Only affects dropdown div for devices that support dropdown. For devices that don't support dropdown, the background color is controled by DIV_BGCOLOR
DROPDOWN_DIV_COLOR	Foreground color of dropdown <div>	Yes	Only affects dropdown div for devices that support dropdown. For devices that don't support dropdown, the foreground color is controled by DIV_COLOR
DROPDOWN_HR_COLOR	Color of the horizontal lines above dropdown <div>, or NONE if you don't want a border	Yes	For curious reasons, works only if the title background color is also customized (via DROPDOWN_TITLE_BGCOLOR)
DROPDOWN_TITLE_COLOR	Foreground color of the title of dropdown <div>	Yes	Only applicable for dropdown div. For dropdown blocks, use BLOCKTITLE_COLOR, as usual
DROPDOWN_TITLE_BGCOLOR	Background color of the title of dropdown <div>	Yes

Orange World Video properties

Name	Description	Class	Comment
OWV_PROGRAM_BGCOLOR	Background color for <owv:program>	No
OWV_PROGRAM_COLOR	Foreground color for <owv:program>	No
OWV_PROGRAM_TITLE_COLOR	Color of <owv:program> title	No
OWV_PROGRAM_SEPARATOR_COLOR	Color of the separator above <owv:program>	No

Other properties

Name	Description	Class	Comment
DEFAULT_COLOR	The color to be used by default for text	No
LINK_COLOR	The color to be used by default for text	No	This property is useful for devices that support only one color for all the links of a page (e.g. SPV E100)
BG_COLOR	Default background color	No	This property is only used by the SPV E100. It will be deprecated in next versions
TITLE_BGCOLOR	Background color for <title>	No
TITLE_COLOR	Foreground color for <title>	No
TITLELINK_COLOR	Foreground color for <title> when it is clickable	No
TITLE_ALIGNMENT	Alignment for <title>	No
COPYRIGHT_BGCOLOR	Background color for <copyright>	No
COPYRIGHT_COLOR	Foreground color for <copyright>	No
BREADCRUMBS_BGCOLOR	Background color for <breadcrumbs>	No
BREADCRUMBS_COLOR	Foreground color for <breadcrumbs>	No
BREADCRUMBS_SEP_COLOR	Color for <breadcrumbs> separators (i.e. chevrons)	No
HR_BREADCRUMBS_COLOR	Color for the line above <breadcrumbs>	No
TAB_COLOR	Foreground color for menu tab	No
TAB_BGCOLOR	Background color for menu tab	No
ACTIVETAB_COLOR	Foreground color for menu tab when highlighted	No
ACTIVETAB_BGCOLOR	Background color for menu tab when higlighted	No

See also