Table of Contents Font Size

  • 2
  • Question
  • Updated 2 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 2 months ago

  • 2
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 281 Posts
  • 118 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 Dubie

Dubie

  • 1455 Posts
  • 1177 Reply Likes
Hey Ben,

Could you clarify something?

You state:
We don't encourage manual editing of these files because we may change them at anytime with upcoming releases of the Smart Player.
I'm with that but,

Those changes only effect working on projects in Camtasia or uploaded to Screencast right?

They don't effect my video files already uploaded to my own server correct.
or do they?

So if I edit the CSS file for instance, those changes should "stick" once on my server.


Dubie:)
(Edited)
Photo of Sven

Sven

  • 3 Posts
  • 1 Reply Like
Hi Ben,
Okay, too bad there's no easy way. So far I couldn't find the right entry in the css-file, because it is super unstructured and just a one-liner.  But here is the reason for my question:
My company wants to show long videos with tables of contents at a trade show. They will be broadcast on iMacs with 4K displays. The entries in the table of contents will appear extremely small in contrast to the video. Our trade show staff must therefore be very close to the screen in order to read the table of contents.  A larger font size would solve this problem. In general, it would be nice if you could simply adapt the tables of contents to your own corporate design. I attached a screenshot of the "problem".




Photo of Ben Rhodes

Ben Rhodes, Employee

  • 281 Posts
  • 118 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

  • 7075 Posts
  • 2320 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

  • 281 Posts
  • 118 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

  • 7075 Posts
  • 2320 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

  • 281 Posts
  • 118 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