General XMetaL Discussion
pooh2583 February 6, 2013 at 6:13 am
CSS for bulleted itemsFebruary 6, 2013 at 6:13 amParticipants 0Replies 1Last Activity 9 years, 7 months 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
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 February 6, 2013 at 7:38 pm
Reply to: CSS for bulleted itemsFebruary 6, 2013 at 7:38 pm
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:
content: counter(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:
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.