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. Alright, here's a repost for those that cannot access that particular post:
  2. 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: none; } -Brandon
  3. 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 template? Using the demo site, there was no link to the checkout at any point in my mock-shopping. -Brandon
  4. 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 question even if they type in something slightly different. -Brandon
  5. Related: https://forum.squarespace.com/topic/4513-send-users-to-cart-view-after-adding-item-to-cart/
  6. 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.
  7. 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%); background: linear-gradient(to bottom, rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%); } } Do let me know how that works for you. -Brandon
  8. Hello. Consider adding a link to the site/page in question. That often helps others diagnose the issue then write and test solutions.
  9. 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 { .
  10. 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 Squarespace 7.1 . View Demo Site JavaScript Insert via sitewide footer code injection. If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show). <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script> CSS Insert in "Customer CSS", via the CSS Editor. The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content. /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } This is of course experimental. Do let me know how it works for you, or if you have questions. If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date. -Brandon
  11. 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 "Yes...' and "No..." The message that appears if the input is invalid (hopefully could be avoided by limited the field to numbers, but best to have it in the code just in case) As I said, from there I think the actual coding of it would take coder/developer less than 30 minutes to do. For example
  12. 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?
  13. 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.
  14. 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 (especially when on-page anchor links are used) and whether you want to make use of "on-scroll" effects such as a shrinking logo or color/transparency change. So, if the above code doesn't get you there, you can check out a plugin I made to fix Squarespace Headers on Brine templates, or try posting a link to your site/page in question (and the view-only password for trial-mode sites). Someone may be able to help you out further, especially if you can speak to some of the factors I mentioned. -Brandon
  15. Hi Sam. This can be done. It is non-trivial to accomplish reliably, especially with some of the recent changes to touch detection in iOS 13. As it happens I've created a plugin for it, if that is of interest to you. It won't enable mouse-dragging, but it will work for touch-based devices. If you have questions, do let me know. If that's not what you're looking for, or if you have other questions, post a link to the site/page in question and someone here may be able to help you more specifically. -Brandon
  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 deal).
  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 blocks in a specific section. A block ID can be used to target a specific spacer block. You can find it as the id attribute of a div, usually starting with "block-yui_" More about ids in Squarespace. -Brandon
  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 third-party tools. If your layout is quite simple, it might be easier to write a custom implementation than to bend third-party tools to do your bidding. Understanding that this doesn't help you accomplish it, I do hope this helps a little in that it shows that it's possible. -Brandon
  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: .blog-item article { display: flex; flex-direction: column; } .blog-item article .entry-header { order: 1; margin-top: 1.5em; } .blog-item article .entry-author:before { content: "Written by "; display: inline; } .blog-item article.author-george-zhang .entry-author:after { content: "George Zhang is donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit."; display: block; font-style: italic; font-size: 0.9em; margin-top: 0.2em; padding-left: 120px; background-image: url("/s/your-file-name.jpg"); background-size: 100px; background-repeat: no-repeat; } In the above code, you'd use a "slugified" (lower-case-hyphenated) version of the author's name in place of "george-zhang". You can also find that class within the code by using your Browser's Dev. Tools/Inspector. In the Bedford Demo, that ends up looking like this: You'd have to repeat some of that CSS for each author, so it could get a bit tedious. But, it is possible to do with just CSS. One thing to note: you can't have links in the description using this method. You can add an author image. However, this requires uploading the image to your storage, taking note of the file page, and then setting it as the background image in the code above. As I mentioned, doing a proper job using JavaScript is an option, but may require the assistance of a coder/developer. -Brandon
  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="/"]:after { font-size: 18px; } } @media screen and (min-aspect-ratio:1/1) and (min-width:1920px) { .index-navigation a[href="/"]:after { font-size: 27px; } } @media screen and (max-aspect-ratio:1/1) and (min-width:1280px) and (max-width:1920px) { .index-navigation a[href="/"]:after { font-size: 1.40625vh; } } @media screen and (max-aspect-ratio:1/1) and (max-width:1280px) { .index-navigation a[href="/"]:after { font-size: 18px; } } @media screen and (max-aspect-ratio:1/1) and (min-width:1920px) { .index-navigation a[href="/"]:after { font-size: 27px; } }
  • Create New...