MoeTalks

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;} } 2024-05-06_17-42-20.mp4 what is should look like.mp4

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

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.

This worked for me too. Thank you @tuanphan

This is the easiest way to describe what I would like to accomplish. I would like to put that audio symbol as my audio block and have it play within SS. Audio blocks can do this but they are HIDEOUS looking 😂 and I've tried to customize the player from insidethesquare but I suck at trying to customize it to this degree. I would only one the audio symbol. Is it possible to customize the audio block to this degree? https://www.dictionary.com/browse/sesquipedalian https://www.dictionary.com/browse/sesquipedalian

I’m using a portfolio gallery to upload photos of film, tv shows, etc that I review. I have css script so that when you highlight over the image it transforms in scale and works beautifully. But I don’t see a way to have a gallery like this and have text next to it so I’m stuck with just an image and I cannot for the life of me figure out how to target that image to do the the same transform with image and text over it. Is this even possible? @Beyondspace made a Classic Gallery Blocks that works exactly as intended but again, even when inspecting I cannot seem to get this to transform. The Site is: https://www.moetalks.com/film-tv And the password is 2024 If you scroll down you will see one that says abbott elementary in the portfolio that works but the one below it is the one that I cannot get to work and I want to separate film and tv. Any suggestions and thanks in advance. This is just a portion of the script. There is more to this but I just wanted to give you an idea of the script that’s working. { .gallery-grid-item img:hover{height:100%!important; width:100%!important; transform:Scale(1.2); overflow:hidden!important; transition-duration:1s} .gallery-grid-item {overflow:hidden!important}