brandon

Hi @Benedetto. The example code is fairly generic. It's simply a matter of changing the selector (in this case ".collection-5d7a891600952e518d49e751 .project-image") to whatever applies to your use-case. One can use browser developer tools / web inspector to locate the collection ID or other selector information, make the adjustment, then add via Custom CSS. As is often the case, if you need something more specific, it's best to include a link to the page in question, a description of what you want to achieve on the page. If that's the case, consider editing your message above to include that info (rather than posting a new message, which adds to the length of the thread here).

Hi @carliemcgarity. Try inserting the following via Custom CSS: .no-touch .collection-5d7a891600952e518d49e751 .project-image { -webkit-filter: grayscale(100%); filter: grayscale(100%); &:hover, &:focus { -webkit-filter: grayscale(0%); filter: grayscale(0%); } } Let us know how it goes. -Brandon

Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post. If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question? If it's a different sort of section you've added (that is, not a gallery section of some kind), what section was it?

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

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

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

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?

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.

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.

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

It might be theoretically possible to design and develop your own implementation, though the cost might exceed a couple year's worth of the difference between Squarespace plans. In addition, once you get into sending emails, usually a third-party service of some kind is engaged (and therefore additional ongoing service fees), so the savings might be quite minimal. What plan are you on now? Do you use customer accounts and, if not, how would you go about getting the user's email address? How many emails would you anticipate sending per month?

Hi @howeverbighoweversmall. The issue has to do with AJAX loading. You can disable it, or you can edit your code to take AJAX loading into account. I hope this helps. -Brandon

Hey @alicroft. This can be done. It requires a short bit of JavaScript to look for the "updated-at" div, query the page's JSON data, find the latest updated collection for the page (or series of pages in the index page), format the date to your liking, and then write the HTML to the "updated-at" div accordingly. I'd guess it'd take a good dev. and hour or two to write and test an efficient and resilient script to do that (the first half hour to get the "gist" done, then maybe another hour to mess with time formatting, which takes a bit of time without using 3rd-party libs). So yes, it's possible. Having taken a quick look, I think it could be done without you having to refactor your code at all. You could leave it as you have it on the pages you want it to appear, and the code could be set to run on those pages. If you want more info or help, say the word.

It's almost always best to provide the URL to the site/page in question along with the view-only password if necessary (for sites in trial mode, etc.). However, in this case you may not even have an example page setup. Here's an example in Brine which I whipped up. It uses "card" style image blocks in a single index section/page. Of course, your page ID would be different, and you'd probably want to more specifically target the section. You'll also want to mess with the padding on the text in order to get it where you want. You could do the same thing with regular 'ol image and text blocks and would probably have a bit more flexibility, but I figured this was good enough to serve as a proof of concept for you so as to answer your question, "yes". #page-5d9e40adc1c17f087e491930 { background: ~"linear-gradient(#BBB, #BBB) no-repeat center/1px 100%"; /*https://stackoverflow.com/a/53551089/5338581*/ } .design-layout-card .intrinsic { padding-top: 50px; padding-bottom: 50px; } .design-layout-card.image-position-right .intrinsic { padding-right: 6%; margin-left: -6%; background: linear-gradient(90deg, rgba(0,0,0,0) 40%, #FFC0CB 40%); } .design-layout-card.image-position-left .intrinsic { padding-left: 6%; margin-right: -6%; background: linear-gradient(270deg, rgba(0,0,0,0) 40%, #FFBB22 40%); } .sqs-block-image .design-layout-card .image-card-wrapper { background-color: transparent; } Do let me know how this works for you.

Hi @fantasiummedia. Here's how I'd approach it. Note that object-fit is focused on fairly modern browsers. .ProductItem-gallery-slides-item-image { object-fit: contain !important; object-position: top; width: 100% !important; height: 100% !important; position: static !important; } .tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides::before { padding-bottom: 0 !important; } .tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item { position: relative !important; } Let me know how that works for you. --------------------- UPDATE 4/8/2020 (and 6/24/2020) In some cases, you may prefer to use this instead: .ProductItem-gallery-slides-item-image { object-fit: contain !important; object-position: middle; width: 100% !important; height: 100% !important; position: static !important; background-color: #EEE; }

Paul's answer works well. In addition, if it's something you use often and require the style to be in-line with the rest of your text, I've created a plugin for Squarespace that allows for superscript, subscript and more. See Squint. -Brandon Project Mgr. and Developer at Ignertia Creator of Squint - Custom Text Styles & Headings for the Squarespace Text Editor

angelawang0524: I did take a look at your site, but your layout is very sporadic. What I mean is, the manner in which you have each row layed out is sporadic, such that there is little common pattern. In some cases, you have spacer blocks, others, not. In some cases you have rows inside rows, others not. So it's too difficult to write rules for any pattern. This happens when dragging-and-dropping in layout engine...it can result in a layout that looks like you want it but is in fact quite messy. Unfortunately that's the case here, so I can't seem to write reliable rules for your situation.

It's probably better to post a new questions with a link to the page. Code like that can be very specific and is not always practical in certain situations. aarnaa's was a simple use case.

Nice! If it works for you, please accept the answer.

Hi. The following Javascript, inserted via footer code injection should do the trick: <script> (function() { var prices = document.getElementsByClassName('sqs-money-native'); var thisPrice; var i, I; for (i=0, I=prices.length; i<I; i++) { thisPrice = prices[i]; thisPrice.innerHTML = thisPrice.innerHTML.replace(/(\.[0-9]*?)0+$/, "$1").replace(/\.$/, ""); //http://stackoverflow.com/questions/1015402/1015434#1015434 } })(); </script> I didn't test this throughout your site...just checked a couple pages. Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

Hi .While not necessary, a link to a page on your site that shows the elements you'd like changed may help others offer help.

Hello. Add the following CSS via the CSS Editor: @media only screen and (max-width: 768px) { #block-8fc91e9563250a77172c { display: none; } } Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

Nice! Thanks for posting. Side note: I converted your Answer to a Comment (it's easy to accidentally post an answer instead of a comment). Up-voting useful answers is also helpful. Best!

Hi there. Give this a try. Insert the following CSS using the CSS Editor. /*Reorder category list items on Montauk*/ /*http://caniuse.com/flexbox*/ /*http://shouldiprefix.com/#flexbox*/ #collection-5719735837013bf7bb9fc122 .category-nav-links { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ -webkit-justify-content: space-around; /* Safari 6.1+ */ justify-content: center; } /*Set the order of each list item ('li'), starting from the second child (first child is not displayed)*/ /*"All"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(2) { order: 1; } /*"General"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(3) { order: 6; } /*"Hair"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(4) { order: 2; } /*"Hair Care"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(5) { order: 4; } /*"Nail"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(6) { order: 5; } /*"Wig"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(7) { order: 3; } @media only screen and (max-width:640px) { #collection-5719735837013bf7bb9fc122 .category-nav-links { -webkit-flex-flow: column; flex-flow: column; } } Keep in mind that if you add or remove categories, you'll have to change the "order:" values accordingly. Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

Cool man; glad that worked. You deserve some credit for your very clearly articulated question. That makes a big difference when it comes to unique requests.