Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!

Q

How do I bold and change the font size of the numbers in an ordered list? Doesn't seem to work in the rich text editor.

Last Updated: Jun 10, 2010  |  17380 Views
Topics: CSS

Was this helpful? 3   1
A

Answer

In order to make the numbers bold and/or a different size (or any other change you want to make), you need to go into the Plain Text Editor and play with the HTML.

This is because the Rich Text editor will add the changes only to the line, not to the list as a whole. So if you make changes and then look at the HTML, you'll see a span tag for each list item defining those changes only for that text.

If you make the change in the HTML at the very beginning of the list (where the HTML tells the browser that an ordered list is starting), those changes will apply to the whole list, including the numbers.

For example, in the following list, I defined the whole list as bold. Then I added span tags for the first 2 items to make the text on the line normal, while still keeping the number bolded. On line 3, there is no additional span/style.

  1. This is some text that shouldn't be bold...though the number should be.
  2. Again, the # 2 should be bold...but not this text.
  3. Since I didn't add any alternate style to this line, the whole thing should be bold.

Here's what the code looks like:

<ol style="font-weight: bold;">
<li><span style="font-weight: normal;">This is some text that shouldn't be bold...though the number should be.</span></li>
<li><span style="font-weight: normal;">Again, the # 2 should be bold...but not this text.</span></li>
<li>Since I didn't add any alternate style to this line, the whole thing should be bold.</li>
</ol>

So, to make your whole list larger, you would add something like this to the initial <ol> tag:

<ol style="font-weight: bold; font-size: 14px;">


Of course, if you plan on using this style a lot, it might make more sense to create a class using CSS and just call that class whenever you create an ordered list. Here's how you'd do that:

  • Log in as an admin level user and go to System Settings > System-wide Settings
  • Scroll down to the Custom JS/CSS Code box. And add the class/style code you want. Maybe something like this:

    <style>
    .boldlist ol, li { font-weight: bold; font-size: 14px; }
    .boldlist li div { font-weight: normal; }
    </style>


    The reason for the .boldlist li div element is in case you want some of the line to not be bold.
  • Click Save Custom JS/CSS Code.

Once that's defined, you'll just need to add classes to your lists after you create them...wherever you create them - any box, any page, any guide in your system. So, create an ordered list in the Rich Text Editor, save your work, click the Plain Text Editor tab, and add the class name to the ol tag. It would look like this: <ol class="boldlist">

If you want some of the text in your list items to not be bold, add the <div> tag around that text.

For example, using those classes, this code...

<ol class="boldlist">
<li>This text is bold and larger, just like the number.</li>
<li>This text is bold and larger, just like the number...<div>but this text isn't.</div></li>
</ol>

...would result in this list displaying:

  1. This text is bold and larger, just like the number.
  2. This text is bold and larger, just like the number...
    but this text isn't.

Other Answers / Comments (0)

    Need Help?

    This site contains FAQs for LibGuides v1 only.

    To Access Help Documentation for LibGuides v2 -

    Click on the HELP in the Orange Command Bar of your system.

    You must be logged into LibApps to access all version 2 Help documentation.

    Support:

    • search / submit a question here,
    • You can access LibGuides v1 Help guides,
    • or email support@springshare.com.

    Follow LibGuidesFAQ on Twitter Follow us on Twitter!
     Your questions, answered!

    Browse by Popular Topics

    Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
    View All Topics

    Related content from Springshare Help