In RacontR, it is possible to inject Javascript and CSS code within projects to customize them or add functionality. The code is a discipline that requires certain knowledge, autonomy and a lot of testing!

Here are the different options offered by RacontR covered in this section :

  • Add custom CSS, JS and find an ID
  • Another way to find an ID
  • Add your own class to an element

Add custom CSS, JS and find an ID

Adding code to your pages is really easy :

  1. At this point, you can choose between the JS (javascript) and CSS code.

Once done, copy and paste or edit your code in the window that appears and don’ t forget to confirm to save.

And voila! You have integrated your code to your project. Just launch the project overview to check the results.

    2. Find the ID of an element RacontR

You will have to find the ID of a RacontR element to be able to customize or integrate it into your code. The ID is unique for each element of your project. The following example is taken from the Google Chrome browser, the process remains essentially the same on Firefox or Safari.

When you click on an element, you will find his ID below the timeline.

Another way to find an ID 

Alternate method :

To open the elements inspector you must right click with the mouse on your page in preview mode and select “inspect element”.

  1. Click on the magnifying glass
  2. Hover your mouse the item you want to have the ID, sometimes it will take time if the item is hidden under other layers. To make it easier, you can look in the window of the element written comments in green with the name of your layers inspector.
  3. Finally, look into the console at the number displayed in the “ID” box corresponding to the element. There, you have found the ID of a project item!

Add your own class to an element

For users familiar with CSS, you can add your own classes to an element in RacontR.

To do so :

  1. Click on the element.
  2. Open the properties tab,
  3. Add a class and validate.

There you go! You just added a class to your media!

Did this answer your question?