Format number in list style

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Jesse
Jr. Propeller Head
Posts: 4
Joined: Thu May 27, 2021 12:33 pm

Format number in list style

Post by Jesse »

Hi all,
I'm new to MadCap Flare, wondering:
how/if I can modify the number in a numbered list to be bold, and have the text for the numbered steps remain in normal font.
Thanks very much!
SteveS
Senior Propellus Maximus
Posts: 2087
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
Contact:

Re: Format number in list style

Post by SteveS »

Flare uses css for styling elements and, as such, you can't do much with ordered and unordered list marker formats.

But... (There's always a but.) ...there is a workaround.

This is an example from W3.org for creating red bullets:

Code: Select all

ul {list-style: none}
li::before {content: "•"; color: red}
li::before {content: "•"; color: red;
  display: inline-block; width: 1em;
  margin-left: -1em}
Another example, this time from CSS tricks:

Code: Select all

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
  font-weight: bold;
}
body {
  font-family: Montserrat, sans-serif;
}
The other alternative is to use Flare's autonumber, which gives you far more control over numbered lists. You can, for example, control numbers that run from different topics and/ or on multiple pages in output.
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
robdocsmith
Sr. Propeller Head
Posts: 247
Joined: Thu May 24, 2018 3:11 pm
Location: Queensland, Australia

Re: Format number in list style

Post by robdocsmith »

I think there's an easier way to do this, if you allow each list element to include a paragraph by default. If your list looks like:

Code: Select all

        <ol>
            <li>
                <p>Text for step 1</p>
            </li>
            <li>
                <p>Text for step 2</p>
            </li>
            <li>
                <p>Text for step 3</p>
            </li>
        </ol>
You can style the list as follows:

Code: Select all

ol {
	font-weight: bold;
}

li p {
	font-weight: normal;
}
Now only the numbers of each step will be bolded. This means you can do all sorts of interesting things with your list numbers such as use a different font, make them a different color, larger size, etc. For example:

Code: Select all

ol {font-family: 'CombiNumerals';
	font-size: 20pt;
	color: #888888;
}
li p {
	font-family: 'Arial';
	font-size: 10pt;
}
will put the list numbers in a font that uses numbers in circles, grey and larger font than the 10pt Arial of the list text.

Hope that helps,

Rob
Post Reply