List properties

Purpose

Defines basic visual formatting of lists and the list item markers, including the positioning, the appearance, and any image file for the marker.

Controls

Control Description Options Property
Image Browse allows you to select an image policy to use as a list-item marker or bullet. none, <image_policy>, mcs-gradient() theme_list_prop.html#list-style-image
Type Sets the style of a standard bullet to be used in a list. armenian, circle, cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, upper-alpha, upper-latin, upper-roman, square  theme_list_prop.html#list-style-type
Position Controls the position of a bullet. inside, outside  theme_list_prop.html#list-style-position

Properties

list-style-image

Specifies an image or image policy to use as a list-item marker or bullet. The default value is 'none'.

Option Description
none No image will be displayed.
url('URI') The URI of the image to display.
mcs-component-url('URI') The URI of the image policy to use.
mcs-transcodable-url('URI') The URI of the image to display. The image will be transcoded, if necessary.
mcs-gradient() The gradient function to render.
inherit The value of the property should be inherited from the parent element.
list-style-position

Sets the position of a bullet. The default value is 'outside'.

Option Description
inside Specifies that the bullets should appear inside the content flow.
outside Specifies that the bullets should appear outside the content flow.
inherit The value of the property should be inherited from the parent element.
list-style-type

Specifies the style of a standard bullet to be used in lists. The default value is 'disc'.

Option Description
armenian The marker is traditional Armenian numbering.
circle The marker is a circle.
cjk-ideographic The marker is CJK ideograms.
decimal The marker is a number.
decimal-leading-zero The marker is a number padded by initial zeros.
disc The marker is a filled circle.
georgian The marker is traditional Georgian numbering.
hebrew The marker is Hebrew numbering.
hiragana The marker is Hiragana numbering.
hiragana-iroha The marker is Hiragana-Iroha numbering.
katakana The marker is Katakana numbering.
katakana-iroha The marker is Katakana-Iroha numbering.
lower-alpha The marker is lower-alpha.
lower-greek The marker is lower-greek.
lower-latin The marker is lower-latin.
lower-roman The marker is lower-roman.
none No marker.
square The marker is a square.
upper-alpha The marker is upper-alpha.
upper-latin The marker is upper-latin.
upper-roman The marker is upper-roman.
inherit The value of the property should be inherited from the parent element.

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2">
  <head>
    <title>List properties</title>
    <style type="text/css">
      ul {
        list-style-image: url('http://localhost:8080/mcs/welcome/images/logo_sys_r_rgb_150.gif');
        list-style-type: lower-roman;
        list-style-position: outside;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

Related topics