Jump to content

JA-Build-Change-Impact

Member
  • Posts

    12
  • Joined

  • Last visited

1 Follower

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

JA-Build-Change-Impact's Achievements

  1. I have successfully placed the main Google Tag Manager code into the header via the Code Injection section of Squarespace. Site: https://teachingideas4u.com <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-HIDDEN');</script> <!-- End Google Tag Manager --> However, I have an issue with this: where / how to install the "no script" code that goes in the <body> on Squarespace per https://support.google.com/tagmanager/answer/6103696 section 2.4.b and the on page instructions from Google from the Install Google Tag Manager instructions <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-HIDDEN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
  2. Example I'm trying to replicate, see purple dots in second section that create a border around all of the block rows within that Wordpress page: https://teachingideas4u.com/free-social-studies-guide (not shown in screenshot is bottom border but it's there if you go to the page itself) My site is: Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723Page I'm trying to do this on is: https://nonagon-blackbird-dbdy.squarespace.com/free-social-studies-guide
  3. Similar to this post I have pages where I want to style buttons outside the standard 3 options of Primary, Secondary, and Tertiary. My site is: Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723 Example is on https://nonagon-blackbird-dbdy.squarespace.com/balloon-pop-hub-bundle-sale where I might want: a. different buttons within the page to be different from one another b. buttons to not be restricted to Primary, Secondary, or Tertiary default designs. Example of Wordpress different looking buttons for the above page https://teachingideas4u.com/balloonpop-hub-bundle-sale In addition to the css, it would be much appreciated if you can explain how I can locate this correctly in Chrome Inspector so I can easily identify future buttons in Squarespace myself and just adjust the css accordingly. Thank you.
  4. I tried to interpret the instructions from this Forum post: but there were several different "issues" tackled in that post and I wasn't able to determine which were applicable to me. My site is: Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723 I have numerous pages and in some cases I might have several different buttons on a single page, where I want to load Flodesk optin form on button click. An example of how this works is on the old wordpress site I am migrating over: https://teachingideas4u.com/free-social-studies-guide that loads an optin when the button is clicked. I need the same function in Squarespace with FloDesk forms. In Flodesk I have the option of the following embeds: Header Code Injection <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n].q = w[n].q || []).push(arguments); }; w[n] = w[n] || fn; var f = d.getElementsByTagName(t)[0]; var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = 'module'; sm.src = h + s + '.mjs' + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + '.js' + v; f.parentNode.insertBefore(sn, f); })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd'); </script> <script> window.fd('form', { formId: '649c2c6b918a722b7047ee8d' }); </script> Advanced - Get Raw HTML with or without Java and/or CSS Here is the Raw HTML with both Javascript and CSS enabled (as an example): <link rel="preload" href="https://use.typekit.net/ydd4yxt.css" as="style"> <link rel="stylesheet" href="https://use.typekit.net/ydd4yxt.css"> <style> [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d *, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d *::before, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [tabindex="-1"]:focus { outline: none !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h1, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h2, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h3, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h4, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h5, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h6 { margin-top: 0; margin-bottom: 0.7em; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d p { margin-top: 0; margin-bottom: 1rem; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ol, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ul, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d dl { margin-top: 0; margin-bottom: 1.4rem; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ol ol, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ul ul, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ol ul, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ul ol { margin-bottom: 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d strong { font-weight: bolder; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d small { font-size: 80%; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d sub, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d sub { bottom: -0.25em; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d sup { top: -0.5em; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d { color: #000000; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d a:hover { color: #4396fd; text-decoration: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d img { border-style: none; vertical-align: middle; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d svg:not(:root) { overflow: hidden; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d area, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [role="button"], [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d label, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d select, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d summary, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d textarea { touch-action: manipulation; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d label { display: inline-block; font-weight: bolder; margin-bottom: 0.7rem; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button:focus { outline: 1px dotted; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d select, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d optgroup, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d textarea { margin: 0; font-size: inherit; font-family: inherit; line-height: inherit; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input { overflow: visible; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d select { text-transform: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button, html[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="button"], [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="reset"], [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="submit"] { -webkit-appearance: button; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button::-moz-focus-inner, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="button"]::-moz-focus-inner, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="reset"]::-moz-focus-inner, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="radio"], [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="checkbox"] { padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="date"], [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="time"], [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="datetime-local"], [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="month"] { -webkit-appearance: listbox; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d textarea { resize: vertical; overflow: auto; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="number"]::-webkit-inner-spin-button, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="number"]::-webkit-outer-spin-button { height: auto; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="search"]::-webkit-search-cancel-button, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [hidden] { display: none !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal { top: 0; left: 0; right: 0; bottom: 0; display: block; opacity: 0; outline: 0; z-index: -1; position: fixed; background: rgba(0, 0, 0, 0.4); overflow-x: hidden; overflow-y: auto; -webkit-transition: opacity 0.4s, visibility 0.4s; transition: opacity 0.4s, visibility 0.4s; visibility: hidden; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal.fd-is-open { opacity: 1; z-index: 1040; visibility: visible; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__dialog { width: calc(100% - 60px); margin: 30px auto; display: -webkit-box; display: flex; position: relative; max-width: 750px; min-height: calc(100% - 60px); -webkit-box-align: center; align-items: center; pointer-events: none; -webkit-box-pack: center; justify-content: center; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__content { width: 100%; border: 0 solid #d7d7d7; display: -webkit-box; display: flex; outline: 0; position: relative; background: #fff; -webkit-box-shadow: 6.5px 11.3px 19px 0 rgba(0, 0, 0, 0.11); box-shadow: 6.5px 11.3px 19px 0 rgba(0, 0, 0, 0.11); border-radius: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; pointer-events: auto; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__body { -webkit-box-flex: 1; flex: 1 1 auto; padding: 0; position: relative; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close { top: 0; color: #000; right: 0; width: 40px; border: 0; cursor: pointer; height: 40px; margin: 0; display: -webkit-box; display: flex; padding: 0; z-index: 9999; position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; -webkit-box-align: center; align-items: center; line-height: 1; -webkit-box-pack: center; justify-content: center; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close svg { color: inherit; width: 10px; height: auto; display: block; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close:hover, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close:focus, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close:active { outline: none; } @media (max-width: 575px) { [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__dialog { width: calc(100% - 30px); margin: 15px auto; min-height: calc(100% - 30px); } } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control { width: 100%; display: block; outline: none; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control:focus { outline: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control::-webkit-input-placeholder { color: transparent !important; opacity: 0 !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control::-moz-placeholder { color: transparent !important; opacity: 0 !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control::placeholder { color: transparent !important; opacity: 0 !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-label { top: 0; left: 0; right: 0; margin: 0; overflow: hidden; position: absolute; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control:not(:-moz-placeholder-shown)+.fd-form-label { opacity: 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control:not(:placeholder-shown)+.fd-form-label { opacity: 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-description { margin: 5px 0 0 0; font-size: 0.8em; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-feedback { margin: 5px 0 0 0; font-size: 0.8em; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group { margin: 0 0 15px; position: relative; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-success .fd-form-feedback, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-success .fd-form-check { color: #02dba8 !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-success .fd-form-control { color: #02dba8 !important; border-color: #02dba8 !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-success .fd-form-feedback { display: block; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-error .fd-form-feedback, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-error .fd-form-check { color: #eb3d3b !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-error .fd-form-control { color: #eb3d3b !important; border-color: #eb3d3b !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-error .fd-form-feedback { display: block; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-btn { cursor: pointer; display: -webkit-inline-box; display: inline-flex; outline: none; max-width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-style: normal; text-align: center; -webkit-box-align: center; align-items: center; text-shadow: none; white-space: normal; -webkit-box-pack: center; justify-content: center; text-decoration: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-btn:hover { outline: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-btn:focus { outline: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-btn:disabled { opacity: 0.8; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check { cursor: pointer; margin: 0; display: -webkit-box; display: flex; position: relative; -webkit-box-align: center; align-items: center; padding-left: 30px; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input { top: 0; left: 0; width: 18px; height: 18px; opacity: 0; z-index: -1; position: absolute; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__checkmark { top: 0; left: 0; width: 18px; height: 18px; display: block; position: absolute; -webkit-background-size: 18px 18px; background-size: 18px; background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V16C19 17.6569 17.6569 19 16 19H4C2.34315 19 1 17.6569 1 16V4Z' fill='white'/%3e %3cpath fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H16C18.0711 0.25 19.75 1.92893 19.75 4V16C19.75 18.0711 18.0711 19.75 16 19.75H4C1.92893 19.75 0.25 18.0711 0.25 16V4ZM4 1.75C2.75736 1.75 1.75 2.75736 1.75 4V16C1.75 17.2426 2.75736 18.25 4 18.25H16C17.2426 18.25 18.25 17.2426 18.25 16V4C18.25 2.75736 17.2426 1.75 16 1.75H4Z'/%3e %3c/svg%3e"); background-repeat: no-repeat; background-position: center center; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__label { margin: 0; font-size: 14px; text-align: left; word-break: break-word; font-weight: 400; line-height: 18px; letter-spacing: 0.01em; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input:checked+.fd-form-check__checkmark::after { opacity: 1; z-index: 1; visibility: visible; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__checkmark::after { top: 0; left: 0; width: 18px; height: 18px; content: ""; display: block; opacity: 0; z-index: 1; position: absolute; -webkit-transition: opacity 0.4s, z-index 0.4s; transition: opacity 0.4s, z-index 0.4s; visibility: inherit; -webkit-background-size: 12px 12px; background-size: 12px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='12' height='10' viewBox='0 0 11.51 8.2'%3e%3ctitle%3echeck%3c/title%3e%3cpath d='M4.05%2c8.2A.74.74%2c0%2c0%2c1%2c3.52%2c8L.22%2c4.68A.75.75%2c0%2c0%2c1%2c1.28%2c3.62l3.3%2c3.3A.75.75%2c0%2c0%2c1%2c4.58%2c8%2c.74.74%2c0%2c0%2c1%2c4.05%2c8.2Z'/%3e%3cpath d='M4.06%2c8.2A.74.74%2c0%2c0%2c1%2c3.53%2c8a.75.75%2c0%2c0%2c1%2c0-1.06l6.7-6.7a.75.75%2c0%2c0%2c1%2c1.06%2c1.06L4.59%2c8A.74.74%2c0%2c0%2c1%2c4.06%2c8.2Z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input:focus { outline: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-content { position: relative; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-has-success .fd-form-content { display: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-has-captcha .fd-form-content>*:not(.fd-form-captcha) { opacity: 0; visibility: hidden; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-captcha { top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: flex; position: absolute; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: flex-start; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-success { display: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-has-success .fd-form-success { display: block; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-success>*:last-child { margin-bottom: 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-error { display: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-has-error .fd-form-error { display: block; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-error>*:last-child { margin-bottom: 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-focus-visible, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input.fd-focus-visible+.fd-form-check__checkmark { outline: none; -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 6px #000 !important; box-shadow: 0 0 0 2px #fff, 0 0 0 6px #000 !important; -webkit-transition: -webkit-box-shadow 0.2s !important; transition: -webkit-box-shadow 0.2s !important; transition: box-shadow 0.2s !important; transition: box-shadow 0.2s, -webkit-box-shadow 0.2s !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-focus-visible, [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input.fd-focus-visible+.fd-form-check__checkmark { outline: none; -webkit-box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #000 !important; box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #000 !important; -webkit-transition: -webkit-box-shadow 0.2s !important; transition: -webkit-box-shadow 0.2s !important; transition: box-shadow 0.2s !important; transition: box-shadow 0.2s, -webkit-box-shadow 0.2s !important; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__modal { background: rgba(255, 255, 255, 0.5); } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__modal-dialog { max-width: 575px; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__modal-content { background: #ffffff; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__modal-close { color: #000000; position: absolute !important; font-size: 12px; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__wrapper { width: 100%; position: relative; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__image { width: 100%; display: block; overflow: hidden; -webkit-background-size: cover; background-size: cover; background-image: url('https://usercontent.flodesk.com/885d460e-7ffd-48a4-ba35-d8d7542904ec/upload/6e016e4f-b5b0-49d3-b9ea-237d3efadc6f.png'); background-position: center; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__image-inner { width: 100%; height: 0; display: block; padding: 56.5% 0 0 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form { color: #444444; width: 100%; margin: 0; padding: 40px 24px; font-size: 14px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: 400; line-height: 1.2999999999999998; letter-spacing: 0.1px; text-transform: none; } @media (max-width: 767px) { [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form { word-wrap: anywhere; word-break: break-word; white-space: normal; overflow-wrap: break-word; } } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__title { color: #9438B9; width: 100%; margin: 0 0 24px; display: block; font-size: 29px; text-align: center; font-family: halyard-text, sans-serif; font-weight: 900; line-height: 1; letter-spacing: 0px; text-transform: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__title * { line-height: inherit; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__subtitle { width: 100%; margin: 0 0 32px; display: block; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__subtitle * { line-height: inherit; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__field { margin: 0 0 16px; font-size: 14px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: 0.1px; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__field:last-of-type { margin: 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__control { color: #04007D; border: 1px solid #04007D; height: 46px; padding: 12px 16px; font-size: 14px; background: transparent; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: 400; line-height: 20px; border-radius: 4.6000000000000005px; letter-spacing: 0.1px; text-transform: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__label { color: #04007D; border: 1px solid transparent; padding: 12px 16px; font-size: 14px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: 400; line-height: 20px; letter-spacing: 0.1px; text-transform: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference { margin: 36px 0; display: -webkit-box; display: flex; -webkit-box-align: start; align-items: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } @media (max-width: 400px) { [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-title { color: #2C63D2; width: 100%; margin: 0 24px 0 0; display: block; font-size: 18px; max-width: 50%; text-align: left; font-family: halyard-text, sans-serif; font-weight: 700; line-height: 1.4; letter-spacing: 0px; text-transform: none; } @media (max-width: 400px) { [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-title { margin: 0 0 32px; max-width: 100%; } } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-title * { line-height: inherit; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-control { width: 100%; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-list { margin: -6px 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-item { padding: 6px 0; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form-check .fd-form-check__input { top: 2.200000000000001px; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form-check .fd-form-check__checkmark { top: 2.200000000000001px; background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V16C19 17.6569 17.6569 19 16 19H4C2.34315 19 1 17.6569 1 16V4Z' fill='white'/%3e %3cpath fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H16C18.0711 0.25 19.75 1.92893 19.75 4V16C19.75 18.0711 18.0711 19.75 16 19.75H4C1.92893 19.75 0.25 18.0711 0.25 16V4ZM4 1.75C2.75736 1.75 1.75 2.75736 1.75 4V16C1.75 17.2426 2.75736 18.25 4 18.25H16C17.2426 18.25 18.25 17.2426 18.25 16V4C18.25 2.75736 17.2426 1.75 16 1.75H4Z'/%3e %3c/svg%3e"); } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form-check .fd-form-check__label { color: #2C63D2; font-size: 14px; min-height: 22.400000000000002px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; line-height: 1.6; letter-spacing: 0px; text-transform: none; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form-check .fd-form-check__checkmark::after { -webkit-background-size: 12px 12px; background-size: 12px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='12' height='10' viewBox='0 0 11.51 8.2'%3e%3ctitle%3echeck%3c/title%3e%3cpath d='M4.05%2c8.2A.74.74%2c0%2c0%2c1%2c3.52%2c8L.22%2c4.68A.75.75%2c0%2c0%2c1%2c1.28%2c3.62l3.3%2c3.3A.75.75%2c0%2c0%2c1%2c4.58%2c8%2c.74.74%2c0%2c0%2c1%2c4.05%2c8.2Z'/%3e%3cpath d='M4.06%2c8.2A.74.74%2c0%2c0%2c1%2c3.53%2c8a.75.75%2c0%2c0%2c1%2c0-1.06l6.7-6.7a.75.75%2c0%2c0%2c1%2c1.06%2c1.06L4.59%2c8A.74.74%2c0%2c0%2c1%2c4.06%2c8.2Z'/%3e%3c/svg%3e"); } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__footer { margin: 36px 0 0; text-align: center; } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__button { color: #ffffff; width: auto; border: 1px solid transparent; display: inline-block; padding: 12px 48px; font-size: 18px; background: #9438B9; font-family: halyard-text, sans-serif; font-weight: 700; line-height: 20px; border-radius: 4.6000000000000005px; letter-spacing: 0.2px; text-transform: none; } @media (max-width: 400px) { [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__button { width: 100%; } } [data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__error { margin: 10px 0 0 0; } </style> <div class="ff-649c2c6b918a722b7047ee8d" data-ff-el="root" data-ff-version="3" data-ff-type="popup" data-ff-name="popupCardImage"> <!--tpl {% block config %} tpl--> <div data-ff-el="config" data-ff-config="eyJ0cmlnZ2VyIjp7Im1vZGUiOiJpbW1lZGlhdGVseSIsInZhbHVlIjowfSwib25TdWNjZXNzIjp7Im1vZGUiOiJtZXNzYWdlIiwibWVzc2FnZSI6IiIsInJlZGlyZWN0VXJsIjoiIn0sImNvaSI6ZmFsc2UsInNob3dGb3JSZXR1cm5WaXNpdG9ycyI6dHJ1ZSwibm90aWZpY2F0aW9uIjp0cnVlfQ==" style="display: none"></div> <!--tpl {% endblock %} tpl--> <div class="ff-649c2c6b918a722b7047ee8d__modal fd-modal" data-ff-el="modal"> <div class="ff-649c2c6b918a722b7047ee8d__modal-dialog fd-modal__dialog" data-ff-el="modal-dialog"> <div class="ff-649c2c6b918a722b7047ee8d__modal-content fd-modal__content" data-ff-el="modal-content"> <div class="ff-649c2c6b918a722b7047ee8d__modal-body fd-modal__body" data-ff-el="modal-body"> <div class="ff-649c2c6b918a722b7047ee8d__wrapper"> <div class="ff-649c2c6b918a722b7047ee8d__image"> <div class="ff-649c2c6b918a722b7047ee8d__image-inner"> </div> </div> <form class="ff-649c2c6b918a722b7047ee8d__form" action="https://form.flodesk.com/forms/649c2c6b918a722b7047ee8d/submit" method="post" data-ff-el="form"> <div class="ff-649c2c6b918a722b7047ee8d__title"> <div> <div data-paragraph="true">Gain Access to <br>Free Teaching Resources</div> </div> </div> <div class="ff-649c2c6b918a722b7047ee8d__subtitle"> <div> <div data-paragraph="true">Enter your information below and I'll have my team set you up to receive weekly-ish emails with the latest in:<br><br>+ educational articles<br>+ products, and<br>+ teaching tips...<br><br>ALL from a seasoned educator and modern curriculum developer.<br>Simply put, go from spending time on prep to investing in the lives that matter!<br><br><span style="color:#999999;">(Your information will <strong>never </strong>be shared or sold to a 3rd party.)</span></div> </div> </div> <div class="ff-649c2c6b918a722b7047ee8d__content fd-form-content" data-ff-el="content"> <div class="ff-649c2c6b918a722b7047ee8d__fields" data-ff-el="fields"> <!--tpl {% block fields %} tpl--> <div class="ff-649c2c6b918a722b7047ee8d__field fd-form-group"> <input id="ff-649c2c6b918a722b7047ee8d-firstName" class="ff-649c2c6b918a722b7047ee8d__control fd-form-control" type="text" maxlength="255" name="firstName" placeholder="First name" data-ff-tab="firstName::lastName" /> <label for="ff-649c2c6b918a722b7047ee8d-firstName" class="ff-649c2c6b918a722b7047ee8d__label fd-form-label">First name</label> </div> <div class="ff-649c2c6b918a722b7047ee8d__field fd-form-group"> <input id="ff-649c2c6b918a722b7047ee8d-lastName" class="ff-649c2c6b918a722b7047ee8d__control fd-form-control" type="text" maxlength="255" name="lastName" placeholder="Last name" data-ff-tab="lastName:firstName:email" /> <label for="ff-649c2c6b918a722b7047ee8d-lastName" class="ff-649c2c6b918a722b7047ee8d__label fd-form-label">Last name</label> </div> <div class="ff-649c2c6b918a722b7047ee8d__field fd-form-group"> <input id="ff-649c2c6b918a722b7047ee8d-email" class="ff-649c2c6b918a722b7047ee8d__control fd-form-control" type="text" maxlength="255" name="email" placeholder="Email address" data-ff-tab="email:lastName:submit" required /> <label for="ff-649c2c6b918a722b7047ee8d-email" class="ff-649c2c6b918a722b7047ee8d__label fd-form-label">Email address</label> </div> <input type="text" maxlength="255" name="confirm_email_address" style="display: none" /> <!--tpl {% endblock %} tpl--> </div> <div class="ff-649c2c6b918a722b7047ee8d__footer" data-ff-el="footer"> <button type="submit" class="ff-649c2c6b918a722b7047ee8d__button fd-btn" data-ff-el="submit" data-ff-tab="submit"> <span>Join the list</span> </button> </div> </div> <div class="ff-649c2c6b918a722b7047ee8d__success fd-form-success" data-ff-el="success"> <div data-paragraph="true">Thank you for subscribing!</div> </div> <div class="ff-649c2c6b918a722b7047ee8d__error fd-form-error" data-ff-el="error"></div> </form> </div> </div> <button class="ff-649c2c6b918a722b7047ee8d__modal-close fd-modal__close" data-ff-el="modal-close"> <svg style="width: 1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.51 14.51"> <line x1="1" y1="1" x2="13.51" y2="13.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" /> <line x1="13.51" y1="1" x2="1" y2="13.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" /> </svg> </button> </div> </div> </div> </div> <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n].q = w[n].q || []).push(arguments); }; w[n] = w[n] || fn; var f = d.getElementsByTagName(t)[0]; var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = 'module'; sm.src = h + s + '.mjs' + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + '.js' + v; f.parentNode.insertBefore(sn, f); })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd'); </script> <script> window.fd('form:handle', { formId: '649c2c6b918a722b7047ee8d', rootEl: '.ff-649c2c6b918a722b7047ee8d', }); </script> In theory I could use the code block but then I'd need to style it's output as a button. So ideally, it'd be great if I could just use the button block with code. But I'm willing to use whatever the optimal route is considering I have several pages that need to have unique optin forms between both the pages themselves and within a given page itself.
  5. Yep. I had the "form text" but not "handle" so thank you! How can we decrease the border of that button? Reducing the font size helped but it still doesn't fit like I'd visually like. I think it has to do with overall button size which I assume is being further impacted by the border size.
  6. Yes going with Font Awesome is good. Thanks. If you can provide the guide that would be great. I can then go back and select the design of the icon from the searches you provided.
  7. Thanks! Two more quick items on this area. 1. How do I get the hover color to change? (I added the last line in the below code but that doesn't seem to be resolving. I assume I'm calling the wrong thing in Squarespace) 2. If I want underlines on the mobile version as well. How do I adjust the below to include mobile? /** * Change Color of Navigation underline and hover **/ div.header-nav-item a { background-image: none !important; } div.header-nav-item:nth-child(1)>a { border-bottom: 2px solid #e72F80; } div.header-nav-item:nth-child(2)>a { border-bottom: 2px solid #9438b9; } div.header-nav-item:nth-child(3)>a { border-bottom: 2px solid #00007d; } div.header-nav-item:nth-child(4)>a { border-bottom: 2px solid #f7f8; } div.header-nav-item:nth-child(5)>a { border-bottom: 2px solid #f6ce53; } div.header-nav li a:hover{ color:#00007d; }
  8. How do I: add underlines to navigation link text have the underlines be different colors as in example via https://teachingideas4u.com Squarespace site 👇 Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723
  9. How do I resize a Form Lightbox button and/or font inside button Alternatively, it does not have to be a button...it could be text link only like the surrounding links, but this particular one I'd like to open in a lightbox. See attached image for the button I am referring to. This is located in the footer and thus far I am only using one form in lightbox format. But it'd be nice to be able to resize this button on an individual basis in case I want to use the form lightbox layout elsewhere. In other words, it'd be great if this was not a global solution and instead specific to this use for this form. P.S. is there a way to reuse forms? For example, one solution would be for me to just embed this form into a page and have the link not be a button or lightbox, but load a page with the form on it. I'd prefer not to have to rebuild the form :) Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723 I did try and follow the instruction here by adding to css: /** * Make Form Lightbox Button smaller **/ div.lightbox-content form * { font-size: 8px !important; } But it did not have any impact.
  10. https://teachingideas4u.com P.S. here is SS access info: Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723
  11. I am migrating a site from WP to SS. In footer on WP site (see image) I have some icons in front of a few lines of text. This is implemented via list formating (see CSS below). How do I apply this to text in a text block in a Squarespace site? <ul id="menu-footer-menu" class="menu menu-footer-widget"> <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-211959"> (We typically respond within a few hours during normal business hours EST/EDT.) </li> <li id="" class="icon_chat_alt menu-item menu-item-type-custom menu-item-object-custom menu-item-211960"> <a href="https://www.tidiochat.com/chat/3uhh5runhddyp8ibkzhuzk1srmzmi53i">Live Chat <span class="menu-description"></span> </a> </li> <li id="" class="icon_mail_alt menu-item menu-item-type-post_type menu-item-object-page menu-item-211961"> <a href="mailto:hello@teachingideas4u.com?Subject=Customer%20Service%20Email%20via%20Website">Email Us</a> </li> <li id="" class="icon_lightbulb_alt menu-item menu-item-type-post_type menu-item-object-page menu-item-211962"> <a href="https://teachingideas4u.com/resource-request-form/">Teaching Resource Request</a> </li> <li id="" class="icon_contact_alt_custom menu-item menu-item-type-post_type menu-item-object-page menu-item-211963"> <a href="https://teachingideas4u.com/contact">Contact Info</a> </li> </ul>
×
×
  • 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.