General XMetaL Discussion

XMetaL Community Forum General XMetaL Discussion CSS for bulleted items

  • pooh2583

    CSS for bulleted items

    Participants 0
    Replies 1
    Last Activity 10 years ago


    I want to have following structure in my xml document in Xmetal using css

    this is my Xml

    1st root

    2nd root

    is it possible to make the above element structure as follows in Xmetal

    1.1st root
    2.2nd root

    using nummbered list or bulleted list with the help of CSS. If not how can I achieve this kind of structure?

    Please reply,


    Derek Read

    Reply to: CSS for bulleted items

    Does your document really have two root elements? If so, XMetaL will not allow you to author it without turning “rules checking” off, validation will always fail, and you will be warned that you are saving an invalid document every time you save. If that is really what you want authoring is going to be very difficult. I think you'll also have trouble opening such a file. At best XMetaL will try to fix it up. If it can't do that you'll probably see validation errors and you may be stuck in Plain Text view until the document is made valid, or at least valid enough.

    You can number arbitrary elements using CSS. If you want to treat these as a list then please see the Customization Guide sections that discuss the CTM and CSS settings for lists. Setting the appropriate CTM settings allows XMetaL to enable special list editing functionality, including the Numbered List toggle button on the Formatting toolbar, and the Indent and Outdent buttons and functions, including the tab and shift+tab shortcuts for working with lists. See the Journalist demo's “OrderedList” and “ListItem” elements and their corresponding CSS and CTM settings.

    If you want to simply number these items without treating them as a list then you are going to need to use the CSS property “content” and a CSS counter variable. Giving your XML sample code, and assuming that the element is actually not the root element of the document but some repeating child of the real root element, you can use code similar to this in your CSS:

    root>title:before {
    content: counter(titleCounter) ". ";
    color: blue;

    root {
    counter-increment: titleCounter;

    I've added the color:blue property to show that you can style this :before CSS differently from the actual content. All you really need in this case is the first line.

    If you find that you need to use 'counter-reset' in your CSS please read this:,23.0.html

    Note: Using CSS counters and content does not enable any of the list editing functionality that you get when you define an element using “treat as list” in the CTM file and style it as a list using the CSS list-style properties.


  • You must be logged in to reply to this topic.

Lost Your Password?