Wolfsilon

Hello there! To add this icon to your website you will need to download the TikTok social icon in either a PNG or SVG format. Once you've found the icon you want to use, upload it to Squarespace or use a third-party host. Navigate to Design > Custom CSS. For Header: .SocialLinks-link.url svg { visibility:hidden; } .SocialLinks-link.url { background-image: url(YOUR_TIKTOK_SVG/PNG_LINK_HERE); background-size: cover; background-repeat: no-repeat; transform:scale(1); } For the Footer: .sqs-svg-icon--wrapper.url div { visibility: hidden; } .sqs-svg-icon--wrapper.url { background-image: url(YOUR_SVG/PNG_LINK_HERE); background-size: cover; background-repeat: no-repeat; } Hope this helps! Let me know if you need any further assistance or help. -Dan

Hello there, You will need to change the focal point of the image to position the top of the image lower. However this will effect the desktop layout as well. Simple CSS codes that won't interfere with the parallax scrolling feature will only be able to effectively reposition the image to the left or right of the mobile screen. You can add the image to your website using an Image Block to maintain the aspect-ratio on mobile devices. You can use CSS to adjust the height and width of the block to replicate a banner image. Inserting the image using a Code Block will allow you full control over the image and positioning on desktop and mobile devices but will require some knowledge of both HTML and CSS. Depending on your template and Squarespace version, you may be able to add the image directly to the background of the page using Custom CSS. You can then adjust the "background" to the desired height and more precise mobile positioning. You can replicate the parallax scrolling effect using this method as well. There are solutions for repositioning the banner but your website is set to private and I can not see the banner image in question. If you'd like to share an updated page url and password we could better assist you. Hope this helps!

Hello, Wonderful photos by the way! I've tried to take a look at the code you provided but, rightfully so, you've removed the ability to inspect the elements on your page. I'd be more than happy to write some code for you. However, without being able to test and customize the CSS on your page with developer tools -- I cannot provide an accurate solution for you. If you're uncomfortable opening access to the pages, I would suggest using the inspector tools on your end and looking for and applying padding adjustments to divs like: .Header .Header--top or .Header-inner .Header--inner-top (depending on the template/version these divs could vary) Let me know if you're still in need of assistance! Feel free to reply here or message me. -Dan

Hello there, If I'm understanding you correctly, we can apply a quick fix for this. You can use the code below to increase the dimensions of the map and reposition the block so that it fills screen. #block-yui_3_17_2_1_1618948765290_6570 .page-map { height: 100vh; width: 200%; position: absolute; left: -50%; } Hope that this helps!

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

Hello, I'd be more than happy to help you and take a look, but your website has a password. Could you please disable the page or share a new one with the footer overlay and include the password to the disabled page. - Dan

You're welcome -- I'm glad that worked. The widget will take sometime to load because it needs to contact the third-party servers and then relay the information back to your website and then serve the information to the user. While the loading time shouldn't be as long as the loading time for your widget (took me about 3 minutes to load). The easiest solution to speed up that process is usually AJAX loading -- Unfortunately, we've determined that AJAX loading is the cause of the initial problem you wrote about. You might consider reaching out to Ucalc support and see if there is an alternative widget you can use specifically for Squarespace. They might also be able to help you install and write some javascript that will load the widget appropriately.

Hello there, Without knowing the code you're using to create the border styles shown in the screenshot, it is a bit tricky to identify where the issue is. However, it could be that you are not targeting the correct elements or your CSS isn't specific enough. For example: #block-yui_3_17_2_1_1620362436514_9368 { outline: 5px solid; border: 5px solid; outline-offset: 5px; } Creates an offset outline and border effect similar to the image you've attached without the flourish. If you could please share the CSS you're using to create the effect we could determine the changes you may need to make. Hope this helps! -Dan

Hello, Sometimes embedded documents do not appear because there are prepackaged scripts and styles that prevent the widget from loading under certain conditions or conflict with your websites existing scripts. The first thing that comes to my mind is disabling AJAX loading. Depending on your website version or template, you may have the option to disable AJAX loading in the Site Styles menu. If this solves your problem, it's likely something to do with the scripts included in the widget that conflict with Squarespace's loading system. If AJAX loading is a feature you don't mind disabling, that may be the easiest and most simple solution. Hope this helps. Let us know if this didn't solve your problem.

Hello, To achieve this effect we'll need to add a bit of Custom CSS to your website. If you have multiple pages with the same image layout and image blocks, the effect will apply to all blocks. However, if you only want to apply to hover effect to an individual page/section you'll need to target each page/section and add the code below. I've added several other properties that can be used to help your hover effect stand out. Just remove the "/*" & "*/" to try them out! There are a lot of hover properties and combinations you can use to create your own custom effect. You can Google the different transform properties and values, filters, and easing methods. To apply a site-wide hover effect use the following code: .design-layout-stack img { transition: all .5s ease; /* border: 2px solid hotpink; */ } .design-layout-stack:hover img { opacity: .5s; /* filter: grayscale(100%); */ /* transform: scale(1.05); */ /* border: 2px solid hotpink; */ } For the page you shared specifically use the following code: #collection-607e58d7db63ee562a23b8e5 { .design-layout-stack img { transition: all .5s ease; /* border: 2px solid hotpink; */ } .design-layout-stack:hover img { opacity: .5s; /* filter: grayscale(100%); */ /* transform: scale(1.05); */ /* border: 2px solid hotpink; */ } } Hope this helps! -Dan

.social-icons-size-small.social-icons-style-regular.social-icon-alignment-center .sqs-svg-icon--wrapper, .social-icons-size-extra-large.social-icon-alignment-center .sqs-svg-icon--wrapper { margin: 0 5em !important; } Adjust the "5em" accordingly. Hope this helps!

Hello! Could you please share a the URL to your website? Their are several methods that social icons are inserted into the footer and I cannot provide a working code without knowing how your icons are inserted. Thanks, Dan

Hello, Embedded elements and tools are essentially their own miniature "websites", kind of like a mini-cookie-cutter copy of the original page that they came from. Most widgets come packaged with preset styles, scripts, and resources making them ideal for quickly adding elements to websites. Ideally, you'd be given options on the host website to change the appearance of the widget but this isn't always the case. So, you will be limited to what you can and cannot customize from the Squarespace editor. I've taken a look at the embed and I was able to change the font-color, font-size, and font-family in a very broad manner. Hopefully this provides a nice starting point, if not a complete solution. #BambooHR { h1,h2 { font-size: 25px; color: #fff; } li { font-size: 15px; color: #fff; font-family: "Helvetica", serif; } } You can also use your browsers "inspect" tool to identify, customize, and make changes as well. Hope this helps! -Dan

Hello! Not sure if this is a "nice" drop-shadow but this code worked for me on my end. #projectThumbs .project { box-shadow: 0px 5px 5px rgba(0,0,0,0.9); } Hope that this helps. -Dan

Hello, Changing the color from a solid to gradient is easier than you might think and you've already done the hard part in the code you shared above! You'll want to find a gradient style and color scheme that fits your needs but your code would look something like this: #block-e594bfd6c486b80b7d2b .sqs-block-button-element { background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); } You can find preset web gradients here or create your own here. Hope this helps.

Hello, To understand a bit more, you're kind of trying to mimic the shop page without users necessarily being on the "shop" page itself? Summary blocks are great for displaying content from other locations on your website but out-of-the-box, they provide little in the way of customizing anything aside from general aesthetics without using custom scripts to overhaul the summary block. That being said, the free solution is using CSS and apply the hover image for each item but this is very time consuming. Alternatively you can also try to use this plugin -- product/summary effect Hope this helps!

Hello, You can use the following code to block the right click function. There are still some workarounds for users that are motivated enough to steal your images and content but this will prevent a user from downloading and/or viewing the source materials for your website. To insert the code, navigate to the Code Injection menu -- Home > Settings > Advanced > Code Injection. Squarespace can be picky about where the code is inserted for it to work. First try inserting the code into the Header Code Injection field -- Hit "Save" and open your website in a new window and test. If that doesn't work, move the code to the the Footer Code Injection field. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script> In terms of blocking specific users from accessing your website, you may want to research a third-party IP address plugin like "IP-Approval". Hope this helps!

Hello! To change the background of a specific page, you can use Custom CSS. In your case you can use the following: #collection-5576cc17e4b0c16ac870e3c9 { background-color: black; } Hope this helps.

Hello there! If you're still looking for someone to look over your code, feel free to message me here. I'd be more than happy to help. - Dan

Some templates on Squarespace version 7.0 offer an option in the settings menu to disable the mobile view entirely. If you do not have that option, then it becomes a bit tricky. It will then require some time consuming Custom CSS to prevent resizing of the blocks and sections on mobile devices.

Hello! To achieve this type of carousel with swipe controls and multiple slides-per-view, your best bet is to use "Swiper.JS". It is a javascript library that is highly customizable and packed with features. https://swiperjs.com/ Hope this helps.

Hey Sierra, I took a look at your website and couldn't find the custom font that you mentioned on any of the pages. The font's used on your site are "Poppins" and "Time New Roman" -- and similarly related font family's. Where exactly is the custom font located? Is there a specific element that uses the font so I can see a live working example? Thanks!

Hello, A simple hover animation for the slide show blocks would look something like this: .gallery-fullscreen-slideshow-item img { transition: all .5s; } .gallery-fullscreen-slideshow-item img:hover { transform: scale(1.05); } This will apply the hover effect to all slide shows. If you only want to target a slide show on a specific page, you will need to install a browser extension or inspect the page -- identify the section with the slide show and add the ID before the CSS code above. Hope that this helps!

Hello, What happens if you copy and paste the current sentence multiple times? Enough times to fill the width of the announcement bar?

Hello, You can override the default text padding/margin settings by applying some adjustments in the Custom CSS tab. In your case, you can apply the same padding and margin settings by targeting all basic text elements. This should remove most of the "space" between your elements. h1, h2, h3, h4, p { margin: 0; padding: 0; } Hope this helps!