In the Countdown template, how is the font size in table of contents changed?

3298
2
09-17-2014 11:24 AM
StewartGalloway
New Contributor III

I have created a Web app using the Countdown Story Map template.  I want to decrease the font size in the table of contents.  Any ideas?

thanks.

0 Kudos
2 Replies
ChristianSmith
New Contributor III

I'm not sure if you want to change all of the text font size (including the intro) or just the info popup text. I am going to presume just the popup text

  You will want to edit the style.css file, or you can create a custom css file. The advantage to creating a custom css file is that you can easily transfer the changes to other countdown storymaps that you create.

  • In the css folder copy the Style.css file and rename it custom.css
  • Open the Custom.css file in a text editor. Delete all of the info in the file, after the commented out copyright info.
  • Next add the following bit of code:

#info{

  font-size:12px;

}

  • Save the file
  • Next open the index.html file (located in the main folder)
  • Here you will need to add a lie of code so that the app will know to use the custom.css file.
  • Look for the portion of code that is letting the app know where the style sheets are located (around line 55)
  • At the bottom of the list of stylesheets add the following code:

<link rel="stylesheet" type="text/css" href="css/custom.css">

Save the file.

You should now be able to refresh the web page and you will see the change you made to the font size. You may need to clear your cache to see the changes.

You can find out more about css files here: W3Schools

StewartGalloway
New Contributor III

Christian,

Thanks very much!

Stew

0 Kudos