the basics of racontr code

The basics of Racontr code

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

Here are the different options proposed by Racontr that we will approach:

First step: Add custom CSS, JS and find an ID

Add 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. It’ll just go in the project overview to see the result !

  1. Find the ID of an element Racontr

You will have to find the ID of an Racontr element to be able to customize or integrate it into your code. The ID is a clean and unique to 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 Inspector element 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 help you, you can look in the window of the element written comments in green with the name of your layers inspector.
  3. Finally, look in the console the number displayed in the “ID” box corresponding to the element.

And voila, 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 on Racontr.

For it :

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

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

Saving

Create an account

  1. OK let's do this.

Log in with your credentials

or    

Forgot your details?