Jump to content

Wolfsilon

Circle Member
  • Posts

    410
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Like
    Wolfsilon got a reaction from Kate_B_ in Change text margin size in accordion   
    Try using the following code in your Custom CSS menu:
    .accordion-item__description { max-width: 100% !important; } Best,
    Dan
  2. Thanks
    Wolfsilon got a reaction from The-Design-Order in Bouncing scroll down indicator in Squarespace 7.1?   
    Hello there,
    To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.
    1) Create a Code Block and place the block directly underneath the "Get A Quote" button.
    2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 
    <div class="arrow"> <span></span> </div> 3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.
    4) To animate and place the element onto your website you can paste the following into the Custom CSS box:
     .arrow{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%); } .arrow span{     display: block;     width: 30px;     height: 30px;     border-bottom: 3px solid #000;     border-right: 3px solid #000;     transform: rotate(45deg);     margin: -10px;     animation: animate 1.8s ease infinite; } @keyframes animate {     0%{         opacity: 0;         transform: rotate(45deg) translate(-20px,-20px);     }     50%{         opacity: 1;     }     100%{         opacity: 0;         transform: rotate(45deg) translate(20px,20px);     } } 5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 
    You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.
    You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.
    You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
     
    Let me know if you need any additional help. Hope this provided a solution for you! 
    Cheers,
    Dan
  3. Like
    Wolfsilon got a reaction from Beyondspace in Gallery Slideshow to expand to Lightbox   
    You wouldn't be able to accomplish this natively. You'll want to look into a third-party plugin or custom Javascript.
  4. Thanks
    Wolfsilon got a reaction from jlede in Changing the font of one section in Squarespace - HELP!   
    Hello! Welcome to the community.
    First off, you're well on your way to getting you're website looking like how you imagine it and it's awesome to see that you're taking a step to learn about customizing your website.
    Couple of things to keep in mind:
    1) When you're editing a block or a page, or even a section of your website. You'll do most of the editing in the Home > Design > Custom CSS tab.
    2) You won't need to use a code block for editing pieces of your website with CSS that could otherwise be written in the Custom CSS tab.
    3) When you're editing in the Custom CSS tab -- You won't need to use <style> tags in the menu at all 🙂 You just need to follow the following format with any variation of properties:
    YOUR_BLOCK/SECTION_ID_HERE { font-family: YOUR_FONT_NAME; padding: YOUR_PADDING; margin: YOUR_MARGINS; background-color: YOUR_COLORS; display: PICK_ONE_ONLY_ONE -> "Block // Flex // Inline-Block // Grid"; width: %,PX,EM,REM,VW height:%,PX,EM,REM,VH position: PICK_ONE_ONLY_ONE -> "Relative // Absolute // Fixed // Static"; font-size: %,PX,EM,REM transform: Translate (x,y), Rotate(VALUE-deg), Scale(2), so much more...; } 4) Try removing your code from the code-block and adding it to your Custom CSS menu and see if that makes a change. If not, feel free to message me or reply here with the URL and I'll do my best to clear up any confusion.
    Don't give up!
     
     
  5. Like
    Wolfsilon got a reaction from imdanielduncan in Hover Effect on Gallery Images   
    Hello,
    From looking at your page, it looks like all of the images are inserted using the inline image block. Here is a simple hover animation for your images that can be applied in the Custom CSS tab.
    .design-layout-inline img { transition: all .5s; } .design-layout-inline img:hover { transform: scale(1.05); filter: grayscale(100%); border: 5px solid hotpink; } This is a simple and effective animation. Transition timing and easing functions can be anything you'd like. You can look up different easing timing functions using cubic-bezier(dot)com. Copy and paste the timing function just after the ".5s" but before the ";". Although it is not required to add Cubic Easing and just use the default settings.
    I used a transform "scale" animation that acts like a magnifier when the image is hovered but there are plenty of other transform properties that you can use -- try them out by swapping out "scale(1.05)" with other values or properties.
    The filter and border options are some of the other pieces of the hover animation that can be used to help the item stand out a bit more. You can also look up all of the different filters you can use as well.
     
    Hope this helps!
  6. Like
    Wolfsilon got a reaction from Osman01 in Bouncing scroll down indicator in Squarespace 7.1?   
    Hello there,
    To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.
    1) Create a Code Block and place the block directly underneath the "Get A Quote" button.
    2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 
    <div class="arrow"> <span></span> </div> 3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.
    4) To animate and place the element onto your website you can paste the following into the Custom CSS box:
     .arrow{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%); } .arrow span{     display: block;     width: 30px;     height: 30px;     border-bottom: 3px solid #000;     border-right: 3px solid #000;     transform: rotate(45deg);     margin: -10px;     animation: animate 1.8s ease infinite; } @keyframes animate {     0%{         opacity: 0;         transform: rotate(45deg) translate(-20px,-20px);     }     50%{         opacity: 1;     }     100%{         opacity: 0;         transform: rotate(45deg) translate(20px,20px);     } } 5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 
    You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.
    You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.
    You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
     
    Let me know if you need any additional help. Hope this provided a solution for you! 
    Cheers,
    Dan
  7. Love
    Wolfsilon got a reaction from Obuchon in Bouncing scroll down indicator in Squarespace 7.1?   
    Hello there,
    To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.
    1) Create a Code Block and place the block directly underneath the "Get A Quote" button.
    2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 
    <div class="arrow"> <span></span> </div> 3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.
    4) To animate and place the element onto your website you can paste the following into the Custom CSS box:
     .arrow{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%); } .arrow span{     display: block;     width: 30px;     height: 30px;     border-bottom: 3px solid #000;     border-right: 3px solid #000;     transform: rotate(45deg);     margin: -10px;     animation: animate 1.8s ease infinite; } @keyframes animate {     0%{         opacity: 0;         transform: rotate(45deg) translate(-20px,-20px);     }     50%{         opacity: 1;     }     100%{         opacity: 0;         transform: rotate(45deg) translate(20px,20px);     } } 5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 
    You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.
    You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.
    You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
     
    Let me know if you need any additional help. Hope this provided a solution for you! 
    Cheers,
    Dan
  8. Love
    Wolfsilon reacted to madseason in Mobile color issue   
    Steps I used are below
    1. Design
    2. Site styles
    3. Click on mobile view icon above website
    4. Click on the hamburger stack and wait for that to open
    5. You will then see the color theme that was used. 
    6. Open that theme and change the background overlay to the color you need.
    * In my case I only had that particular theme installed on that page so it did not impact other areas of my site if that theme was applied.
  9. Thanks
    Wolfsilon reacted to madseason in Mobile color issue   
    Yes, good band!
    Your feedback resolved my issue!
    Thank you for your help
  10. Like
    Wolfsilon reacted to tuanphan in Help with Navigation Link Spacing   
    Try adding to Design > Custom CSS
    nav.header-nav-list { flex-wrap: nowrap; }  
  11. Like
    Wolfsilon got a reaction from tuanphan in Help with Navigation Link Spacing   
    Hi!
    Looks like you forgot to share the URL. You did share the password though, so that's the part that most people miss 😛 
    Happy to take a long whenever you can share the URL.
  12. Like
    Wolfsilon got a reaction from tuanphan in Adding a division line in the bottom of product page.   
    I think you should be able to achieve this by using the following code:
    .ProductItem-relatedProducts { border-bottom: 2px solid; padding-bottom: 15vh; } Hope this works!
     
    Best,
    Dan
  13. Like
    Wolfsilon got a reaction from madseason in Mobile color issue   
    What a good band... Mad Season....
    Anyways, you can control the background of the mobile navigation menu by navigating to the Site Styles panel. I believe there also used to be an option within the 'Edit Header' tool too. Just make sure you select the little mobile icon.
    Best,
    Dan
  14. Thanks
    Wolfsilon got a reaction from diaaannna in How do I create a smooth scrolling website that jumps to sections?   
    @diaaannna You could just disable the code before editing. The additional steps to take to have it recognize you're in 'edit mode' would be way more difficult than just commenting the script out.
  15. Like
    Wolfsilon got a reaction from AleB in How to build a filter?   
    Before the Fluid Engine roll out, I had found a workaround using the Squarespace 'tag' system. By the end of it, I gave up on coming up with a UI solution as a drop-down or 'sort-by.' But you can certainly "parse" the articles using tags!
    Best of luck to you!
  16. Like
    Wolfsilon got a reaction from lamessaleh in Custom Font not showing up on any other device   
    I think that the header-title...() class updates when you're on mobile. I'd start with inspecting your website and setting the inspector view to a mobile device!
    Best of luck! 😄
  17. Like
    Wolfsilon got a reaction from ShortAngryViking in How to build a filter?   
    Before the Fluid Engine roll out, I had found a workaround using the Squarespace 'tag' system. By the end of it, I gave up on coming up with a UI solution as a drop-down or 'sort-by.' But you can certainly "parse" the articles using tags!
    Best of luck to you!
  18. Love
    Wolfsilon reacted to karrstudio in Adding a division line in the bottom of product page.   
    Got it, Thank you!
  19. Thanks
    Wolfsilon reacted to LJHPNW in Images in testimonials carousel have funky borders (and text)   
    Thank you SO Much, @Wolfsilon! That worked perfectly.
    Do you happen to know how I could remove the little bit of spacing below each of the cloud graphics? I can't figure out how to make the white clouds go seamlessly into a white section.
    Thank you again!
  20. Like
    Wolfsilon got a reaction from Urbanmonk in Member specific content based on userid   
    Hi Monk,
    It's definitely possible. Though you'll need to tap into several functions to do so. I'd suggest looking to hire a developer to help you complete this.
     
    Best,
    Dan
  21. Love
    Wolfsilon got a reaction from W3bsage in Z-index not working as expected   
    Hi,
    I'd recommend searching this kind of thing up on W3 (https://www.w3schools.com/cssref/pr_pos_z-index.asp).
    To kind of piggy-back on that as it relates to Squarespace, you'll want to make sure that 1) you're targeting the image as specifically as you can and 2) you aren't applying the property to an element that already has z-index applied to it.
    Also, with Fluid Engine, this becomes even easier to accomplish and shouldn't require additional layering that you can't do out of the box.
     
    Best,
    Dan
  22. Like
    Wolfsilon got a reaction from Leoga02 in Is it possible to animate a Gallery slideshow to rotate as a carousel?   
    It is not possible with pure CSS. You'd need Javascript to accomplish this. Our friend @WillMyers did a great piece on something like this!
    https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71
  23. Like
    Wolfsilon reacted to CDM-media in Is it possible to style an HTML embedded form?   
    That's what I thought too, but Spark folks told me to check with squarespace for customization and that didn't make much sense to me, but I thought I'd ask in case anyone had encountered something similar. I've been in discussion with Spark team, and they don't offer support for customizing the form styling. They would rather the client upgrade to an API feature that then has to link Squarespace form submission --> Zapier --> Spark. A bit clunky, and in this case, the client will just manually enter the form submissions into their Spark CRM, since they are not anticipating extremely high volume of submissions. Hope this info helps someone else sometime!
     
     
  24. Thanks
    Wolfsilon got a reaction from CDM-media in Is it possible to style an HTML embedded form?   
    No,
    You'll need to contact the company who made the widget to get any sort of reliable control over the embed. Just looking at their blog, it looks like their might be some options available through them.
    https://blog.spark.re/how-to-set-up-custom-registration-forms-with-social-media-ads-17973d06fa36
  25. Like
    Wolfsilon got a reaction from tuanphan in Adjust portfolio height on mobile   
    Hmmm,
    You could try:
    @media only screen and (max-width:640px){ .portfolio-hover { min-height: unset; } .portfolio-hover-display { min-height: unset; } }  
×
×
  • 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.