# Custom code

**URL:** https://forum.readymag.com/c/d181ustom-code/16.md

[Latest](https://forum.readymag.com/latest.md) · [Categories](https://forum.readymag.com/categories.md)

---

## [About the Custom code category](https://forum.readymag.com/t/about-the-custom-code-category/23)

<div class="topic-metadata">

**Author:** [@Readymag](https://forum.readymag.com/u/Readymag)\
**Replies:** 1\
**Last updated:** [October 9, 2022, 4:54pm UTC](https://forum.readymag.com/t/about-the-custom-code-category/23 "2022-10-09T16:54:10Z")

</div>

Need some code to upgrade your project? Find it here.

---

## [Access unique ID of image to use blending modes](https://forum.readymag.com/t/access-unique-id-of-image-to-use-blending-modes/7215)

<div class="topic-metadata">

**Author:** [@Neco](https://forum.readymag.com/u/Neco)\
**Replies:** 0\
**Last updated:** [October 5, 2026, 12:31pm UTC](https://forum.readymag.com/t/access-unique-id-of-image-to-use-blending-modes/7215 "2026-10-05T12:31:36Z")

</div>

I have seen the previous forum and the css code for it, but I can’t seem to figure out how to access the unique ID of my image, to then add the code. I tried looking up videos about it, since I am more of a visual learn…

---

## [Difference Blend Mode Code](https://forum.readymag.com/t/difference-blend-mode-code/6123)

<div class="topic-metadata">

**Author:** [@Varvara\_Godovikova](https://forum.readymag.com/u/Varvara_Godovikova)\
**Replies:** 2\
**Last updated:** [September 28, 2026, 9:59am UTC](https://forum.readymag.com/t/difference-blend-mode-code/6123 "2026-09-28T09:59:41Z")

</div>

Hi everyone, I’m trying to apply mix-blend-mode: difference to some text blocks on my Readymag project, but I can’t get it to work and I’m hoping someone here has found a solution. The setup: I have a few text elements…

---

## [embedding pinterest board into site](https://forum.readymag.com/t/embedding-pinterest-board-into-site/7143)

<div class="topic-metadata">

**Author:** [@nukes](https://forum.readymag.com/u/nukes)\
**Replies:** 0\
**Last updated:** [September 22, 2026, 12:50pm UTC](https://forum.readymag.com/t/embedding-pinterest-board-into-site/7143 "2026-09-22T12:50:24Z")

</div>

Hey everyone, I’m looking to add a board widget to my site via Pinterest. On their add-ons page, there’s a line of Javascript code that one is supposed to add just before the closing tag, but when I access the code edit…

---

## [Make smooth scroll](https://forum.readymag.com/t/make-smooth-scroll/2134)

<div class="topic-metadata">

**Author:** [@Ramon\_Lozano](https://forum.readymag.com/u/Ramon_Lozano)\
**Replies:** 18\
**Last updated:** [September 16, 2026, 11:06am UTC](https://forum.readymag.com/t/make-smooth-scroll/2134 "2026-09-16T11:06:06Z")

</div>

Hello, I’m designing a web and I’m trying to make a smooth scroll like this. Does anyone know how to embed this code to make it work? Thanks

---

## [Lenis Smooth Scroll Working (only single page)](https://forum.readymag.com/t/lenis-smooth-scroll-working-only-single-page/7137)

<div class="topic-metadata">

**Author:** [@alozanx](https://forum.readymag.com/u/alozanx)\
**Replies:** 0\
**Last updated:** [September 16, 2026, 11:03am UTC](https://forum.readymag.com/t/lenis-smooth-scroll-working-only-single-page/7137 "2026-09-16T11:03:43Z")

</div>

Hey guys jsut made Lenis Smooth Scroll work into my website. This is how: In HEAD paste this: \<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.20/dist/lenis.css"\> \<script src="https://unpkg.com/lenis@1.1.20/dis…

---

## [Interactive Sound design](https://forum.readymag.com/t/interactive-sound-design/915)

<div class="topic-metadata">

**Author:** [@reqda](https://forum.readymag.com/u/reqda)\
**Replies:** 4\
**Last updated:** [September 10, 2026, 4:46pm UTC](https://forum.readymag.com/t/interactive-sound-design/915 "2026-09-10T16:46:11Z")

</div>

Hello everyone, I would like to know how to activate a sound whenever I hover over an icon, without having to click or have the Readymag sound widget displayed (SoundCloud thumbnail too big to hide). Can you guys help …

---

## [Sound when Hovering an Icon](https://forum.readymag.com/t/sound-when-hovering-an-icon/7121)

<div class="topic-metadata">

**Author:** [@anais.maxine](https://forum.readymag.com/u/anais.maxine)\
**Replies:** 0\
**Last updated:** [September 10, 2026, 4:46pm UTC](https://forum.readymag.com/t/sound-when-hovering-an-icon/7121 "2026-09-10T16:46:02Z")

</div>

Hi ! I am trying to figure out how to make a short sound when hovering an icon. And I don’t really get where I would have to upload the mp3 data so I can used it in the code? Would be very grateful for some help !

---

## [Hover Over X Ray Effect](https://forum.readymag.com/t/hover-over-x-ray-effect/7047)

<div class="topic-metadata">

**Author:** [@Ian\_Atherton](https://forum.readymag.com/u/Ian_Atherton)\
**Replies:** 0\
**Last updated:** [August 14, 2026, 2:54am UTC](https://forum.readymag.com/t/hover-over-x-ray-effect/7047 "2026-08-14T02:54:33Z")

</div>

Hello. I was wondering if there was a way to make a portion of an underlying image display when hovering over the top image? Is this custom code? I’m looking to achieve this effect here.

---

## [Adding a link to a slideshow to open another page?](https://forum.readymag.com/t/adding-a-link-to-a-slideshow-to-open-another-page/4498)

<div class="topic-metadata">

**Author:** [@Matycia](https://forum.readymag.com/u/Matycia)\
**Replies:** 2\
**Last updated:** [July 28, 2026, 1:34pm UTC](https://forum.readymag.com/t/adding-a-link-to-a-slideshow-to-open-another-page/4498 "2026-07-28T13:34:21Z")

</div>

hi i want to do something pretty simple where I have a slideshow that when we over it changes pictures but i want that when we click on it it opens to another page. any way to do it ?

---

## [Blur Effect](https://forum.readymag.com/t/blur-effect/76)

<div class="topic-metadata">

**Author:** [@Sophia\_Rodriguez](https://forum.readymag.com/u/Sophia_Rodriguez)\
**Replies:** 10\
**Last updated:** [July 18, 2026, 3:38am UTC](https://forum.readymag.com/t/blur-effect/76 "2026-07-18T03:38:04Z")

</div>

Any widget can be used as a mask for blurring all underlying content. The trick is nearly effortless: just make the widget transparent and use its ID with this CSS code: \[data-id="PASTE WIDGET ID HERE"\] { backdrop-filt…

---

## [Animating image opacity with clicks](https://forum.readymag.com/t/animating-image-opacity-with-clicks/6233)

<div class="topic-metadata">

**Author:** [@Cat\_M9848](https://forum.readymag.com/u/Cat_M9848)\
**Replies:** 2\
**Last updated:** [July 14, 2026, 5:38pm UTC](https://forum.readymag.com/t/animating-image-opacity-with-clicks/6233 "2026-07-14T17:38:54Z")

</div>

I’m trying to have a group of images go from 0 to 100 opacity when the user clicks one image. Then, when they click another image, it will remove those images from the screen (go from 100 to 0 opacity) and load new image…

---

## [Colour change auto animation on text](https://forum.readymag.com/t/colour-change-auto-animation-on-text/787)

<div class="topic-metadata">

**Author:** [@Harry\_Tuckwell](https://forum.readymag.com/u/Harry_Tuckwell)\
**Replies:** 7\
**Last updated:** [June 2, 2026, 11:55am UTC](https://forum.readymag.com/t/colour-change-auto-animation-on-text/787 "2026-06-02T11:55:05Z")

</div>

Hi there, I’m looking to add some code to have some text auto animate through a specific set of colors. I’m not good with code so hoping someone can help me with the exact code I need to input into the custom code widg…

---

## [Text inverting during scroll?](https://forum.readymag.com/t/text-inverting-during-scroll/6085)

<div class="topic-metadata">

**Author:** [@ali\_144](https://forum.readymag.com/u/ali_144)\
**Replies:** 1\
**Last updated:** [June 2, 2026, 8:10am UTC](https://forum.readymag.com/t/text-inverting-during-scroll/6085 "2026-06-02T08:10:06Z")

</div>

Hi everyone, I’m trying to use the custom code widget to add a few things into my site. I’ve got a nav bar at the top which consists of text and a png logo/image widget which are fixed in place as you scroll down. Effec…

---

## [Current time (clock widget)](https://forum.readymag.com/t/current-time-clock-widget/447)

<div class="topic-metadata">

**Author:** [@fmc](https://forum.readymag.com/u/fmc)\
**Replies:** 8\
**Last updated:** [May 20, 2026, 4:16pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447 "2026-05-20T16:16:56Z")

</div>

Hi, I was wondering if it is possible to add a live current time (clock) to our page using some kind of css / code.

---

## [Custom 'current time' widget that uses project font](https://forum.readymag.com/t/custom-current-time-widget-that-uses-project-font/5881)

<div class="topic-metadata">

**Author:** [@Hungie](https://forum.readymag.com/u/Hungie)\
**Replies:** 2\
**Last updated:** [May 20, 2026, 4:12pm UTC](https://forum.readymag.com/t/custom-current-time-widget-that-uses-project-font/5881 "2026-05-20T16:12:28Z")

</div>

Hello, I am trying to add a ‘current time’ clock widget to my website, following the instructions of this previous forum post: I’ve added a font from Adobe Fonts to the font selector, Parabolica, and I’d like for thi…

---

## [Hot Spot Embeded Code](https://forum.readymag.com/t/hot-spot-embeded-code/6090)

<div class="topic-metadata">

**Author:** [@kashaw](https://forum.readymag.com/u/kashaw)\
**Replies:** 0\
**Last updated:** [May 4, 2026, 7:48pm UTC](https://forum.readymag.com/t/hot-spot-embeded-code/6090 "2026-05-04T19:48:40Z")

</div>

Hello! I’m working on a site right now and am hoping to have a feature similar to the hotspot, where you can click on an icon and custom code would appear. (In this scenario, I’m linking in music from spotify so ideally…

---

## [Randomly Generate homepage background every time you refresh](https://forum.readymag.com/t/randomly-generate-homepage-background-every-time-you-refresh/6084)

<div class="topic-metadata">

**Author:** [@Max\_Marshall](https://forum.readymag.com/u/Max_Marshall)\
**Replies:** 0\
**Last updated:** [April 27, 2026, 2:44pm UTC](https://forum.readymag.com/t/randomly-generate-homepage-background-every-time-you-refresh/6084 "2026-04-27T14:44:27Z")

</div>

I’m trying to make a simple one page site which loads a different background image every time a user loads / visits / refreshes the page. Not looking for any fancy animations, simply a full page image that changes for e…

---

## [Trouble Applying Background Blur with Custom Code](https://forum.readymag.com/t/trouble-applying-background-blur-with-custom-code/6054)

<div class="topic-metadata">

**Author:** [@Pedro\_S](https://forum.readymag.com/u/Pedro_S)\
**Replies:** 3\
**Last updated:** [April 16, 2026, 5:03pm UTC](https://forum.readymag.com/t/trouble-applying-background-blur-with-custom-code/6054 "2026-04-16T17:03:27Z")

</div>

Hi everyone, I’m trying to use custom code in Readymag, but I can’t seem to get it working. I’ve searched online and followed several tutorials on how to implement custom code, specifically to create a blurred backgrou…

---

## [Boulevard Widget is not working](https://forum.readymag.com/t/boulevard-widget-is-not-working/6067)

<div class="topic-metadata">

**Author:** [@Iman](https://forum.readymag.com/u/Iman)\
**Replies:** 0\
**Last updated:** [April 10, 2026, 2:44pm UTC](https://forum.readymag.com/t/boulevard-widget-is-not-working/6067 "2026-04-10T14:44:59Z")

</div>

Trying to connect self booking Boulevard widget with the following code but it is empty. Any advice? \<!-- Boulevard Self-Booking overlay --\> \<script\> (function (a) { var b = { businessId: 'fd8c1b36-8…

---

## [Hiding cursor with JS or CSS](https://forum.readymag.com/t/hiding-cursor-with-js-or-css/6053)

<div class="topic-metadata">

**Author:** [@smokebreakz](https://forum.readymag.com/u/smokebreakz)\
**Replies:** 1\
**Last updated:** [April 1, 2026, 1:06pm UTC](https://forum.readymag.com/t/hiding-cursor-with-js-or-css/6053 "2026-04-01T13:06:40Z")

</div>

Hi! I have been trying to inject custom code into my Readymag site in order to make a short line of text the “cursor” instead of the default. I have exhausted everything I know to do to achieve this. I was able to effect…

---

## [Mix-blend-mode doesn't work in mobile](https://forum.readymag.com/t/mix-blend-mode-doesnt-work-in-mobile/5240)

<div class="topic-metadata">

**Author:** [@sqwelz](https://forum.readymag.com/u/sqwelz)\
**Replies:** 1\
**Last updated:** [February 25, 2026, 4:34am UTC](https://forum.readymag.com/t/mix-blend-mode-doesnt-work-in-mobile/5240 "2026-02-25T04:34:30Z")

</div>

Hello there! In desktop version mix blend mode works great, but in mobile it does not work, i updated id and recreated text blocks, in readymag editor on any browser no changes. How to fix that? Help!

---

## [How can I start playing music by clicking on widget?](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615)

<div class="topic-metadata">

**Author:** [@\_442002](https://forum.readymag.com/u/_442002)\
**Replies:** 11\
**Last updated:** [February 22, 2026, 8:50pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615 "2026-02-22T20:50:22Z")

</div>

Hello, in my graduation work I need to turn on music by clicking on the widget. I tried to write the code, but it didn’t work out, I’m upset. Is it even possible? I could leave you a small donation for your help…

---

## [Gallery images in fullscreen on mobile](https://forum.readymag.com/t/gallery-images-in-fullscreen-on-mobile/4773)

<div class="topic-metadata">

**Author:** [@Joao\_Pacola](https://forum.readymag.com/u/Joao_Pacola)\
**Replies:** 1\
**Last updated:** [February 19, 2026, 2:18pm UTC](https://forum.readymag.com/t/gallery-images-in-fullscreen-on-mobile/4773 "2026-02-19T14:18:13Z")

</div>

Hello, I’m having an issue with the gallery slideshow. When I view it on mobile and tap to open an image in full screen, it crops the image and covers the sides. I’d like the image to fit the screen without getting cropp…

---

## [Change css specifically for one page](https://forum.readymag.com/t/change-css-specifically-for-one-page/5899)

<div class="topic-metadata">

**Author:** [@Gafsou](https://forum.readymag.com/u/Gafsou)\
**Replies:** 0\
**Last updated:** [February 10, 2026, 4:12pm UTC](https://forum.readymag.com/t/change-css-specifically-for-one-page/5899 "2026-02-10T16:12:42Z")

</div>

Hello! I managed to change the position and color of the arrows allowing to switch between pages with this code: .left, .right { top: 4% !important; /\* Adjust this percentage to change the height position \*/ } .rig…

---

## [How to Remove White Flash Between Pages in Readymag (Solved, 2025)](https://forum.readymag.com/t/how-to-remove-white-flash-between-pages-in-readymag-solved-2025/5719)

<div class="topic-metadata">

**Author:** [@adenolfo](https://forum.readymag.com/u/adenolfo)\
**Replies:** 2\
**Last updated:** [February 9, 2026, 7:18pm UTC](https://forum.readymag.com/t/how-to-remove-white-flash-between-pages-in-readymag-solved-2025/5719 "2026-02-09T19:18:54Z")

</div>

I was experiencing an issue where internal page loads would glitch a true “white” color, and page transitions were not satisfying. Essentially, Ready Mag loads each page separately, and the old page would disappear, t…

---

## [How to show scroll distance](https://forum.readymag.com/t/how-to-show-scroll-distance/1083)

<div class="topic-metadata">

**Author:** [@ado](https://forum.readymag.com/u/ado)\
**Replies:** 3\
**Last updated:** [January 15, 2026, 3:42am UTC](https://forum.readymag.com/t/how-to-show-scroll-distance/1083 "2026-01-15T03:42:01Z")

</div>

How to show scroll distance in readymag? I have create the sample in jsfiddle and works well: But, when i tried in readymag with the code widget, the text to show scroll distance just doesn’t update. Steps to reprodu…

---

## [Creating a carousel that only moves images once clicked, and can be repeated](https://forum.readymag.com/t/creating-a-carousel-that-only-moves-images-once-clicked-and-can-be-repeated/5795)

<div class="topic-metadata">

**Author:** [@ashkaiser](https://forum.readymag.com/u/ashkaiser)\
**Replies:** 0\
**Last updated:** [December 29, 2025, 8:42pm UTC](https://forum.readymag.com/t/creating-a-carousel-that-only-moves-images-once-clicked-and-can-be-repeated/5795 "2025-12-29T20:42:07Z")

</div>

I’ve been struggling and dreading way too much on trying to figure this out so I’m finally giving in and asking here lol. Very big newb to code, but I wanted to do a “carousel” type animation for my landing page on my po…

---

## [Alternative Ways to Target RM Objects other than data\_id?](https://forum.readymag.com/t/alternative-ways-to-target-rm-objects-other-than-data-id/5775)

<div class="topic-metadata">

**Author:** [@David\_Xie](https://forum.readymag.com/u/David_Xie)\
**Replies:** 0\
**Last updated:** [December 18, 2025, 7:03pm UTC](https://forum.readymag.com/t/alternative-ways-to-target-rm-objects-other-than-data-id/5775 "2025-12-18T19:03:22Z")

</div>

I am looking to apply custom code (applying the difference blending mode) to a navbar that is a group of multiple text widgets. However, when I bring the preset navbar in other pages, each text widget within the navbar …

---

## [Responsive text for my site](https://forum.readymag.com/t/responsive-text-for-my-site/2863)

<div class="topic-metadata">

**Author:** [@ale](https://forum.readymag.com/u/ale)\
**Replies:** 1\
**Last updated:** [December 9, 2025, 1:45am UTC](https://forum.readymag.com/t/responsive-text-for-my-site/2863 "2025-12-09T01:45:56Z")

</div>

Hello, I would like to know how I can make my text responsive. I adapted the layout on both mobile and desktop, but when I’m in desktop mode, since the screens are different sizes, my text gets bigger or smaller, and I’v…

[Next page](https://forum.readymag.com/c/d181ustom-code/16.md?page=1)