Jump to content

PlasticArcade

Member
 View Profile  See their activity

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Everything posted by PlasticArcade

  1. PlasticArcade
    it should have a footer with page info on each page like this one... it shows up fine if I remove the CSS for the parallax BG's, however if I use that feature it disappears and just shows the image you posted above.
  2. PlasticArcade
    That worked thanks, now there is still the issue of my footer disappearing on pages that use this effect, is there a way to get that back?
  3. PlasticArcade
    I want to use CSS code to create floating fixed backgrounds like on this website https://briankesinger.com Like a parallax effect where the content floats over top of the backgrounds. Here is a test page I setup https://creativejourney.life/test125 site pass: nga2023 Here is the my CSS code that I used so far, however when I try to use more than one background with the effect it breaks the page. I am only able to get one background to function not multiple backgrounds like the page above. Additionally I loose my footer as well, which totally disappears. //-- Fixed BG Page Test mountains --// section[data-section-id="632a686e08fe477e2b4ad9d8"] { .section-background { background-repeat: no-repeat; position: fixed; z-index: 0; } } Any help would be awesome. I really like the look and want to get this to work. thanks 🙂
  4. PlasticArcade
    Solution!... So I have two solutions to my problems... First Solution for the invisible elements that get shown if I have a visible object that is the size of the my page or larger, in my case I used a shape along the left side of the page that stretched the whole height this kept invisible elements from shrinking the page when they disappeared, there may be a coding way around this like making the page stay the same dimensions even if elements are are larger than the page are but I don't know this code. Second Solution This is less of a solution and more of a bandaid, however... The issue is with Squarespace API that when I use CSS code to alter the page in some way, note; it's usually only visual code elements that cause the issue, but my solution at the moment is to remove all my CSS code for the block I am working on and save it in a separate text doc then paste it back once I make the changes. Unfortunately this doesn't fix the issue causing the problem but it does keep me from pulling hair out when my page elements jump around on me as I watch my whole page destruct itself in front of my eyes SO for the meantime I will be removing my code when I edit a page then put it back again once finished, at least until Squarespace fixes their CSS code problem. Additionally another thing that could work is to add a code in your CSS that turns it off when you are editing a page and back on when you are viewing it live. I assume this would fix the issue but I'm not sure and I do not know how to code that in CSS. So that's about it
  5. PlasticArcade
    Here's what I figured out.. anytime I apply CSS to formatting an element on the page no matter what it is it freaks out and the page elements move around or stop working al together. If you use the site without any CSS code at all it works fine and has no issues This is problem because Squarespace removed elements that I used in my page before when they updated to the fluid method so now I have to code them back in with CSS, so I can either have a page that looks weird, change my design and use something basic and boring or leave Squarespace till they fix the problem. the fact that I cannot use CSS code really not acceptable I tried this code on a text box and same thing happened I made a new page with nothing else on it to do the test and same things happened everything stopped working when I used the CSS code.. once I removed the code everything went back to normal and worked fine. .fe-block-yui_3_17_2_1_1678469370930_40214 { padding-top: 6% !important; padding-bottom: 18% !important; padding-right: 6% !important; padding-left: 6% !important; }
  6. PlasticArcade
    Here's some code Im using for the HOME2 page Still have the issue if I edit the mobile version everything stops working now that I have added the hover effects and animations to this page I can no longer edit the page everything is moving around on me again. /* HOME2 TEST */ /* BG */ .fe-block-yui_3_17_2_1_1678418564612_23150 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678418564612_14015:hover ~.fe-block-yui_3_17_2_1_1678418564612_23150 { display: block; } /* text */ .fe-block-yui_3_17_2_1_1678418564612_28726 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678418564612_14015:hover ~.fe-block-yui_3_17_2_1_1678418564612_28726 { display: block; } /* END HOME2 TEST */ /* HOME2 TEST 2 */ /* Text with BG */ .fe-block-7037f3f1143f999c8e88 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-6f912b053e299dd59052:hover ~.fe-block-7037f3f1143f999c8e88 { display: block; } /* END HOME2 TEST 2 */
  7. PlasticArcade
    I setup a page called HOME2 its linked at the top menu that has the effect working... I redid it on a separate page and it seems to be working there... I was also using a text box with background originally, I like it better but I had issues with that so on HOME2 I used a separate shape and text box and altered the code to incorporate that... Im going to try adding the old version to the second image and see if it works or not.
  8. PlasticArcade
    the home page but its gotten all screwed up Im going to have to start over I think. All the page elements keep sliding around I had to dump my CSS code a bunch of times and start over. I can't even edit the page now without something move or shifting on me and whenever I edit the mobile version it screws up the regular version even worse. These effects were working fine a few months ago without any problem then they just stopped working. I didn't change anything I just logged in this week and everything was messed up. Now I can't seem to fix it 😞 I removed the effect from the other two images only "World Building" doorway image has the effect still, I think I'm going to just remove the animation and hover effect and see if that changes anything. I really like it... it adds some kool flash to the site but its not worth the headache if I can't get to work properly or it breaks all the time.
  9. PlasticArcade
    /* Home Door 1 Hover Text */ .fe-block-f5c934caa91889b9e570 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678404060999_4355:hover ~.fe-block-f5c934caa91889b9e570 { display: block; } /* Home Door 2 Hover Text */ .fe-block-ff32fbe389b37d7b7de5 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678403196682_6422:hover ~.fe-block-ff32fbe389b37d7b7de5 { display: block; } /* Home Door 3 Hover Text */ .fe-block-1e85010964a3f108df10 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678385933045_5384:hover ~.fe-block-1e85010964a3f108df10 { display: block; }
  10. PlasticArcade
    So new issue whenever I edit my mobile version of my site my CSS hover effect stops working... I have a hover effect where a text box appears under my gate images on my home page, I have deleted everything and started over twice and as soon as I edit the mobile version code it all stops working.
  11. PlasticArcade
    Hello So I am having an issue on my main page. I have a mouseover hover effect on some images that displays or shows a text box when you hover over the image, this causes the page to jump around when viewed in safari or firefox and when using the editor in chrome, it doesn't seem to do it when viewing the page in chrome browser on its own. website creativejourney.life sp: nga2023 Also... An unrelated question to the issue above, how do I turn off the hide/reveal effect in edit mode so I can edit the text boxes?
  12. PlasticArcade
    I figure it out added " @media screen and (max-width:767px) { display: block; }" Full CCS Below .fe-block-6313f2fbbc5132d2d90956ca { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-6313f2fbeeba99d22dcc2360:hover ~.fe-block-6313f2fbbc5132d2d90956ca { display: block; }
  13. PlasticArcade
    Site URL: https://creativejourney.life Hello I am trying to disable this effect on the mobile version of my site Pass is ngart2022 if you want access the site Heres the CSS Code I am using .fe-block-6313f2fbc9287602656c2b6d { display: none; pointer-events: none; } .fe-block-6313f2fbcf37a66948dfbf63:hover ~.fe-block-6313f2fbc9287602656c2b6d { display: block; } I want the captions to the images to be active and visible all the time on mobile essentially I want to disable the "display: none;" on mobile versions and not wait for the hover Thanks for the help
  14. PlasticArcade
    I wasn't getting any response so I changed it... Im now using a floating image from the section below, instead of trying to figure out how to float a section and make it transparent... I would still like to do that if I can but I couldn't get it to work as I said. the images above are from the same page, I changed what I did but I could setup another page with the same thing if you wanted me to I guess.
  15. PlasticArcade
    Site URL: https://plasticarcade.com Hello Here is my site and pass https://plasticarcade.com @PLA2022 So I have a floating section over my top section and I made the section background transparent but now there is a white background there. My whole point to this is I want to to have a floating section with my site title floating overtop a gallery slideshow for top banner auto cycling though image I want this to be transparent with a slight color where you can see the gallery behind the section background. This is what I have... And this is what I want... I'm using a gallery slideshow because it animates on its own and I don't have code injection to add animation to banner slideshow. Separate thing to the background thing Another issue I'm also having some weird white color shifting effect on my menu at the top, I know its because of the social icons because when I remove them it has no problem
  16. PlasticArcade
    Well I couldn't figure out a way to fix my links like I had in my Wordpress sites in the past so instead here was my solution to the problem... Instead of making the links function differently on different pages I just hid the primary menu on my home page and created a custom menu which had the jump to anchor links in it. Then I use the regular menu with normal links in my other pages so I can get the scroll effect on the main site and use the normal everywhere else. Here is the code I used to create the solution /*HORIZONTAL STICKY CONTENT NAV - 7.1*/ section[data-section-id="61b115821e337f2af945c3e4"] { box-shadow: 0 5px 20px rgba(0,0,0,0.08); opacity: 0.95; min-height: 0 !important; position: sticky !important; -webkit-position: sticky !important; top: 0; z-index: 999; } section[data-section-id="61b115821e337f2af945c3e4"] .content-wrapper { padding-top: 20px !important; padding-bottom: 20px !important; } section[data-section-id="61b115821e337f2af945c3e4"] .html-block { padding-bottom: 0 !important; text-align: center; } section[data-section-id="61b115821e337f2af945c3e4"] .html-block p { display: inline-block; margin: 0 20px; } I did not come up with this code myself I found it here from this YouTube video and website https://beatrizcaraballo.com/blog/sticky-content-navigation-squarespace Hope this helps anyone that is trying to do a similar thing. She goes through several different kinds of menu navigations, really great video.
  17. PlasticArcade
    Site URL: https://plasticarcade.com Hello so I setup my page to use mostly one page design with links in header to navigate to anchor links on the main page. Problem is when I goto my blog section for instance the links don't work anymore... so if I fix it by using full links like this; https://plascticarcade.com/#about instead of just "#about", it works on external pages but it breaks the links and scrolling effect on the home page. Is there a way to fix this? thanks and any help is appreciated
  18. PlasticArcade
    alright so this was my best solution I could figure out. since I think to make this work I would need to use code injection which I don't have access to, I am using the effect I want on an image in my footer this way the ID can be grabbed from there and applied to any page that I want it on. I was going tp use an assets page that was unlinked and just link or call to that element from that page but I could't get it to work. So at this time unless someone can show me another way, the only way to use the rounded square clipping mask on your list images is to have the shape element used already on a picture in the page with the list or carousel. here is my code I used //-- List image clip Round Square section[data-section-id="61af1790fc334c5c2cf3597d"] .list-item .list-image { clip-path: url(#yui_3_17_2_1_1639017864666_15988); -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988); } //-- Carousel Image clip Round Square section[data-section-id="61aedbcb31c0e67b5079a058"] .user-items-list-carousel__slide .user-items-list-carousel__media-inner { clip-path: url(#yui_3_17_2_1_1639017864666_15988); -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988); } Code Breakdown - the first part is the section or block id targeting the specific list I want section[data-section-id="61af1790fc334c5c2cf3597d"] - then there is the list id - this targets the lists or second one which targets carousels (you can use this without the block/section id and it will target all lists or carousels) .list-item .list-image - Last was the capping mask path which I grabbed from the image in my footer, I just used my logo because I wanted it there anyways. (You can apply the desired clipping mask to any image in the page though. You can also apply it to a transparent png this way the effect and image are not seen in your footer, you can use these as custom spacer images. This will allow you to still use the effect with no code injection needed) clip-path: url(#yui_3_17_2_1_1639017864666_15988); -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988); Keep in mind that these codes are unique and you will have to grab the ones from your own site. its not a better solution but its a solution unless someone can give a better one And here's the result in the image below
  19. PlasticArcade
    I figured out the password thing and sent you a private message... -------------------------------------------------------------------- Its using a clip path which I knew I found the actual path code I just dont know how to convert this to CSS to apply to my list images I know this is my tag or block id for my list images and carousel images .list-item .list-image .user-items-list-carousel__slide .user-items-list-carousel__media-inner I know that Squarespace is using an svg clip path to do the shapes on their regular images and I found the actual path code, Im just not sure how to use it, this is kind of a new thing to me I've never used before. Here is the code I found on my site that is causing regular images to shape clip or mask clipPath id="fd0d55da474762a56c8c" clipPathUnits="objectBoundingBox" path d="M0.5,0 C0.768,0,0.894,0.056,0.919,0.081 C0.944,0.106,1,0.242,1,0.505 C1,0.768,0.947,0.891,0.919,0.919 C0.891,0.947,0.768,1,0.5,1 C0.202,1,0.11,0.948,0.081,0.919 C0.052,0.89,0,0.768,0,0.5 C0,0.232,0.053,0.109,0.081,0.081 C0.109,0.053,0.232,0,0.5,0" <clipPath id="fd0d55da474762a56c8c" clipPathUnits="objectBoundingBox"> <path d="M0.5,0 C0.768,0,0.894,0.056,0.919,0.081 C0.944,0.106,1,0.242,1,0.505 C1,0.768,0.947,0.891,0.919,0.919 C0.891,0.947,0.768,1,0.5,1 C0.202,1,0.11,0.948,0.081,0.919 C0.052,0.89,0,0.768,0,0.5 C0,0.232,0.053,0.109,0.081,0.081 C0.109,0.053,0.232,0,0.5,0"></path> </clipPath> <path d="M0.5,0 C0.768,0,0.894,0.056,0.919,0.081 C0.944,0.106,1,0.242,1,0.505 C1,0.768,0.947,0.891,0.919,0.919 C0.891,0.947,0.768,1,0.5,1 C0.202,1,0.11,0.948,0.081,0.919 C0.052,0.89,0,0.768,0,0.5 C0,0.232,0.053,0.109,0.081,0.081 C0.109,0.053,0.232,0,0.5,0"></path> This is the coordinates for my clipping mask. In the code above I just used the clip path id and assigned it to the the list images, like the code above in my original post, this works but if I remove the original image the slip is removed as well because the ID no longer exists. I know now that I need to use a clip path function in my CSS and I already know where to call it to based on the list id but I dont know where to go from here grabbing those coordinates and what code to use to make it work. Im sure if I fiddled around with it enough then I would get it to work, anyhow this is where Im at, at this point, I will keep plugging away.
  20. PlasticArcade
    Yes that is an example of what I have done already on my site, but if I remove the first image section with the make it stand out title, that image the applied shape wrapper disappears from my lists the second two images and they go back to square shape. I want to keep the style on the lists and carousels without relying on another element that I do not want in the site. I hope that makes sense. I guess another way to explain it I grabbed the code attached to the first image and applied it to the second images, but without the first image remaining on the page the effect no longer works because its reliant on the first image with the single picture. I'm a Squarespace nub so don't know how to share my site with others or create passwords stuff etcetera.
  21. PlasticArcade
    Hello I am trying to add an image shape / wrapper that you can use on images to my list images I have gotten it to work sort of, but only if I keep the original image with shape applied in the webpage, if I change anything it goes away. I want to be able to use this independently from the images in the site Here is my current CSS code that I have written but its not a permanent solution as I said above if I remove or change the original image with the shape on it from the page it reverts back. I'm not sure what url or path I need to use to call the shape function on my list and carousel images. //-- List image wrapper Round Square .list-item .list-image { clip-path: url(#fd0d55da474762a56c8c); -webkit-clip-path: url(#fd0d55da474762a56c8c); } //-- Carrosel Image wrapper Round Square .user-items-list-carousel__slide .user-items-list-carousel__media-inner { clip-path: url(#fd0d55da474762a56c8c); -webkit-clip-path: url(#fd0d55da474762a56c8c); } I have some coding experience but its been over 10 years since I've used it and I'm how you say very rusty so I'm bothering my way through this. also my site is not live so I dont' know how I would share it with you, but I have attached some screen shots hopefully that helps with what I'm asking. Any help would be awesome and thanks.
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources