CarolynSmith
-
Posts
28 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by CarolynSmith
-
-
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!
-
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>
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!
-
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!
-
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
-
9 hours ago, tuanphan said:
Add to LAST LINE in Home > Design > Custom CSS
@media screen and (max-width:767px) { #page article section:first-child { padding-top: 20px !important; } }
This worked perfectly! Thank you!!
-
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.
-
13 hours ago, tuanphan said:
Add to Home > Design > Custom CSS
@media screen and (min-width:992px) { .header-title-nav-wrapper { align-items: baseline; } }
Thank you so much! Many blessings to you!
-
12 hours ago, tuanphan said:
Add to Home > Design > Custom CSS
.sqs-block-newsletter .newsletter-form-field-element { padding-top: 10px !important; padding-bottom: 10px !important; } button.newsletter-form-button.sqs-system-button { padding-top: 10px !important; padding-bottom: 10px !important; }
Thank you so much!
-
1 hour ago, tuanphan said:
Can you share link to your site?
If you can't, use CSS flexbox to solve this.
Thanks so much! It’s
-
1 hour ago, tuanphan said:
Can you share link to your site?
https://sandralynnallendesign.squarespace.com/
thanks so much!
-
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!
-
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!
How to Customize "Sign In" block for Customer Account Sign In
in Customize with code
Posted · Edited by CarolynSmith
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!