Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'custom code'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 10 results

  1. I'm needing to embed a google calendar or office 365 calendar don't mind which (which ever is easier) I have tried google and got the embed code from google and placed into website which displays fine however it does not adjust the size so it is viewable on smaller device/mobile the user has to scroll. is there any simple custom code that would achieve this? Thanks in advance for your help.
  2. I'm having trouble making icons look clean in Squarespace. The pngs I've uploaded are getting compressed in ways that make them look poor quality. So I'm trying to use SVG icons instead. I opened my SVG icon in a text editor, copy and pasted it into a code block in Squarespace and added width and height properties to size it. However, for the life of me I can't figure out how to center the icon. Screenshots attached of where I'm stuck and the code I'm currently using. Feel like I'm really close. Does anyone have a solution for this one? Many thanks! Chris
  3. I am trying to figure out why one of my codes isn't working. It's the last few lines, which is supposed to make a gradient background in mobile nav menu. I know it's a lot of code. But, can someone look at it and tell me if anything is wrong? Thanks! .image-block { -webkit-filter: drop-shadow( 5px 5px 8px #000000 ); filter: drop-shadow( 20px 15px 10px #000000 ); } // Announcement Bar Hover Color // .sqs-announcement-bar { width: 100%; background-color: #ff0000 !important; /* main color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .sqs-announcement-bar:hover { border-color: white !important; background-color: #6bae23 !important; /* hover color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } // Bounce Social Icons // @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .sqs-block-socialaccountlinks-v2 a svg{ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sqs-block-socialaccountlinks-v2 a{ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .sqs-block-socialaccountlinks-v2 a:hover{ -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-style-regular .sqs-use--icon{ fill: #000000 !important; } .social-icons-style-regular .sqs-svg-icon--wrapper:hover .sqs-use--icon{ fill: #FECB2F !important; } // Newsletter Block // .newsletter-block { padding: 50px !important; border-radius: 25px; background-color: #272732; } // Gradient Newsletter Block // .newsletter-block { background: linear-gradient(to bottom, #c0c0c0, #000000); padding: 50px !important; border-radius: 20px; } // Animation Keyframes // @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } // Animated Gradient Audio Player // .sqs-widgets-audio-player { background-image: linear-gradient(-45deg, #ffffff, #ff0000, #000000, #F07C63) !important; background-size: 400% !important; -webkit-animation: Gradient 10s ease infinite !important; -moz-animation: Gradient 10s ease infinite !important; animation: Gradient 10s ease infinite !important; border-radius: 5px; } // Highlighted Field Form // .field-list .field-element:focus, .field-element:visited{ border-color: #FECB2F !important; } .field-list select:focus{ outline-color: #FECB2F !important; } .field-list .section{ border-color: #FECB2F !important; } .form-button-wrapper .button{ color: white !important; border-color: transparent; background-color: #fecb2f; } .form-button-wrapper .button:hover{ color: white !important; background-color: #000000 !important; } // Leaflet Contact Form Button // .form-wrapper input[type=submit] { border-radius: 50px 0px 50px 0px !important; padding: 30px; } .form-wrapper .field-list .field .field-element{ border:none; border-bottom: 3px solid; border-color: #ff0000; background: #ffffff } // Animation Keyframes // @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } // Footer Top Border // Footer { border-top: 5px solid #ff0000; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @media only screen and (max-width: 640px) { h1 { font-size: 20px !important; }} @media only screen and (max-width: 640px) { h2 { font-size: 20px !important; }} @media only screen and (max-width: 640px) { h3 { font-size: 20px !important; }} @media only screen and (max-width: 640px) { p { font-size: 11px !important; }} //remove hyphens// p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } .sqs-search-page { .sqs-post-type-image.ContentItem { display:none !important; } } .image-slide-title { white-space: normal !important; line-height: 1.5em; } @media screen and (max-width: 640px){ .sqs-gallery-design-grid-slide{ width: 100% !important; } } @media only screen and (max-width: 768px) { b { font-size: 20px; } } @media only screen and (max-width: 320px) { b { font-size: 10px; } } @media screen and (max-width: 960px) { h1 { font-size: 41px; } h2 { font-size: 33px; } h3 { font-size: 20px; } } /*Reducing font size for screens smaller than 960px*/ @media screen and (max-width: 960px) { h1 { font-size: 41px; } h2 { font-size: 33px; } h3 { font-size: 20px; } } /*Reducing font size for screens smaller than 640px*/ @media screen and (max-width: 640px) { h1 { font-size: 33px; } h2 { font-size: 20px; } h3 { font-size: 16px; } } // Bold Text Color // h1 strong { color: #32cd32; font-weight: bold; } // Custom Color Social Icons // .sqs-use--icon { fill: #E77D6A !important; } // Slightly Angled Text // h1 { transform: skewY(-5deg); } // Pill Audio Block // .sqs-widgets-audio-player { border: 1px solid transparent; padding: 5px; border-radius: 50px; } .Header--top { background-image: url(https://static1.squarespace.com/static/5d4c573da7991a00018356bc/t/5dd5ef4cd168ef7c6a901a6b/1574301516774/Untitled+design.jpg); background-size: cover; background-position: center center; } // Center Footer Text // @media only screen and (max-width: 640px) { footer { text-align: center;} } @media screen and (max-width: 800px) { .sqs-block-image .design-layout-card:not(.sqs-narrow-width) { display: block!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper { width: 100%; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child { width: 100%; } } @media only screen and (max-width: 640px) {h1 {font-size: 70px;}} @media screen and (max-width: 640px) {.Index-page-content h1 {font-size: 70px; }} @media screen and (max-width: 640px) {h1 { font-size: 70px; letter-spacing: 5px; line-height:60px; color:white;}} .site-title img { max-height: 100px; max-width: 400px; } // Slide In Bounce Button - Left To Right // .sqs-block-button-element--small:hover{ color: #000000; } .sqs-block-button-element--small:hover:before, .sqs-block-button-element--small:focus:before, .sqs-block-button-element--small:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .sqs-block-button-element--small:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #FECB2F; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .sqs-block-button-element--small { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .sqs-block-button-element--small { margin: .4em; padding: 1em; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Mobile Menu Background // .header-menu-bg { background-color: #ffffff; background: linear-gradient(to bottom, #6b8e23, #000000); } // Mobile Menu Text // .header-menu-nav-item a { color: #FFFFFF !important; } // Mobile Menu Background // .header-menu-bg { background-color: #000000; background: linear-gradient(to bottom, #F07C63, #E45372); } // Mobile Menu Text // .header-menu-nav-item a { color: #FFFFFF !important; }
  4. Hi all, I've had some help with this code before, but I've added a code widget with the below code. This displays ok (not great but ok) with Chrome, but with Safari the Drop down lists for the dates Check in and check out don't display. Sometimes widget hasn't shown at all. Does anyone have any insight as to why? <div id="search-widget_IO312PWQ"><script>!function(e,t,a,n,c,r){function s(t){e.console.log("[Guesty Embedded Widget]:",t)}var i,d,l,o,y,m,g,h,p,u;n&&(i=n,d=t.getElementsByTagName("head")[0],(l=t.createElement("link")).rel="stylesheet",l.type="text/css",l.href=i,l.media="all",d.appendChild(l)),o=function(){try{e[a].create(r).catch(function(e){s(e.message)})}catch(e){s(e.message)}},h=!1,y=c,m=function(){h||this.readyState&&"complete"!=this.readyState||(h=!0,o())},(g=t.createElement("script")).type="text/javascript",g.src=y,g.async="true",g.onload=g.onreadystatechange=m,p=g,(u=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,u)}(window,document,"GuestySearchBarWidget","https://s3.amazonaws.com/guesty-frontend-production/search-bar-production.css","https://s3.amazonaws.com/guesty-frontend-production/search-bar-production.js",{"siteUrl":"airpeaceofmind.guestybookings.com","color": "#ed87c6"});</script></div> the website in question is currently apom.squarespace.com password test Many thanks
  5. Hello Community, I would like the height of the images on my homepage in desktop view to shrink (https://www.thecigarbible.com/en/home). The current height is perfect for my mobile view but too tall for anything above the mobile breakpoint. Currently I am using the following code to stretch the images on mobile.
  6. I've got a one-page website, but obviously each section has its own url slug. This isn't a problem by itself, but when a user goes directly to one of those section URLs (www.gabrielmolinamusic.com/services , for example), they are taken to a separate page with only that section. Instead, I want the URL to take them to the anchor point for that section on the homepage, so they can still scroll up or down to see the rest of the page. I hope that makes sense. My website is www.gabrielmolinamusic.com , and you can see the problem by going to the slug /services or /works for a couple of examples. Squarespace support had no answer other than blocking those pages with a password, but I was hoping there is a way to accomplish my goal with custom code. Any help is appreciated. Thanks!
  7. Hi, I am working on a Squarespace store for a winery and need add some features to the checkout page. The customer's order cannot be processed unless it is a multiple of 12. I've been checking out forums for documentation of similar things but I haven't found much involving Squarespace pages. This website has a version of what I need (https://sage-hills-wine.myshopify.com/cart), however, I looked at their code and noticed that the "Order Limits" feature is integrated with Shopify, which I am not using. Does anyone have experience with this involving merely some custom code inserted via Code Injection, or should I be looking into alternative e-commerce software for this level of customization? Thank you
  8. Hi, Currently I have the following code in custom css for a sticky header: #header { background-color: #000000 !important; position: -webkit-sticky !important; position: fixed!important; } I need a colour underneath the nav bar so it will stand out against the information on the page, the code is doing so. However, I would like this shape to span the entire page as currently it's only covering the header. Also I would like for the edges of that shape to be blurred so it won't be a harsh line across my page. I'll link to my website 🙂 Thanks, Gerry. https://www.forgetmenot-project.com/research
  9. I've hacked together some code to create a card flipping effect: https://www.meridianacademy.org/test-4 When I add a <a href> tag to the text on the back of a card it causes an odd break in the text. This can be seen if you click on the first card and also in the uploaded image. Any thoughts on how to fix this?
  10. I would like to add a border around some of my text boxes. how can this be done and is there a custom css code for this? I have tried using the markdown block and adding some css coding but for the life of me I can't get the banner to appear. However I am new with css, so if anyone has a code that would do the trick please help me out.
×
×
  • Create New...