Table of Contents Font Size

  • 2
  • Question
  • Updated 3 months ago
I want to create a video with table of contents in Smart Player. Is it possible to change the font size and font of the entries in this table of contents? I guess you have to edit one of the css or html files manually. But where?

Photo of Sven

Sven

  • 3 Posts
  • 1 Reply Like

Posted 3 months ago

  • 2
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 285 Posts
  • 119 Reply Likes
Hi Sven,

You are correct in that the CSS file contains the font and font size for the Table of Contents.  We don't encourage manual editing of these files because we may change them at anytime with upcoming releases of the Smart Player.  But your best bet is to use Chrome dev tools to find the classes that control the look and then hunt for them in the CSS file.

I am interested in reasons why you'd like to customize the look?  We are always interested in customers feedback and use cases that could help drive new features around theming.

Thanks,
Ben
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 285 Posts
  • 119 Reply Likes
@Dubie,

Correct, we can not change the files on your server.  I was referring to new Camtasia productions.

Ben
Photo of kayakman

kayakman, Champion

  • 7090 Posts
  • 2331 Reply Likes
Sven

perhaps consider a different approach?

instead of a TOC, use hotspots [go-to-marker or go-to-time] to enable navigation to a section of the video

FYI, on Windows, if TOC  is displayed, using ctl-mouse wheel will zoom the TOC; makes text easy to read

here is an example; these button-style-hoptspots are go-to-URL, but the concept is the same ...

http://www.cookbookplus.com/Videos/CookBookPlusDesktop2014/Menues/CookBookPlusDesktopVideosMenu/CookBookPlusDesktopVideosMenu_player.html




(Edited)
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 285 Posts
  • 119 Reply Likes
@Sven,

Thank you for describing the problem you are trying to solve. Try this.
  1. Open the Smart Player CSS file
  2. Find .toc-item class
  3. Add the following CSS: font-size: 20px; 
  4. NOTE: make that value as big as you need.
  5. Save
If you need to make the Table of contents panel wider then:
  1. Search for .toc-container
  2. Locate: width:252px; after that class name
  3. Change the value to what works for you.
Hope this helps,
Ben
Photo of kayakman

kayakman, Champion

  • 7090 Posts
  • 2331 Reply Likes
@  Ben Rhodes

I would advise caution when auto-modifying the smart player "in-line" on existing Camtasia installs, especially without notice to and/or right to opt-out for the user

a [commercial] user could be in the middle of creating a long series of related videos; if you materially change the player, like happens now in Camtasia 2019, where the app will  download a "new/updated" player before a production, and that change breaks something the user needs; that would not be a good thing

this has already happened to me, where the 2019 player now no longer supports projects with very high hotspot counts [previously reported]; yet those project productions were and are still supported by Camtasia 2019 productions
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 285 Posts
  • 119 Reply Likes
Just to be clear, those instructions are for the files created after rendering your video locally using the Smart Player or custom production settings.  Never change the files installed with Camtasia.

Ben