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

Leaderboard

Popular Content

Showing content with the highest reputation on 07/23/2021 in all areas

  1. It will be easier to use javascript since it will help fetching the caption from the image/slide, that you can edit the text directly in editor. But there is a trick that require more effort from you to find the slide id and manually adding the caption into custom css. Each slide has unique id that can be used to target like so For js solution, join this topic for previous answer
    2 points
  2. Site URL: https://blenny-daffodil-5dzg.squarespace.com/ Password : ProdigySite2021 Currently the nav works where the link you are currently on is coloured but additionally I want a box around only the currently selected tab. I am running into more issues I need fixed such as the colour only being there when at the top of the page. And on certain laptops the text doesn't stay on one line. I was trying the buttons style for the nav but it made 3 rows of buttons for example. How do I ensure text stays on one line no matter the laptop (aside from mobile devices).
    1 point
  3. I'd like to use the Lightbox Anything plugin to display some speaker bios, instead of having them click through to their individual pages. Is it possible to add the lightbox to a summary block, without having to replace all the source URLs individually for each post? Is it also possible to use the lightbox anything plugin for a URL such as /speakers/speaker-name? This doesn't seem to work for me. Thanks!
    1 point
  4. We have a section on our site that we are building that is like a "Places to Fish" section. Similar to the Where to Fish section of https://fillmore-demo.squarespace.com/ We thought about using a Blog and each blog post would be one of the Places to Fish. The problem would be that the most recent post would at the top of the list when viewing the Places to Fish page. We thought about copying the Where to Fish section of Fillmore template, but then again, its alphabetical order. We would like them to either arrange randomly when the page is viewed, or maybe even adding a Rating, where people could rank each place and the most popular place would be near the top of the page. We are still in our Trial phase, trying to iron this out. Since its a core piece our site design/plan we are trying to figure out if we can do it, or if we need to go Wordpress or some other more custom solution.
    1 point
  5. Thank you, bangank36! I will look for the javascript solution in that thread. 🙂 I may ask for clarification if I run into any difficulty!
    1 point
  6. Hello All, I've been reading earlier threads on how to make captions appear when viewing gallery pics in lightbox view. I'm wondering if injecting special code into my gallery page header is the only way to achieve this. If so, I'll need to upgrade to a business plan. (I'm currently on a personal plan in 7.1.) I just want to be sure this is the only way to do this, before I go ahead and change plans. Thanks for any help you can provide! Sincerely, 7TK
    1 point
  7. Site URL: https://tjr-new-site.squarespace.com/slider I’m looking to create an accordion / slider where each section expands on hover, as demonstrated in the gif mockup. I'm having trouble adapting the code snippets I'm finding to have the right animation, and formatting the content within each section (most I've seen use full background images with caption). The code I started with: https://www.cssscript.com/pure-css-horizontal-responsive-image-accordion-slider/ pw for my scary first attempt: troysitehelp I'd love anyone's input on how to "hack" this for squarespace—i.e. laying out content in SS editor, and adjusting the code to reference this, or if anyone would like to quote an estimate to build this.
    1 point
  8. Wolfsilon

    Fixing Disabled Script

    Hello, I couldn't see where the button is supposed to be, is it on the home page? I don't see a payment plan section either. Also, this message commonly shows when you have installed it incorrectly or do not have custom javascript enabled on your website. Be sure that you have a Business plan with Squarespace. Custom scripts are only supported in Business or higher plans. If you have a Business plan.... How are you installing the code? Are you using a code block? Sometimes these scripts require that you add portions of it via Settings > Advanced > Code Injection > Header/Footer injection menus. To me, this looks like it could go in the Header Code Injection field. Let us know! Thanks, -Dan
    1 point
  9. Thank you @bangank36for your great help - the code you recommended worked to display captions on the lightbox! THANK YOU 😄
    1 point
  10. Thank you for the code. Worked great on my friend site.
    1 point
  11. @JeremiahSvaren Thank you so much for your help!!!!!! We will follow your advises. Many thanks. And yes, cool name, right? 😉 It's now or never!
    1 point
  12. Q1,2,3. Add to Design > Custom CSS /* Tablet */ @media screen and (max-width:1024px) and (min-width:768px) { /* q1. Shop text no wrap */ div#block-4cd380416112eb7e6eab p { white-space: nowrap !important; } /* q3 packing design */ [data-section-id="6064ae80b46736615c31f207"] .content { width: 100% !important; } } /* tablet mobile */ @media screen and (max-width:1024px) { /* q2 remove scroll bar */ html, body { overflow-x: hidden; } }
    1 point
  13. Not sure why. If you still can't solve it, add this to Design > Custom CSS /* footer mobile text order */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1596047903533_12545+.row .span-6 { display: flex; flex-direction: column; } div#block-yui_3_17_2_1_1595691424873_11077 { order: 1; } div#block-yui_3_17_2_1_1626963596232_21283 { order: 2; } div#block-yui_3_17_2_1_1626963596232_21379 { order: 3; margin-left: 0; } }
    1 point
  14. Add to Design > Custom CSS /* services Mobile */ @media screen and (max-width:767px) { div#page-section-60f00f33d833301a6b9aa6f3 .span-8 .span-4 { width: 50% !important; float: left !important; } div#block-1e64c82ec9fd2c0a0644 { margin-top: 0 !important; } } /* Get in touch tablet */ @media screen and (max-width:991px) and (min-width:768px) { div#page-section-60f00f33d833301a6b9aa6f8 .html-block { min-height: 160px; } }
    1 point
  15. ah! You're the best! Much appreciated! Happy weekend
    1 point
  16. Could you share with us your current Custom CSS entries, so we can see what you have done so far?
    1 point
  17. Yes, you can do this by referring to this blog's unique 'Collection ID'. On Squarespace, every collection (Store, Gallery, Blog) has one. First you'll need to enable the date and author metadata because they are currently disabled on this site. When you've enabled them, you can add the following to Design > Custom CSS to disable them on the team members page only: .collection-60f00f36d833301a6b9aa751 .blog-item-wrapper .blog-item-author-date-wrapper { display: none; } As you'll see, this CSS makes reference to the unique reference for your blog on your site. To use this with another blog on a different site, you'll need to use a different collection ID. This guide explains how to do this.
    1 point
  18. Hi. Your font code is invalid. Replace all code in Custom CSS with this code @font-face { font-family: moontime; src: url(https://static1.squarespace.com/static/60de3fafbab11f6f3a2625ee/t/60f5bb8cc689252d67948a1b/1626717068734/MoonTime-Regular.ttf) } h1 { font-family: moontime !important; }
    1 point
  19. It looks like you sent me a message?I send code. You can check
    1 point
  20. try /* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; padding: 1em; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 0 !important; padding-right: 0 !important; } } /* disable lightbox on mobile */ @media only screen and (max-width: 767px) { .gallery-masonry-lightbox-link { pointer-events: none; } }
    1 point
  21. tuanphan

    Anchor link issue 7.1

    Remove last / from anchor links to
    1 point
  22. try #block-yui_3_17_2_1_1626467746037_19774 +.row .sqs-block-button { position: absolute; left: 50%; transform: translateX(-50%); bottom: -15%; width: 250px; } #block-yui_3_17_2_1_1626467746037_19774 + .row .sqs-block-button a { border: 2px solid #fff; }
    1 point
  23. I Think we will need to check code in edit mode. Can you duplicate the site & add me as a contributor? I can take a look
    1 point
  24. Add this code to 3 page Headers <style> /* resize home top mobile banner */ @media screen and (max-width:767px) { article section:first-child { min-height: unset !important; height: 60vh; } } </style>
    1 point
  25. Try <!-- Fix inconsistent blog + event date format on Squarespace 7.1 template --> <!-- Squarespace Forum 03-08-2021 --> <script src="https://stevenlevithan.com/assets/misc/date.format.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var dateformat = "mm-dd-yyyy"; var timeformat = "H:MM"; var pubdate = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date"); for (var i = 0; i < pubdate.length; i++) { var d = new Date(pubdate[i].getAttribute("datetime") || pubdate[i].innerText); if ( pubdate[i].classList.contains('blog-meta-item--date') ) { d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]).getAttribute("content"); } pubdate[i].innerHTML = d.format(dateformat); } var eventTime = document.querySelectorAll("time[datetime][class*=event-time]"); for (var i = 0; i < eventTime.length; i++) { console.log(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText); var d = new Date(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText); eventTime[i].innerHTML = d.format(timeformat); } var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time"); for (var i = 0; i < eventTimeSummary.length; i++) { var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr"); var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr"); _12hrs.innerHTML = _24hrs.innerHTML; } }); </script>
    1 point
  26. Thank you for posting scg I am in the process of setting up a site for a law firm and have been struggling with finding a way on squarespace to do so. This thread is very helpful!
    1 point
  27. Vimeo has the code here: https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos Here's the code they provide: <iframe src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&autopause=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> I used a video block and opened up the brackets. Then dropped the code in and changed the video player link to my video (the numbers before the "?".
    1 point
  28. Yeah, that is just really poor user experience and takes away any kind of hierarchy on the site. A landing page should structurally be above any children pages that fall under it, so it's strange behavior to see <Services> on the same line as <services/page>. Hoping to find a workaround because it makes my site lack structure.
    1 point
  29. I tried many suggestions to make tables - this answer details the best way I've found to add tables to Squarespace. Custom Table Block [Updated 2019] The best solution I have found for responsive and well designed tables on Squarespace is the Custom Table Block that can be purchased as a plugin. Once added, you can add tables just like other standard Squarespace blocks on any page. If your table contains more than a few rows/columns you can add your data to individual Google Sheets and then link them to a Table Block. It's by far the easiest way to add Tables to Squarespace. Convert Table to HTML If the customer already has the table in a Word document, I'll use the excellent free Word to HTML tool by Olly Cope. I paste in the table and it will convert it to HTML. Create HTML Table If I don't already have the table I will create it using the excellent HTML table generator at Tables Generator with the CSS option turned off. Use a Code Block When the HTML has been generated, I add it to a Code Block on the Squarespace page. I replace the initial <table> tag with the following: <table class=mytable> Add some Custom CSS So that the table is formatted to match the style of the site I then add a few lines of CSS to the Custom CSS page. Something like: .mytable { border: 3px solid #5f102b; background-color: white; th { padding: 6px; height:40px; color: #eeeeee; background-color: #5f102b; } td { padding: 6px; border:1px solid #f1eaf2; } tr:nth-child(odd){background-color: #f1eaf2} }
    1 point
This leaderboard is set to New York/GMT-04:00
×
×
  • Create New...