Jump to content

heyawaiszahid

Circle Member
 View Profile  See their activity

  • Posts

    37

  • Joined

  • Last visited

 Content Type 

Everything posted by heyawaiszahid

  1. heyawaiszahid
    Hi @jpomilio Please be courteous and mark it as the answer if it helped. This will also assist others who are looking for a similar solution.
  2. heyawaiszahid
    Hi @saltcreativestudio_ Please be courteous and mark it as the answer if it helped. This will also help others who are looking for a similar solution.
  3. heyawaiszahid
    For those reading this post on a later date, below is the updated code that works flawlessly. <script> let donateBtn = document.createElement("button"); donateBtn.setAttribute("type", "button"); donateBtn.setAttribute("data-formId", "14580"); donateBtn.style.display = "none"; document.body.appendChild(donateBtn); let handleClick = (e) => (e.preventDefault(), donateBtn.click()); document.querySelector(".header-menu-cta a")?.addEventListener("click", handleClick); document.querySelector(".header-actions-action a")?.addEventListener("click", handleClick); document.querySelector("#block-yui_3_17_2_1_1718382999031_11811 a")?.addEventListener("click", handleClick); </script>
  4. heyawaiszahid
    @amacarv Please check the DM I just sent.
  5. heyawaiszahid
    You are welcome @amacarv Please make sure header menu CTA is not turned off.
  6. heyawaiszahid
    You are welcome @amacarv Please add below code to Custom CSS. #block-yui_3_17_2_1_1718382999031_11811 button { width: 100% }
  7. heyawaiszahid
    @saltcreativestudio_ Can you check in a private browser window or after clearing your browser cache. It is working for me.
  8. heyawaiszahid
    @amacarv I added few lines of code at the bottom for the button in footer. Please use the updated code. <script> let donateBtn = document.createElement("button"); donateBtn.setAttribute("type", "button"); donateBtn.setAttribute("data-formId", "14580"); donateBtn.className = "btn btn--border theme-btn--primary-inverse sqs-button-element--primary"; donateBtn.textContent = "Donate"; let desktopCTA = document.querySelector(".header-actions-action a"); if (desktopCTA) desktopCTA.parentNode.replaceChild(donateBtn.cloneNode(true), desktopCTA); let mobileCTA = document.querySelector(".header-menu-cta a"); if (mobileCTA) mobileCTA.parentNode.replaceChild(donateBtn, mobileCTA); let footerCTA = document.querySelector("#block-yui_3_17_2_1_1718382999031_11811 a"); if (footerCTA) { donateBtn.className = "sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element"; footerCTA.parentNode.replaceChild(donateBtn, footerCTA); } </script>
  9. heyawaiszahid
    You can do the same for the Home link. Pass the id of the header or logo in the URL followed by a slash. This will scroll the page to the position of respective element.
  10. heyawaiszahid
    Could you please double check? I checked your website and could not find it there.
  11. heyawaiszahid
    @saltcreativestudio_ Below is the code you need. Make sure to put it at the bottom of your Custom CSS. .item-pagination-link--next { .item-pagination-title { font-size: 0; &:before { content: "Next"; font-size: calc((var(--portfolio-item-pagination-font-font-size-value) - 1) * 1.2vw + 1rem); } } } .item-pagination-link--prev { .item-pagination-title { font-size: 0; &:before { content: "Previous"; font-size: calc((var(--portfolio-item-pagination-font-font-size-value) - 1) * 1.2vw + 1rem); } } }
  12. heyawaiszahid
    Hi @amacarv we cannot add code-block into the site header. Therefore, we'll create the button using custom JavaScript and integrate it into the header. Since you already have button there, I replaced it with the one we need, ensuring to retain the existing Squarespace classes and remove other styles. Below is the code that you should place in the Code Injection FOOTER. Hopefully, this helps! <script> let donateBtn = document.createElement("button"); donateBtn.setAttribute("type", "button"); donateBtn.setAttribute("data-formId", "14580"); donateBtn.className = "btn btn--border theme-btn--primary-inverse sqs-button-element--primary"; donateBtn.textContent = "Donate"; let desktopCTA = document.querySelector(".header-actions-action a"); if (desktopCTA) desktopCTA.parentNode.replaceChild(donateBtn.cloneNode(true), desktopCTA); let mobileCTA = document.querySelector(".header-menu-cta a"); if (mobileCTA) mobileCTA.parentNode.replaceChild(donateBtn, mobileCTA); </script>
  13. heyawaiszahid
    @JamestownStudio Please share the URL of your website.
  14. heyawaiszahid
    @jpomilio Use slash / before the hash #. For example /#who-we-are
  15. heyawaiszahid
    @undefined I'm glad it helped. Since we don't currently have another linked image on the homepage, it's okay to exclude all homepage links. However, this approach won't work if you plan to add a few image links to the homepage later on. There are a few solutions to that as well, but let's not complicate a simple thing when it's not necessary.
  16. heyawaiszahid
    @Graupel To clarify, CSS stands for Cascading Style Sheets, which are used to style elements on a webpage. Modifying the scroll position of a document is not within the scope of styling and therefore cannot be accomplished using CSS. I understand that you are on the basic plan, which limits the ability to inject code beyond CSS properties. However, there's a solution: place a button or preferably a link in your website's footer. This link can direct users to an element ID positioned at the top of your webpage, such as the header ID. Now to ensure it stays at a fixed position, typically bottom-right, you can use CSS properties to style the link. I hope this helps!
  17. heyawaiszahid
    @undefined In my opinion, the simplest approach is to exclude the homepage from your global code, as shown below. While this solution isn't perfect and has some drawbacks, it's the cleanest approach for your current requirements. body:not(.homepage) { a:link img { opacity: 1; } a:hover img { opacity: 0.5; } }
  18. heyawaiszahid
    @allie00p We always need to ensure we use the correct ID for the block. It appears you deleted the old block, which is okay. Now, we just need to update the ID with that of our new code block. Here's the revised version: #block-yui_3_17_2_1_1721324851715_19622 { iframe { border: 0; min-height: 860px; } }
  19. heyawaiszahid
    Hi @michaela could you please share the URL?
  20. heyawaiszahid
    @Pennsoutharchive Could you please share the URL of the page where you embed it?
  21. heyawaiszahid
    @lisashires1 Please share the URL of your website. It looks like you are missing the other part of the code.
  22. heyawaiszahid
    @allie00p Thank you for sharing the URL. Please put below code into Custom CSS of your website. #block-yui_3_17_2_1_1721314952506_51881 { iframe { border: 0; min-height: 860px; } }
  23. heyawaiszahid
    You are welcome @louisemcilroy I noticed that the padding on all sides (top, bottom, left, right) appears consistent on mobile devices for both the homepage and inner styling page. I've attached screenshots for reference. Could you please record a video or take screenshots where you see it different.
  24. heyawaiszahid
    Hi @louisemcilroy it looks like some additional margin is added to the gallery for mobile. Please comment/remove the below code or change it from 20px to 0px; @media screen and (max-width: 767px) { .gallery-masonry { margin-left: 20px !important; margin-right: 20px !important; } }
  25. heyawaiszahid
    Good news @jholmertz @JessEds @Benjohnson31 @OliviaPeddinghaus @hoardingacademy @OSTS @CheekyStar , I've developed a straightforward solution that allows to place a logout button anywhere on your website. Simply add the following code snippet to the Code Injection FOOTER Ensure your logout button/link redirects to #signout - See attachment <script> document.addEventListener("click", (e) => { if (e.target.tagName === "A" && e.target.getAttribute("href") === "#signout") { e.preventDefault(); const i = document.createElement("iframe"); i.src = window.location.origin + "/account/frame"; i.width = "1"; i.height = "1"; document.body.appendChild(i); i.onload = () => { let t = setInterval(() => { let b = i.contentDocument.querySelector('button[data-test="sign-out"]'); if (b) { clearInterval(t); b.click(); } }, 100); }; } }); </script> Feel free to DM me if you need a more advanced solution, such as programmatically toggling log in and log out buttons.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources