Jump to content

CarolynSmith

Circle Member
  • Posts

    28
  • Joined

  • Last visited

Posts posted by CarolynSmith

  1. Hi!
    Is there a way to apply the color/brand customizations to this "Sign In" Block area for customer accounts attached below? At the very least, I'd like to change the black  "create account" button to be this color blue: hsl(209, 24%, 65%)

    I have successfully customized customer notification emails for Commerce portion of the site, but I cannot find a way to customize this Sign In area.

    Thanks so much for your help! 

      

    Screen Shot 2023-06-09 at 7.25.30 PM.png

  2. Site link: https://www.sweetshadylane.com/favorite-paint-colors

    Hi! 

    Could someone please explain how to remove the "SIGN IN" link showing up at the top right of my nav bar? It appears to be separate from the other pages (like the shop button). How do I turn this off? I've looked under  "site permissions" and "member areas". We do not even have the subscription to be able to have a member area. Please help! Thanks so much! 

    Screen Shot 2023-05-04 at 1.32.29 PM.png

  3. On 12/19/2020 at 9:06 AM, TOMweb said:

    Hey @NiceDay

    Create a gif with your logo file (.SVG) using Lottie for example, like below:

    - go to https://lottiefiles.com/svg-to-lottie

    - upload your SVG and export it as a JSON file.

    - go to https://lottiefiles.com/lottie-to-gif

    - upload your JSON file and use one of the animations provided. Export as a GIF.

    Then, make sure you upload This GIF via Design > Custom CSS > Manage Your Files, and get the URL.

    Then, go to Settings > Advanced > Code Injection > Footer Field and paste the code below. Make sure you put in your own gif URL at the bottom of the code. Let me know how this works.

     

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <div class="logoload"></div>
    <style>
    .logoload {
      /* SET BACKGROUND COLOR */
      background-color: #000000;
      /* SET BACKGROUND SIZE */
      background-size: 30vh;
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url("YOUR URL HERE");
    }
    </style>
    <script type="text/javascript">
    $(window).load(function() {
        $(".logoload").delay(2500).fadeOut("slow");
    })
    </script>

    Hey @TOMweband @NiceDay!

     

    Thank you for sharing your process, @TOMweb! Would you mind sharing the website you've applied this code to? I'd love to see what it should look like when I try it. Thanks so much!  

     

     

  4. 6 minutes ago, ChromaticZero said:

    What you're seeing is an animated SVG file that is hidden after the page loads. You should be able to Google 'Animated SVG' to get an idea of what's involved, or find something that you might be able to alter for your use.

    A quick search shows this as an example by Sean McCaffery:
     

    
    <div class="svg-wrapper">
      <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
        <rect class="shape" height="60" width="320" />
      </svg>
       <div class="text">HOVER</div>
    </div>
    
    html, body {
      background: #333;
      height: 100%;
      overflow: hidden;
      text-align: center;
    }
    
    .svg-wrapper {
      height: 60px;
    	margin: 0 auto;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      width: 320px;
    }
    
    .shape {
      fill: transparent;
      stroke-dasharray: 140 540;
      stroke-dashoffset: -474;
      stroke-width: 8px;
      stroke: #19f6e8;
    }
    
    .text {
      color: #fff;
      font-family: 'Roboto Condensed';
      font-size: 22px;
      letter-spacing: 8px;
      line-height: 32px;
      position: relative;
      top: -48px;
    }
    
    @keyframes draw {
      0% {
        stroke-dasharray: 140 540;
        stroke-dashoffset: -474;
        stroke-width: 8px;
      }
      100% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
        stroke-width: 2px;
      }
    }
    
    .svg-wrapper:hover .shape {
      -webkit-animation: 0.5s draw linear forwards;
      animation: 0.5s draw linear forwards;
    }

     

    Thank you so much! I really appreciate your time in responding and advice. I will look into this. Thanks! 

  5. Site URL: https://hulseygardens.squarespace.com

    Would anyone be able to provide advice for learning how to code and animate a logo while a site is loading when a user first enters your site? Here is an example: Romair.com

    For specifics on what I'm trying to achieve, I'd like to make the logo below animate by having the tree element grow up through the "H" in the logo while the site first loads and users are sent to the home page.

    To do this, I think I may need to separate the logo into two elements - one layer with the green clover outline and "H", and one with the Tree that I'd like to animate. Or maybe the H and tree load together at the same time. There may be other ways to animate using the clover outline of the logo. I am open to creative suggestions.

    I have Photoshop but not Adobe Illustrator or After Affects. If After Affects is requires to build the code for the logo animation, I'd love advice for free alternatives or workarounds with pure CSS if possible. 

    Thanks so much in advance for your help!

    Site I'd like to apply this to: hulseygardens.squarespace.com

    password: 1234

     

    Logo Mark Green.jpg

  6. On 4/10/2020 at 10:20 PM, tuanphan said:

    Add to Home > Design > custom CSS

    
    @media screen and (max-width:767px) {
    [data-section-id="5e80c87763d7965a88ad6cce"] .gallery-slideshow {
        height: 400px !important;
    }
    }

     

     

    Hi, I am having the same issue with extra negative space on the mobile only view, but unfortunately this code is not working for my site on mobile. Below is my site and password. Could you help me solve this?

    https://hulseygardens.squarespace.com/

    password:1234

    Thank you so much in advance.

    Screen Shot 2020-04-25 at 12.35.44 AM.png

  7. Hi, I'd like to learn how code or advice for how to lower my navigation bar to be in line with the company name text in the logo. I would like your help please in seeing if it is possible to format this for a version 7.1 desktop. 

    Please see reference attached of how it displays now, and where I would like for it to display in line with red bar as a guide in the second reference image. 

    Any help is greatly appreciated! Thanks so much!

    Current reference of right aligned standard nevigation bar setting that I would like to lower to be in line with the text in the logo .png

    Reference image with red line indicating where I would like to move the navigation bar to be in line with.png

  8. I would like your help please with code to adjust/decrease the size of the email fill form box and submit button (visual attached of desktop and mobile/tablet) located in my footer on version 7.1. The email fill form box and submit button are too large and do not shrink when I try to change button size in Squarespace's built in button size adjustment tool.

    Thanks so much! 

    7.1 Newsletter Block Fill Form and Submit Button Too Large - Desktop.png

    7.1 Newsletter Block Fill Form and Submit Button Too Large - Mobile.png

×
×
  • 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.