Jump to content

MoeTalks

Member
  • Posts

    125
  • Joined

  • Last visited

Everything posted by MoeTalks

  1. Yes i saw the drag handles. I was hoping they would act like blog pages but thats fine. There is not a lot right now. Thanks @creedon have a great day
  2. I published a video on a blog post today and changed the date to April 14, 2023 but it is still showing up as the first post. Do I have to manually go through all of these and re-arrange them? Thanks https://moetalks.com/the-playlist PW 1695
  3. I went a totally different route and scratched that. But thank you.
  4. I just don't understand why this keeps happening when I make a change and then end up having to redo the entire section(s) of a page (no exaggeration). I've uploaded a gif. Why is there so much extra spacing. The experience is horrifying when viewing it on the web. The inconsistency is maddening. I've change spacing, margins, etc. and first it appears fixed, and then wammo. I have the max width set at 1200 on purpose so that it doesn't stretch out but if a user opens their browser far out spacing once again becomes off kilter. I understand that this is fluid engine but I know i'm not the only one who is going through this because I'm reading so many of these same stories that my head hurts but there doesn't seem to be any solution to this. Am I using the wrong browser, (chrome), should I use firefox? Do I need to try and keep my browser width the same size when I am editing (which is hard to know since I have a 34 inch curved monitor and a 16 inch macbook pro) so they are never going to be the same. Where do I need to report this to because I understand this is a forum and thus far no one has had an answer so please just tell me where to take this higher and I will? It costs to much money and to much time to have to constantly worry about a spacing issue. Thank you for listening.
  5. Gotcha. I think I'm just gonna use CapCut and build a quick little gallery for this and call it a day. Thanks @Ziggy
  6. 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
  7. 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.
  8. I'm closing this. I'm doing something wrong but will deal with it another time.
  9. 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.
  10. 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?
  11. 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.
  12. @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
  13. 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.
  14. 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.
  15. 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; }
  16. 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.
  17. @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>
  18. 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 -- //
  19. 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.
  20. @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.
  21. 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;} }
  22. 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
  23. 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.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.