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


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by brandon

  1. How long is your video @angela3, and how large is the file once it's compressed as much as you can tolerate?
  2. Alright, here's a repost for those that cannot access that particular post:
  3. Something to consider on the Hayden template: Using a fixed announcement bar may cover up the navigation undesirably when scrolled to the top of the site. Using a fixed announcement bar may cover up the navigation when the on-scrolled navigation shows up. To deal with these, you could use "sticky" instead of "fixed" and hide the navigation when the user is scrolled down the page. To do that, use the following CSS: .sqs-announcement-bar-dropzone { position: -webkit-sticky; position: sticky; top: 0; z-index: 10001; } .show-on-scroll-wrapper.show { display:
  4. Something simple like this should work: .Cart[aria-label^='0'], .Cart:not([aria-label]) { display: none; } Let me know how that works for you. It's not something I heavily tested. If it does work, it could be modified using opacity and transitions instead. Related: https://forum.squarespace.com/topic/2639-hide-cart-until-items-in-the-cart/?tab=comments#comment-15354 https://forum.squarespace.com/topic/4550-hide-cart-icon-unless-product-in-cart/?tab=comments#comment-26867 Also, is it just me or is there no way to get to the checkout on mobile using the Foster templ
  5. Hi Dani. Unfortunately I'm a bit swamped at the moment, and the code used on the example site is a prototype, is over-complicated and prone to failure. It's probably not ready to be put into production, since it would need a few more features added to check for various conditions (like content length) and adjust accordingly. I do hope to come back to this soon and post a more flexible solution. Also, your English is much better than my German! My suggestion about the post title was simply to include as many similar terms as possible, so that others may be able to find your quest
  6. Related: https://forum.squarespace.com/topic/4513-send-users-to-cart-view-after-adding-item-to-cart/
  7. Yes, this was due to using "end" instead of "flex-end" in my original answer. I have updated the code. That is simply a matter of changing the "100%" to, say, "90%" in the code. By setting it to 90%, you're essentially saying that you want it to be the color (233, 210, 192, 1) (the "1" stands for 100% opacity) at 10% before the bottom.
  8. Hi @OneKindKevin. If the gradient is what you're concerned with primarily (as opposed to wanting to use an entirely different photograph on mobile) it looks to me like something that can be accomplished via CSS. Something like this, inserted via Custom CSS: @media screen and (max-width:640px) { .Index-page-content { justify-content: end !important; padding-bottom: 8% !important; } #banner { background: -moz-linear-gradient(top, rgba(0,0,0,0) 35%, rgba(233,210,192,1) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%);
  9. Hello. Consider adding a link to the site/page in question. That often helps others diagnose the issue then write and test solutions.
  10. To remove the pipe ("|") after the last item, use @tuanphan's code but change the first line to .Header-nav-item:not(:last-child):after { .
  11. Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not supporting multiple lines. So, the workaround below may still be of use. --------------------------------------------------------------------- Hi @dan3. Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Sq
  12. Ok. That being the case, the function of the UI is relatively simple to do. I think there's more work to be done in the design than the actual development, in this case. I'd suggest you do a mockup of what you want it to look like, and have an idea of how it would function. Including: The intro sentence/paragraph if there is one. The input field (for example is this 5 digit zip or zip + 4, etc.) The submit button (if there is one, or maybe you want to automatically check once the input reaches 5 characters?) The messages (and corresponding calls-to-action), both for "Ye
  13. Hi @EmilieJax. This could be relatively simple if you happen to be maintaining a list of zip codes corresponding to the zips you do service. If that were the case, it'd be a basic comparison against an array. Does the UI need to be map/radius based? Is there any other functionality needed besides asking the user to enter their ZIP and then returning a corresponding message?
  14. I understand. That does get a bit more complicated, requiring JavaScript (see previous answer). It's possible someone may come along and provide some more advanced code for you.
  15. Hi @AWC914 It's relatively easy to get the header to "stick" to the top using position:fixed or position:sticky (for modern browsers only). Something like this usually starts to get the effect: .Header { position: fixed !important; background-color: #DDDDDD; } However, depending on your configuration, they may only get you part-way. Furthermore, you may find additional complexities appear regarding top/bottom headers, announcement bar (in use, closed, open), whether you want it fixed on both desktop and mobile, whether you're okay with the nav. overlapping content (espec
  16. Here you are. Insert this via the CSS Editor: @media only screen and (min-width: 767px) { #header { position: sticky; top: 0; z-index: 9999; background-color: #F0F4F4; } } A few notes: This doesn't affect the mobile header/navigation. To do that properly, you'd need to use JavaScript. If at some point your body background color becomes different than your header color, things would get more complicated. The code above will work in modern browsers, but not older ones. Older ones will simply have the non-fixed header (not a big dea
  17. Hi @etspaulding. Could you provide a link to the site/page in question (for trial sites, see here). Since your style settings may be a factor, a link to the site/page makes it easier for others to write and test a quality answer.
  18. Hi all. I've updated the answer. I've left the previous answer as well in case that works better for others. In general, you can inspect the code and form your own custom CSS by using your browser's developer tools/inspector. However, hopefully the code above is all you'll need.
  19. Hi there. I was going to chime in here and mention the plugin I created that solves issues like this with fixed headers in Brine templates. But, I see the site happens to be using it already! It's always fun to see it in the wild. I'll just also add that I appreciate your eye for detail @bluefluidmotion. Not everyone notices those small issues with the announcement bar, overlapping text, etc. and perseveres until they find a solution.
  20. Hi @knockout <your-id-here> .sqs-layout .sqs-block-spacer { display: block !important; } In the above code, you can insert a page ID, a section identifier, or a block ID. Use your browser's dev-tools/web-inspector to locate these IDs: The collection ID is usually the id attribute of the <body> element. This will target a specific page. A section ID may be used on stacked index pages. You can find it by looking at the id attribute of <section> elements. It also correlates to the URL slug for a given page/section in the index. This would target spacer blo
  21. Hi @wearesilk. This can be accomplished. It is often called "scroll snapping" in modern-day CSS terms. However, CSS scroll snapping is still a bit unreliable and difficult to cross-browser test. So, another alternative is to use JavaScript. Here's an example of what can be accomplished using index page sections in Brine. Your specific application may require a lot more consideration (section length becomes a major concern with layouts like this that have to entirely fit on the screen, one-at-a-time). You'd most likely need to hire a developer to write the code to accomplish it, even if using t
  22. Hi @scubascuba. Yes, you can fade in an entire section on scroll without too much work. It's best to provide a link to the site/page in question (and for sites in trial mode, set visibility to "Password Protected" and provide that view-only password).
  23. Well, it's possible with JavaScript to query the collection item's JSON data, parse it and write your own HTML to the DOM at the bottom of the item. I'd expect that'd take a developer less than a few hours, depending on how experienced they were with that sort of thing and the complexity of the layout you wanted. One alternative is to just move the author name down to the bottom and add some text before and after it, based on the author class. Make sure you have your style settings set to show the author at the top of the body of the post (not in the header), then add something like this:
  24. Yo. Here's the non-LESS-CSS version of how you can do that. All those @media statements can be condensed into your LESS mixin, if that's how they're generated originally. You could alternatively target it via :first-child if you wanted. .index-navigation a[href="/"] { font-size: 0; } .index-navigation a[href="/"]:after { content: "None"; } @media screen and (min-aspect-ratio:1/1) and (min-width:1280px) and (max-width:1920px) { .index-navigation a[href="/"]:after { font-size: 1.40625vw; } } @media screen and (min-aspect-ratio:1/1) and (max-width:1280px) { .index-navigation a[href=
  • Create New...