GOMAPRODS

Any idea ?

Hi Tuanphan, thanks for your reply. That's what I thought. We can't just reapply the squarespace #header.

That's right. When we click or scroll, the background changes. I want to make it bold instead.

Hi everyone, I just wanted to know if it is possible to add the site header and footer to the lock screen via code injection ?

Hi tuanphan, here is the url : https://www.gomaproductions.com/new-page2.

@yubrajs any suggestion ?

Password : gomaprods2023++ Hi guys, hope you're well. I found a bit of code that I'm trying to adapt. But with no success, maybe you can help ? When we scroll down, the background of the menu on the left is highlighted to keep track in which section we are in. I just wanted to change that so that typo becomes bold, but I can't find what passage in the code I'm supposed to modify. (Tried a bit of everything). Here are the codes : <div class="wrap"> <nav class="nav"> <ul> <li><a href='#section1'>Section 1</a></li> <li><a href='#section2'>Section 2</a></li> <li><a href='#section3'>Section 3</a></li> <li><a href='#section4'>Section 4</a></li> <li><a href='#section5'>Section 5</a></li> </ul> </nav> <div class="main"> <section id="section1" class="section1"> <p>Scroll the page up and down and the left hand menu will automatically highlight the current section. No JS was harmed in producing this function.</p> <p>This demo is proof of concept only and requires on a few 'magic numbers' so is of limited use other than an exercise in what can be done with CSS alone.</p> <p>Enjoy...</p> <p>scroll</p> <p>scroll</p> </section> <section id="section2" class="section2"> <p>scroll</p> <p>scroll</p> </section> <section id="section3" class="section3"> <p>scroll</p> <p>scroll</p> </section> <section id="section4" class="section4"> <p>scroll</p> <p>scroll</p> </section> <section id="section5" class="section5"> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> </section> </div> </div> html { box-sizing: border-box; overflow: hidden; margin: 0; padding: 0; } *, *:before, *:after { box-sizing: inherit; } body { scroll-behavior: smooth; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */ height: 100vh; margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style: none; } .wrap { display: flex; align-items: flex-start; position: relative; background: #000000; } .main { flex: 1 0 0; background: #000000; } .main p { padding: 0 10px; margin: 0.5rem 0 1rem; } .main .item1 { margin: 0 0 0 -220px; /* magic number alert*/ } .nav { width: 200px; position: -webkit-sticky; position: sticky; top: 0; margin-right: 1rem; z-index: 2; } .nav a { padding: 5px 10px; text-decoration: none; display: block; height: 2rem; /* magic number alert*/ color:white; } .nav a:hover { background: #ccc; } /*fleche*/ .wrap section:before { content: "\2190"; display: block; margin: 0 1rem 0 0; position: -webkit-sticky; position: sticky; top: 1px; left: 0; height: 2rem; /* magic number alert*/ line-height: 2rem; text-align: right; background: linear-gradient(to left, green, green 10px), linear-gradient(to left, #eee, #ccc); background-repeat: no-repeat; background-attachment: fixed; background-size: 200px 2rem; width: 198px; margin-left: -215px; color: transparent; } @supports (-webkit-hyphens: none) { .wrap .main section:before { color: red; background: transparent; } } .wrap .section2:before { top: 2rem; /* magic number alert*/ background-position: 0 2rem; } /* magic number alerts below */ .wrap .section3:before { top: 4rem; background-position: 0 4rem; } .wrap .section4:before { top: 6rem; background-position: 0 6rem; } .wrap .section5:before { top: 8rem; background-position: 0 8rem; }

Hi Ziggy, I prefered Gdrive because their is no link to youtube and the play button is not ugly (button you can't get rid off).

Works like a charm ! Thank you yubrajs !

4h looking for a solution and still nothing... Hi everyone, going mad here. I'm trying to autoplay a google drive iframe video. The best I could find is this : <div class="container_video"> <iframe class="responsive-iframe" src="https://drive.google.com/file/d/1P7lIERRkKBjwBzPC5gO0y5VVdBT4TwI2/preview?autoplay=1" width="1200" height="675" allow="autoplay" ></iframe> </div> But the video keeps roaming. Is it even possible ?

I started a new topic for that.

https://www.gomaproductions.com/iad mdp : gomaprods2023++ Hi everyone, I have a transition to black and white when we hover the pictures, but when we hover the play button (on top of it), the picture goes back to normal. I'm trying to keep it in black and white but with no result. (I tried "pointer-events: none;" on the play button but it doesn't work). do you happen to have a solution ?

Just a[data-wm-popup] { position: unset !important; } made it work, thanks man !!!! Like you may have seen, I have a transition to black and white when we hover the picture, but when we hover the play button, the picture goes back to normal. I'm trying to keep it in black and white but with no result. (I tried "pointer-events: none;" on the play button but it doesn't work). do you happen to have a solution ?

https://www.gomaproductions.com/iad mdp : gomaprods2023++ Hi all, and happy new year ! I've got a problem here, I searched for solutions, but I can't seem to make them work... I would like to align a play button (image) on an image background. Here is the code (that should work, but don't for some reason) : <div class="thumbnail2"> <a href="#wm-popup=/videos#block-yui_3_17_2_1_1698736940101_41778"> <img class="img" src="https://static1.squarespace.com/static/64da9172292d1a5efdb8d98b/t/6540cc49574078325f53e215/1698745419915/2023-10-31+09_28_05-IAD+-+Google%C2%A0Drive.png" width="1200px"> <img class="play" src="https://static1.squarespace.com/static/64da9172292d1a5efdb8d98b/t/658f0853b55b4a219e6b8ae9/1703872595585/play_button.png" width="200px"> </a> </div> .thumbnail2{ display: inline-block; position: relative !important; } .img{ opacity:1; transition: filter .3s ease-in-out; -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */ filter: grayscale(0%); /* FF 35+ */ } .img:hover{ transition: .3s ease; -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */ filter: grayscale(100%); /* FF 35+ */ } .play{ opacity:80% !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%); width: 150px; height: 150px; } .play:hover{ opacity:100% !important; } Please help.

Hi tuanphan, thanks for the work ! Could you translate the 3rd code : https://codepen.io/ChidVanid/pen/EKJgBP ? Please.