Applying code to a specific widget

Each widget you include in your project carries a unique ID. You can use this value to change their properties when applying custom code.

For example, if you want to apply a custom animation to a text widget, follow these steps:

1. Right-click on the widget to bring the contextual menu, then select ‘Inspect’. This will open the Elements panel of Developers Tools.
2. Locate the element with the data-id attribute of the widget you want to modify, then copy the string value of the data-id attribute. This is the value you’d use to reference this specific widget on your custom code.
3. Come back to your Readymag project and paste your code within the Code Editor.
   
   

To help you to try it out, we have put together an example of custom code that turns a textbox into a typewriter-style animated block.

To test it, copy the code below and paste it into the СSS tab of the Code widget:

[data-id="PASTE WIDGET ID HERE"] > div {
overflow: hidden;
white-space: nowrap;
border-right: 1px solid; /* Cursor style */
animation: typing 4s steps(15, end), blink-caret 0.5s 8 forwards; /* 15 steps per 4s (15 characters in the line)*/
}
/* Input animation */ @keyframes typing { from { width: 0 } to { width: 100% }
}
/* Cursor animation */
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } /* black — cursor color */
}