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!
Format number in list style
-
- Senior Propellus Maximus
- Posts: 2089
- 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
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:
Another example, this time from CSS tricks:
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.
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}
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;
}
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
-
- Sr. Propeller Head
- Posts: 248
- Joined: Thu May 24, 2018 3:11 pm
- Location: Queensland, Australia
Re: Format number in list style
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:
You can style the list as follows:
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:
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
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>
Code: Select all
ol {
font-weight: bold;
}
li p {
font-weight: normal;
}
Code: Select all
ol {font-family: 'CombiNumerals';
font-size: 20pt;
color: #888888;
}
li p {
font-family: 'Arial';
font-size: 10pt;
}
Hope that helps,
Rob