MoeTalks

Gotcha.  I think I'm just gonna use CapCut and build a quick little gallery for this and call it a day.  Thanks @Ziggy

Is there a way to remove all the spacing between the slide show and the caption?  I've searched all over and tried to see what was in the inspector but I cannot seem to find how to target the space.  I've tried different margins and padding.  I've used the below and it's helped with the section margin but I cannot target the caption spacing.  If I use line-height: .9, it does move the text up but the text gets hidden behind this weird invisible box.  Is there a way to remove the margin/spacing between the captions in a simple slide show? I'm using a slide up animation at 5s with the simple slideswhow.  Thanks in advance.  

section[data-section-id="664a1d6722dbc7301be38715"]{
.gallery-slideshow {
    padding: 0px !important; margin:0!important
}
  .gallery-caption-content {font-size: 1.25rem!important;}
 
.gallery-slideshow {margin-bottom: 80px!important;
  }
}

https://www.moetalks.com/television/aes3#mothersday

PW 2024

It's the caption below that is adding the extra space because I am facing that right now.  If I can capture what the code is for that I will post it if someone hasn't already done it.

I'm closing this.  I'm doing something wrong but will deal with it another time.

Yeah I stil get this in markdown so I try not to use it anymore.  

I appreciate your thought process on this and I agree about Page header code and that is exactly where I would do it if the individual portfolio sections had a page code injection but thank you for the "as long as it works".  Have a great Sunday afternoon.

Hey @creedon

So, and tell me if this is improper way to do something but since I have the business plan I put the whole script in a code block on the page I wanted and it worked PERFECTLY on the page I wanted and it didn't show up on any other page.  Is that a wrong way to do this or is this acceptable?

Good morning @creedon.  I did both.  I only want it work on certain pages because not all the pages need a back to top arrow.  As you stated, when I do it the first way (which is the suggestion of Will Meyers), it works perfectly but it puts it on all pages, which I don't want.  When I do it the latter, it works on the page I want but I also get that extra top button you saw underneath the footer.  If there was a way I could suppress it on the pages I don't want that would be great.  Also, I'm trying to use this on the portfolio pages and those pages can sometimes be kind of funky.  I made a back to top button without java script which  worked great but on mobile pressing it was hit or miss.  It looked like it was behind everything.  With Java, the button was on top of everything and I was able to hit it on mobile every time.  I tried a z-index on the button that I created without Java but that didn't work.  I will keep plugging at it.  Thanks for responding.  I appreciate it.

@tuanphan.  Thanks.  I tried his code and it works on the page I put the css code on but on every other page underneath the footer it shows the below photo.  This is not something you can help with, I've emailed him so hopefully he will get back to me.  If not, back to the drawing board but I would totally use his if it worked.  Thanks for the recommendation.

moetalks.com

2024

This is on every page under the footer

this is the way it looks on the page that I wanted it on,.  PERFECT

Java, as I have just proven, is not my thing.  Can someone recommend any plug-in site that they have used that they feel like they could recommend.  Ghost Plug-ins has one but I want to just make sure look around before I make a decision.  Thanks.

Actually that was not half bad but it did not match the header and made the footer bigger than I wanted and the bottom of the footer was still square but that gave me an idea.  I simply made the background of the footer section white, add a shape to cover the entire footer, added the radius and color I wanted, sent the shape to the back and brought the text forward an now it looks just like the header.  Thank you.

I was able to get the header rounded with the code below. I tried to copy and change it to footer or footer.sections and what is produced was nothing like the header.  I don't know what element I should be targeting and looking in inspect I only see the words fluid-engine with numbers.  I would love to be consistent with the rounded corners but if it can't be done I can go back to being square.  Thanks.

www.moetalks.com

PW 2024.  On the homepage.

.header {
  margin: 0px;
  border-radius: 20px;
  border: 2px solid #FFC0CB;
}
 

OUCH Oh @Ziggy that just hurts my heart 😂.  I thought I was doing something.  Thank you for looking this over I will keep reading and looking at videos to get a full understanding.  What is your buy-me-coffee link?  I appreciate you taking the time. 

@Ziggy  Ok, below is an example.  I added all of these to my sitewide code injection because I want these to affect everything.  But I left anything that dealt with data-section, #collections, or #blocks in the Custom CSS portion.  Some of which could get added to a page code but I can never find where I added the code which is why I leave it i Custom CSS.  Is this the way you mean and thank you again for the response. 

<style>
/* changes font site wide */
@import url('https://fonts.googleapis.com/css?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.instrument-sans-instrument {
  font-family: "Instrument Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
h1, h2, h3, h4, p { font-family:"Instrument", sans-serif;}
</style>

<style>
/* Change Burger Menu Color On Mobile */
body:not(.header--menu-open) .burger-inner>div {
    background-color: white!important;
}
</style>

<style>
/* Move Over Hyperlinks */
p a {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

p a:hover {
  margin-left: 20px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}
</style>

<style>
/*smooth scroll*/
html {scroll-behavior: smooth;}
</style>

<style>
/* Header Navigation - Pill Hover Style - Ghost */
.header-nav-item a {
  padding: 0px 5px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}
.header-nav-item a:hover {
  background: black;
  padding: 0px 5px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}
</style>

<style>
/* this changes all video captions on entire site */
.video-caption-wrapper 
{text-align: center; font-size: 1rem;
padding:0!important;}

.video-caption p {
    margin: 10px 0 0!important; ;
line-height:25px;}
</style>

<style>
/* Add Shadow To Videos */
.sqs-video-wrapper {
 box-shadow: 5px 15px 5px rgba(0,0,0,0.2)
}
</style>

<style>
/* This is for <br> line break that separates the stories */
  hr {
  overflow:initial;
  &:after {
    content:'';
    width:15%;
    height:10px;
    display:block;
    background: #0b5394;
    top:-5px;
    margin:auto;
    position:relative;}
}
</style>

<style>
/* this hover affects entire site */
a {color: #0b5394!important;
text-decoration: none!important;
  font-weight:bold!important;
}
a:hover  {
     color: #0b5394!important;
  text-decoration: underline!important;
  font-weight:bold!important;
  }
</style>

<style>
/* changes header and section width of all pages and images and videos */
#header {
    max-width: 1496px;
    margin: auto;
}
section.page-section {
    max-width: 1496px;
    margin: auto;
}
</style>

Now that I have the business plan, I'm trying to read articles and understand when I should place code in my header/footer and when I should not.  EXAMPLE.  Below is the google font that I am using throughout the site.  Shouldn't this go into the header code-injection instead of the CSS design box.  I'm still researching this to see how to best implement these change.  My thought is sitewide changes can go into header code while specific ID's can go into CSS Design or even page code injection (which I think I understand but I will look up for better understanding).  Just wanted some of your professional thoughts.  Thanks.

@import url('https://fonts.googleapis.com/css?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.instrument-sans-instrument {
  font-family: "Instrument Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
h1, h2, h3, h4, p { font-family:"Instrument", sans-serif;}

// -- END FONT DESIGN CHANGE -- //
 

Hi @tuanphan.  Thanks for that but because I have a  full bleed video in that section, making it white completely covers the video.  However, I replaced #fff with transparent and right now that seems to be working.

@tuanphan.  Now I'm having the same issue on the home page.  Not sure what is going on.  I removed all CSS but that was not it.  Just like @jasonconway  see a black screen flash before the video plays on 7.1.  I've used your codes unfortunately those are not working.

moetalks.com

pw 2024.

Good Morning @Ziggy.  Thank you for that.  It did not work until I modified it by adding .sqs-shape to it since the colors are shapes.  Once I did that your original CSS worked perfectly, but with one caveat and maybe you have some insight on this.  On yours at 10s, the 50% color just popped in at 0.5.  I could clearly see that it was fading in but at that last keyframe, bam, 0.5.  I've tried the below thinking that every 1s would increase the fade in by 20% so that the last keyframe wouldn't have that visible contrast.  Is there a way to better fade that in or is this the best under the circumstances.  20% could very well make a difference in the fade so not a big deal if it is the best for right now.  And thanks again for pointing me in the right direction. 

#block-9d6cf7bb31c4ae46e470 .sqs-shape, #block-42eab21575a620f1535a .sqs-shape {
  animation: fade-me-in 6s;
}
@keyframes fade-me-in {
  0% {opacity:0;}
  20% {opacity:0.1;}
  40% {opacity:0.2;}
  60% {opacity:0.3;}
  80% {opacity:0.4;}
  100% {opacity:0.5;}
}
 

Both of these blocks are .sqs-shapes.  I have two different colors on each shape that I want to fade in but only up to 50%.  The problem is they keep going to 100% and I can't for the life of me figure out why?   I read something about jQuery and using fadeTo{} but that looked complicated for what I want.  I know the opacity can be at 50% because when I remove the animation and just use 50% it works.  But I have the blocks on top of a video that gives it a cool affect.  See video attached.

The only reason I'm having it fade in is because when the page loads the shapes load before the video so you see this start pink/blue color and then the video comes on.  Thanks.

moetalks.com/home

PW 2024

#block-9d6cf7bb31c4ae46e470, #block-42eab21575a620f1535a  {
animation: fade-me-in 10s;
}
@keyframes fade-me-in {
  0% {opacity:0;}
  50% {opacity:1;}
}

Hi David. 

I tried copying yours and those didn't work. I tried mine below and those didn't work either. 

/television/wait -> /home 301. that didn't work for me

https://www.moetalks.com/television/wait -> https://www.moetalks.com/ 301.  That didn't work either.

No worries here.  I'm going to give up on this one right now and just create something for that wait page in the portfolio section for the time being.  The site is still a work in progress so eventually I will look back at this and figure it out.

Thank you anyway.  I do appreciate your time.  

It's the same but I did a work around because I hate markups.  I just put the image in it's own section instead of trying to wrap the text around it and called it a day.  

https://www.moetalks.com/television/aes3
PW 2024.

@DavidStewart  Hi David.  Unfortunately that did not work for me and I should have mentioned that this is a portfolio page.  

I've tried

www.moetalks.com/portfolio/television/wait -> www.moetalks.com 302
www.moetalks.com/television/wait -> www.moetalks.com 302

and I've replaced the moetalks with moecritiques since that is what I signed up with squarespacewith, however, I have moved my moetalks away from wordpress to SS but I have another 3 weeks before I can officially hand it over to SS but moetalks is tied to SS and working.  I'm sure this is user error.  Any thoughts on this?  Thanks. 

I just named that url slug "wait" for the time being but I would like that url slug to either point back to the home page for the time being. Is this possible.

https://www.moetalks.com/television

PW 2024

Thanks

On 11/30/2021 at 6:05 PM, iamdavehart said:

Hey,

You'll probably need a business or premium subscription to do this as it has code.

firstly you need to upload your file, so create a text box and insert a link. In the little link dialog click the cog and select File from the dialog and then upload your file. click close and this will give you a url to access your file. it will be something like "/s/key.wav". once you've uploaded it you can delete the link, the file is there now.

 

Now you can add the code. Insert a code block and do something like this. This is just a demo, so you'll need to provide your actual site to get it exactly right, but you can try this to get your sound file working:

<a href="#" id="linkToPlaySound">Click Me For Sound</a>

<script>
document.querySelector("#linkToPlaySound").onclick = function(e) {
  e.preventDefault();
  const audio = new Audio("/s/key.wav");
  audio.play();
}
</script>

this has two parts. 

• the first part is the link. you won't need this in your final code because you've got some key pictures or something like that, but use this first to get the sound playing
• the second part is the script. this finds the link and sets its click event to find the audio element and play it. note that it has our key.wav file. if yours is named differently change that code.

Once you've got that working we should edit it for your site. (but it's easier to debug the code block above first until you've got the sound playing).

On your site we need to target the section with the keys and attach our code to each of the URLs, we also need to make sure that the links aren't followed immediately otherwise you wont hear the sound it will just navigate to the other page.

using a code block on the page (the same one above if you want)

<script>

  function playKeySound(e) {
  	e.preventDefault();
    const clicked = e.target;
    const audio = document.querySelector("audio");
    audio.play();
    // now remove the handler and click it again
    // after enough time has elapsed to play the audio
    clicked.onclick = null;
    setTimeout(function() { clicked.click(); }, 2000);
  }
  
  const keyImages = document.querySelectorAll("section[data-section-id='615c8149fd9a9c637af255f4'] a.sqs-block-image-link");
  for (let i=0; i<keyImages.length; i++) { keyImages[i].onclick = keyHandler; }
  
</script>

this time round, we have a function that plays your key sound and then waits 2 seconds (2000 = milliseconds) and clicks the link a second time. After the function we go through every link in the relevant section on your website and assign that function to all of them so it doesn't matter which one you click.

Hopefully this works out, although I should point out that I'm really not sure about sound on websites unless its absolutely necessary. Putting it here for educational purposes though and I appreciate its a stylistic choice.

 

 

First, thank you thank you thank you.  I got this working but I did it in an unusual way and I want to make sure tha the way I did it was still correct.  I do have the business plan but I wanted a word in a sentence to play audio when clicked .   Here is a example of what I did in markdown and it works.  

This is test of the word that when I click on it it plays the audio.  The word is  <a id="agathokakological">agathokakological🔊</a>, and it worked.

<script>
document.querySelector("#agathokakological").onclick = function(e) {
  e.preventDefault();
  const audio = new Audio("/s/agathokakological.mp3");
  audio.play();
}
</script>

My only question is, is this the correct way to do this or should the script of gone somewhere else.  I originally did this in a code block as was suggested and when i pasted my paragraph in, it worked as well but of course it's a code block so everything was on one line, and I got that message that said script is disabled until I exit.  I just want to make sure I've done this properly.  I may pose this as a question as I am not sure if @iamdavehart is still on but if he is thank you again.   If you are one please send me your coffee link.