# Custom code

**URL:** https://forum.readymag.com/c/d181ustom-code/16.md?page=4

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

**Page:** 5

---

## [Transform letter by letter with custom Javascript](https://forum.readymag.com/t/transform-letter-by-letter-with-custom-javascript/1846)

<div class="topic-metadata">

**Author:** [@Edo](https://forum.readymag.com/u/Edo)\
**Replies:** 2\
**Last updated:** [October 9, 2024, 6:10pm UTC](https://forum.readymag.com/t/transform-letter-by-letter-with-custom-javascript/1846 "2024-10-09T18:10:10Z")

</div>

I’m trying to achieve an effect that, as soon as the page loads, makes every letter letter in some specific headings slightly different in size, rotation and moved on the x-axis. I don’t need this to be animated. It’s ju…

---

## [Custom Cursor Trail](https://forum.readymag.com/t/custom-cursor-trail/1611)

<div class="topic-metadata">

**Author:** [@NikolajLeongard](https://forum.readymag.com/u/NikolajLeongard)\
**Replies:** 3\
**Last updated:** [October 9, 2024, 3:24pm UTC](https://forum.readymag.com/t/custom-cursor-trail/1611 "2024-10-09T15:24:00Z")

</div>

Hii I’m trying to add a cursor trail (behind a custom cursor, where I uploaded as readymag standard option). The problem is that it works in preview mode but not on the live site… I’ve put the Javascript into the…

---

## [Custom Code only showing in preview not on live site](https://forum.readymag.com/t/custom-code-only-showing-in-preview-not-on-live-site/2368)

<div class="topic-metadata">

**Author:** [@nicholas.jacksondesi](https://forum.readymag.com/u/nicholas.jacksondesi)\
**Replies:** 3\
**Last updated:** [October 9, 2024, 10:22am UTC](https://forum.readymag.com/t/custom-code-only-showing-in-preview-not-on-live-site/2368 "2024-10-09T10:22:40Z")

</div>

I have added a cursor tail to my site. When I preview the site, it shows up as expected. But when I click ‘Open’ there is no cursor tail to be seen. This is the site here And the code i used was placed in section o…

---

## [Hot to create a preloader in the RM?](https://forum.readymag.com/t/hot-to-create-a-preloader-in-the-rm/1080)

<div class="topic-metadata">

**Author:** [@rapha201133](https://forum.readymag.com/u/rapha201133)\
**Replies:** 3\
**Last updated:** [October 8, 2024, 7:45am UTC](https://forum.readymag.com/t/hot-to-create-a-preloader-in-the-rm/1080 "2024-10-08T07:45:18Z")

</div>

Hi! I’m trying to make a preloader for the landing page of my website like this example:https://graveyard.billelis.com/ I don’t know coding, so tried to google some tutorials but don’t find any answer that suits the re…

---

## [Iverted mask on menu items](https://forum.readymag.com/t/iverted-mask-on-menu-items/3669)

<div class="topic-metadata">

**Author:** [@Carlo\_A](https://forum.readymag.com/u/Carlo_A)\
**Replies:** 0\
**Last updated:** [October 6, 2024, 7:18am UTC](https://forum.readymag.com/t/iverted-mask-on-menu-items/3669 "2024-10-06T07:18:07Z")

</div>

I want to create an inverted mask for my webshop header, similar to the ones on the following sites: https://jadedldn.com/ https://uk.representclo.com/ How can I apply this effect to my shop’s bag icon, logo, and hamb…

---

## [Hide scrolling bar](https://forum.readymag.com/t/hide-scrolling-bar/1948)

<div class="topic-metadata">

**Author:** [@Marcela\_Magana](https://forum.readymag.com/u/Marcela_Magana)\
**Replies:** 5\
**Last updated:** [October 2, 2024, 4:06pm UTC](https://forum.readymag.com/t/hide-scrolling-bar/1948 "2024-10-02T16:06:45Z")

</div>

Hi guys! does anyone knows how i can hide the scroll bar? i tried this code but it didn’t worked :frowning: .html::-webkit-scrollbar { width: 0px; } .html { scrollbar-width: none; -ms-overflow-style: none; } Than…

---

## [Yoast SEO Integration](https://forum.readymag.com/t/yoast-seo-integration/3588)

<div class="topic-metadata">

**Author:** [@jordi\_rovirosa\_rodri](https://forum.readymag.com/u/jordi_rovirosa_rodri)\
**Replies:** 0\
**Last updated:** [September 20, 2024, 7:14pm UTC](https://forum.readymag.com/t/yoast-seo-integration/3588 "2024-09-20T19:14:57Z")

</div>

Hello everyone :grinning: Is there an option to integrate the Yoast SEO plugin? Thanks

---

## [Code widget showing different size in google chrome vs safari](https://forum.readymag.com/t/code-widget-showing-different-size-in-google-chrome-vs-safari/3609)

<div class="topic-metadata">

**Author:** [@Maartje\_Bevers](https://forum.readymag.com/u/Maartje_Bevers)\
**Replies:** 1\
**Last updated:** [September 25, 2024, 8:24pm UTC](https://forum.readymag.com/t/code-widget-showing-different-size-in-google-chrome-vs-safari/3609 "2024-09-25T20:24:35Z")

</div>

Hello, I have been trying to implement some widgets from external platforms using the code widget. The problem i am facing is that the widget is scaling differently in google chrome and safari. When i dont use css it sh…

---

## [How Do I Create These Animations](https://forum.readymag.com/t/how-do-i-create-these-animations/3604)

<div class="topic-metadata">

**Author:** [@RubyR](https://forum.readymag.com/u/RubyR)\
**Replies:** 2\
**Last updated:** [September 24, 2024, 8:20pm UTC](https://forum.readymag.com/t/how-do-i-create-these-animations/3604 "2024-09-24T20:20:28Z")

</div>

Hello! I’m new to Readymag and am currently designing a portfolio. While seeking inspiration, I stumbled upon a website that caught my eye. I was particularly drawn to two features: the constant subtle color changes and …

---

## [Program/Schedule templates for a festival or conference](https://forum.readymag.com/t/program-schedule-templates-for-a-festival-or-conference/3449)

<div class="topic-metadata">

**Author:** [@Lauren\_Doherty](https://forum.readymag.com/u/Lauren_Doherty)\
**Replies:** 1\
**Last updated:** [September 23, 2024, 2:43pm UTC](https://forum.readymag.com/t/program-schedule-templates-for-a-festival-or-conference/3449 "2024-09-23T14:43:05Z")

</div>

Has anyone successfully implemented a schedule format/widget into a Readymag template? I’m creating a website for a festival and we need a good way to show the program - where each event is and what time - also would be …

---

## [Isolating clickable area of an open accordion menu](https://forum.readymag.com/t/isolating-clickable-area-of-an-open-accordion-menu/3437)

<div class="topic-metadata">

**Author:** [@hrkim](https://forum.readymag.com/u/hrkim)\
**Replies:** 1\
**Last updated:** [September 23, 2024, 2:41pm UTC](https://forum.readymag.com/t/isolating-clickable-area-of-an-open-accordion-menu/3437 "2024-09-23T14:41:33Z")

</div>

Hi! I want to use an accordion menu that expands and collapses a project’s description, and the only workaround I’ve found to make this work is to hide any imagery and content that’s below the accordion menu, which trigg…

---

## [Change background color on scroll or with time](https://forum.readymag.com/t/change-background-color-on-scroll-or-with-time/449)

<div class="topic-metadata">

**Author:** [@nicholas.jacksondesi](https://forum.readymag.com/u/nicholas.jacksondesi)\
**Replies:** 4\
**Last updated:** [July 20, 2022, 2:05pm UTC](https://forum.readymag.com/t/change-background-color-on-scroll-or-with-time/449 "2022-07-20T14:05:19Z")

</div>

Im looking to change the background color of my page by either time or scroll. Either would be a cool effect that I would like to bring to the page. I suck at writing code, but understand it for the most part and am flu…

---

## [The user can add an image in an authorized area within the website during their session/visit](https://forum.readymag.com/t/the-user-can-add-an-image-in-an-authorized-area-within-the-website-during-their-session-visit/3555)

<div class="topic-metadata">

**Author:** [@jordi\_rovirosa\_rodri](https://forum.readymag.com/u/jordi_rovirosa_rodri)\
**Replies:** 0\
**Last updated:** [September 16, 2024, 8:16am UTC](https://forum.readymag.com/t/the-user-can-add-an-image-in-an-authorized-area-within-the-website-during-their-session-visit/3555 "2024-09-16T08:16:34Z")

</div>

Greetings to all Readymag users, a pleasure :blush::raised\_hands:t2: I have a question and it is the following: When the user enters our website, could they have the option of adding an image in an area enabled for thi…

---

## [Font Inverting with Background](https://forum.readymag.com/t/font-inverting-with-background/3535)

<div class="topic-metadata">

**Author:** [@Joana\_Cardoso](https://forum.readymag.com/u/Joana_Cardoso)\
**Replies:** 2\
**Last updated:** [September 18, 2024, 2:18pm UTC](https://forum.readymag.com/t/font-inverting-with-background/3535 "2024-09-18T14:18:32Z")

</div>

Does anyone know how to create this invert while scrolling effect with the background? https://mainlyphotography.com/

---

## [Is there a way to hide a header on scroll down? and reveal it on scroll up?](https://forum.readymag.com/t/is-there-a-way-to-hide-a-header-on-scroll-down-and-reveal-it-on-scroll-up/1224)

<div class="topic-metadata">

**Author:** [@gusribeiro](https://forum.readymag.com/u/gusribeiro)\
**Replies:** 3\
**Last updated:** [September 18, 2024, 11:48am UTC](https://forum.readymag.com/t/is-there-a-way-to-hide-a-header-on-scroll-down-and-reveal-it-on-scroll-up/1224 "2024-09-18T11:48:34Z")

</div>

Thats it. I want to create a header that when I scroll down it hides and when I scroll up it appears. Here a reference of a site like this MakeMake × Elastic - Portfolio thank you

---

## [Animation header](https://forum.readymag.com/t/animation-header/3520)

<div class="topic-metadata">

**Author:** [@Fedor\_Velyaminov](https://forum.readymag.com/u/Fedor_Velyaminov)\
**Replies:** 2\
**Last updated:** [September 16, 2024, 12:22pm UTC](https://forum.readymag.com/t/animation-header/3520 "2024-09-16T12:22:03Z")

</div>

Hello everyone ! Could anyone help with header animation as on this website https://saffron-consultants.com/ Basically it’s a simple animation of header, which is reacting on scroll. In other words, simply sliding up wh…

---

## [Randomize coding question](https://forum.readymag.com/t/randomize-coding-question/1797)

<div class="topic-metadata">

**Author:** [@lalala](https://forum.readymag.com/u/lalala)\
**Replies:** 7\
**Last updated:** [September 16, 2024, 10:48am UTC](https://forum.readymag.com/t/randomize-coding-question/1797 "2024-09-16T10:48:15Z")

</div>

im using a paid plan and i would like to use the randomized effect on my page. I’ve been using this as a reference but the issue im facing is that i don’t want to have a random button for the whole website. i only want i…

---

## [External link to a specific section of site](https://forum.readymag.com/t/external-link-to-a-specific-section-of-site/3522)

<div class="topic-metadata">

**Author:** [@Nick2](https://forum.readymag.com/u/Nick2)\
**Replies:** 2\
**Last updated:** [September 16, 2024, 8:25am UTC](https://forum.readymag.com/t/external-link-to-a-specific-section-of-site/3522 "2024-09-16T08:25:34Z")

</div>

Hi there! How can I create an external link that navigates to a specific section of a single-page site? For example, similar to how a standard anchor works. It is necessary for this link to work when connected to a QR…

---

## [Custom code widget interaction with neighbour widgets](https://forum.readymag.com/t/custom-code-widget-interaction-with-neighbour-widgets/2780)

<div class="topic-metadata">

**Author:** [@Olga\_Sinenko](https://forum.readymag.com/u/Olga_Sinenko)\
**Replies:** 5\
**Last updated:** [September 16, 2024, 2:11am UTC](https://forum.readymag.com/t/custom-code-widget-interaction-with-neighbour-widgets/2780 "2024-09-16T02:11:36Z")

</div>

Hi all! I’m experimenting with some custom code and can not figure it out. My final goal is to implement foldable (collapse) text blocks: initially you can see several line of text with “Read more…” element below. You …

---

## [Overlaying Shots on Video but can't click video](https://forum.readymag.com/t/overlaying-shots-on-video-but-cant-click-video/3190)

<div class="topic-metadata">

**Author:** [@Mel\_S\_108](https://forum.readymag.com/u/Mel_S_108)\
**Replies:** 0\
**Last updated:** [July 3, 2024, 1:45pm UTC](https://forum.readymag.com/t/overlaying-shots-on-video-but-cant-click-video/3190 "2024-07-03T13:45:33Z")

</div>

Hi ReadyMag friends! I am looking to make a page of embedded videos as a portfolio I’d like the shots to be clicked and then play a youtube or video video that it corresponds with. The challenge I’m having is trying t…

---

## [Unable to play embedded videos on google chrome](https://forum.readymag.com/t/unable-to-play-embedded-videos-on-google-chrome/3322)

<div class="topic-metadata">

**Author:** [@Jo\_Jimenez](https://forum.readymag.com/u/Jo_Jimenez)\
**Replies:** 2\
**Last updated:** [August 15, 2024, 6:29am UTC](https://forum.readymag.com/t/unable-to-play-embedded-videos-on-google-chrome/3322 "2024-08-15T06:29:52Z")

</div>

Hi! I spent a lot of time embedded videos with custom code, (as someone who has no experience with coding it was difficult for me lol) but now I’m seeing the videos are not appearing in google chrome, but appear fine on …

---

## [HOW - Color Fade Background like THIS](https://forum.readymag.com/t/how-color-fade-background-like-this/3266)

<div class="topic-metadata">

**Author:** [@Shawn\_Convey](https://forum.readymag.com/u/Shawn_Convey)\
**Replies:** 10\
**Last updated:** [August 28, 2024, 8:22am UTC](https://forum.readymag.com/t/how-color-fade-background-like-this/3266 "2024-08-28T08:22:27Z")

</div>

Hey there! Anyone have any ideas as to how to do a color fading looping bg like this site https://www.amandakullman.com/ I tried to make a movie that looped but it rasterizes and isn’t nearly as clean as this. Any id…

---

## [Getting text to scroll within a text box?](https://forum.readymag.com/t/getting-text-to-scroll-within-a-text-box/3428)

<div class="topic-metadata">

**Author:** [@Loobyloo](https://forum.readymag.com/u/Loobyloo)\
**Replies:** 1\
**Last updated:** [August 26, 2024, 4:27pm UTC](https://forum.readymag.com/t/getting-text-to-scroll-within-a-text-box/3428 "2024-08-26T16:27:15Z")

</div>

Seems this should be an easy thing to do, but I’m new to ReadyMag and going bonkers trying to work it out! How do I get text to scroll within a fixed text box? I’m an editorial designer working with multiple paragraphs o…

---

## [Text blend mode not working](https://forum.readymag.com/t/text-blend-mode-not-working/3409)

<div class="topic-metadata">

**Author:** [@ale](https://forum.readymag.com/u/ale)\
**Replies:** 1\
**Last updated:** [August 20, 2024, 7:22pm UTC](https://forum.readymag.com/t/text-blend-mode-not-working/3409 "2024-08-20T19:22:06Z")

</div>

Hi there, I’m trying to use blending modes on my website so that the text turns white on darker backgrounds, and vice versa. The problem is that the text looks like it has 0% opacity. I can highlight the text with the m…

---

## [Dropdown Navigation Bar](https://forum.readymag.com/t/dropdown-navigation-bar/3395)

<div class="topic-metadata">

**Author:** [@Annie\_Geng](https://forum.readymag.com/u/Annie_Geng)\
**Replies:** 0\
**Last updated:** [August 17, 2024, 3:17am UTC](https://forum.readymag.com/t/dropdown-navigation-bar/3395 "2024-08-17T03:17:13Z")

</div>

I made a dropdown navigation bar using custom code (ex: https://codepen.io/taniarascia/pen/dYvvYv) and added it as an iframe to my project. However, when I try to click on the links, it says that my website refused to co…

---

## [Slideshow hyperlink?](https://forum.readymag.com/t/slideshow-hyperlink/3386)

<div class="topic-metadata">

**Author:** [@Jo\_Jimenez](https://forum.readymag.com/u/Jo_Jimenez)\
**Replies:** 0\
**Last updated:** [August 15, 2024, 6:36am UTC](https://forum.readymag.com/t/slideshow-hyperlink/3386 "2024-08-15T06:36:01Z")

</div>

Hi I’m trying to make a slideshow where each image is a link. I’m new to coding so it’s all confusing. I tried this method but nothing appears )-: Here is my code in the before body section, I’m pretty sure I’m using the…

---

## [Make a Slideshow a Link](https://forum.readymag.com/t/make-a-slideshow-a-link/3363)

<div class="topic-metadata">

**Author:** [@Angus\_Atwell](https://forum.readymag.com/u/Angus_Atwell)\
**Replies:** 1\
**Last updated:** [August 14, 2024, 10:46am UTC](https://forum.readymag.com/t/make-a-slideshow-a-link/3363 "2024-08-14T10:46:58Z")

</div>

Hi everyone, I’m trying to make a a slideshow which is set to ‘play on hover’ a link to another page. Is there a way to do this with custom code? Thanks

---

## [Pay-per-article](https://forum.readymag.com/t/pay-per-article/3364)

<div class="topic-metadata">

**Author:** [@Paula](https://forum.readymag.com/u/Paula)\
**Replies:** 1\
**Last updated:** [August 14, 2024, 10:41am UTC](https://forum.readymag.com/t/pay-per-article/3364 "2024-08-14T10:41:01Z")

</div>

Hi, I want to use Readymag to create a pay-per-article magazine and I want to know what are the options and code that are best to use. Is it a plug-in from another website? Are there any clever ways to add a paywall t…

---

## [How to import images in a custom code?](https://forum.readymag.com/t/how-to-import-images-in-a-custom-code/3338)

<div class="topic-metadata">

**Author:** [@bluesquare](https://forum.readymag.com/u/bluesquare)\
**Replies:** 1\
**Last updated:** [August 9, 2024, 11:26am UTC](https://forum.readymag.com/t/how-to-import-images-in-a-custom-code/3338 "2024-08-09T11:26:45Z")

</div>

Hello everyone! My question seems simple but I haven’t found a solution yet, I really hope you can help me. I have created a custom carousel, and with it I have written code like this to import images like this: "\<im…

---

## [Embed TikTok-Video](https://forum.readymag.com/t/embed-tiktok-video/3311)

<div class="topic-metadata">

**Author:** [@Laura\_Lena\_Hofmann](https://forum.readymag.com/u/Laura_Lena_Hofmann)\
**Replies:** 0\
**Last updated:** [August 2, 2024, 9:57pm UTC](https://forum.readymag.com/t/embed-tiktok-video/3311 "2024-08-02T21:57:47Z")

</div>

I want to embed TikTok videos like in this example: LusilBlek.com — Page 5. How can I do this? In addition, the embedded TikTok videos do not become smaller when I switch to the mobile view. Why is this? Here is the code…

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

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