takis-7124

Yes but its not what I want for this one. Solution for the first works like a charm. No idea how you managed to track that one. Will be a serious headache to retrack it on the other pages. Thanks

https://www.tsiricos.gr/propertytest Squarespace 7.1 Business Forms, Lightbox "Inquire about this property button", bottom of the page. 2 issues I have added the following code to the post-submit HTML field to dub as a "thank you" note. <h1 style="color: #000000; text-align: center;">Thank You</h1><h3 style="color: #000000; text-align: center;">Your request has been received. We usually respond within 24 working hours</h3><p1 style="color: #000000; text-align: center;">This is an automated message. You will soon be redirected back to continue browsing the properties or you may <a href="https://www.tsiricos.gr" style="color: #000000; text-decoration: underline;"> return to our main website</a></p1> a) The post submission "Thank you....." text starts WAY too low (middle), the thank you "page" is WAY too big and the "thank you" page focuses on the "Thank you..." message. As a result, not even the close button is visible and you need to scroll up. Hiding the form title didnt do the trick. I need help to somehow bring the "thank you..." text closer to the top and make the entire "thank you page" smaller. b) In the same box I try to run the following script which otherwise works elsewhere. Is it not compatible there and if so, is there another way to redirect with code from there? I don't want to automatically redirect to another page using the "redirect" tab. <script> setTimeout(function(){ window.location.href = 'https://www.tsiricos.gr'; }, 8000); </script>

So my problem is this. Just realized that the icons I use in a website - over 100 and in over 50 pages in different combinations - are shitty in darkmode. So I need to substitute and re upload them with the same name. Do I have to re insert every new image to every single place it was previously uploaded or is there a way to expedite this (import.export or something)? An older post from @paul2009 suggests that I am doomed but its as old as 2019 so I hope for the opposite. Fact that I can upload 2 files with the same name, worries me so is there a way to rename the "unique Squarespace URLs" mentioned?

Links work, if you mean that. The idea is for you not to have access to the product (/p/......) pages as I am not really selling stuff, merely using the shop template as I need access to category etc. functions for summary block. If its too much of a hassle, just leave it - I would rather bend your ear another time on something that is REALLY above my head and is completely broken 😃. The 2nd code structure I used may not be perfect but its still a valid solution for all practical purposes and fast to implement, just a one line code; even the history of universal filter works. Am I just an anal perfectionist. EDIT: Yeah, definitely dont bother with it. I wrote a script in excel to automate the URL renaming code generation so anything else would just be cumbersome. Thanks for your time.

That worked partially. The Title under the picture now points to the correct https://www.dphworld.com/antiparos/kallisto/ as intended but the picture per se still points at https://www.dphworld.com/villas/p/antiparos/kallisto . Adding <a href="https://www.dphworld.com/antiparos/kallisto/">Villa Kallisto | Antiparos | 16 Guests</a> in the metadata of the 2 thumbnails didnt cut it either

Both image and title use same link, throughout the site. Villa name and image is constant and specific for each villa. No sure how to implement what you are suggesting.

Did you manage to find a workaround on that @abc? Exact same problem

https://www.dphworld.com/villas/mykonos/#anchor If a pass is needed in any step, its 1234 I was forced to use the store so as to get access to some perks, such as categories etc. but I am NOT interested in the cart and checkout function. Managed to redirect the product (to be added to cart) picture bellow in red circle away from the store and to the internal site-link that I want (/mykonos/helios), using the Java snippet bellow. So yes, I have a working solution BUT it is not ideal since eventually its going to be repeated over 100 times, meaning over 1200 lines of code and hard to upkeep. Is there another way to force the image to link to another page of the site? No code preferably or at least shorter/easier/CSS TIA <!----MYKONOS - HELIOS ---> <script> document.addEventListener('DOMContentLoaded', function() { var customLink = document.getElementById('thumb-bhelios-estate-mykonos-18-guests-9-bedsb'); if(customLink) { var links = customLink.getElementsByTagName('a'); for(var i = 0; i < links.length; i++) { links[i].href = 'https://www.dphworld.com/mykonos/helios'; } } }); </script> EDIT: ADDITIONALLY, I just now noticed that by using a summary block in another page to display those products, the URLs revert back to the original ones leading to the "cart page", instead of the intended URL forced by the java script. https://www.dphworld.com/antiparos/iris pass 1234 (2nd picture, the bottom url is by hovering on the middle image) This was countered by a non elegant solution, provided by the script bellow which does also simplify the code but - unfortunately - hovering over obviously displays the old "wrong" address. For the time being its only implemented in https://www.dphworld.com/corfu/phos pass 1234 I would really prefer a more elegant solution where the old address is not displayed and the code is simple <!-- VILLA URL redirection --> <script> function redirectUrl(fromUrl, toUrl) { // Check if the current URL matches the old URL if (location.pathname === fromUrl && !window.frameElement) { // Redirect to the new URL window.location.href = toUrl; } } // Define the old and new URLs and call the function redirectUrl("/villas/p/phos-estate-corfu-12-guests", "/corfu/phos"); </script>

Looking for the same solution, for different reasons. Did you come up with a solution how to link a variant photo to url? In theory, indeed it should be possible but my skills are nowhere near there. My only need is to add a link to the variant picture

Wasn't answered but I found a better workaround. According to squarespace support this method does not work as a bandaid to gallery block render/display issue but worked for me. Used a section gallery and now all thumbnails load in both chrome and firefox and all lightbox images are rendered to proper resolution. You can use the following code to tweak the gallery and lightbox, now it has 2 switches to control thumbnail and lightbox. Feel free to improve /* LIGHTBOX CONTROLS FOR FLOOR PLANS */ /* General controls and adjustments */ .gallery-lightbox-controls { display: flex !important; } [data-lightbox-section-id="65eba2ee2952eb7dd0fc1ef9"] { .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * { stroke: white; stroke-width: 4px; } .gallery-lightbox-close-btn-icon * { color: white !important; } /* Change the background lightbox color - gallery */ .gallery-lightbox-background { background: #404040; opacity: 0.8; } /* Mobile gallery lightbox arrow position */ @media screen and (max-width:932px) { .gallery-lightbox-control-btn[aria-label="Previous Slide"] { left: -22px; } .gallery-lightbox-control-btn[aria-label="Next Slide"] { right: -10px; } } } /* Desktop gallery thumbnail position / per row */ @media screen and (min-width:933px) { section[data-section-id="65eba2ee2952eb7dd0fc1ef9"] { .gallery-grid-wrapper { grid-template-columns: repeat(3, 1fr) !important; } .gallery-grid.gallery-grid--layout-grid { padding-left: 25vw !important; padding-right: 25vw !important; } } .gallery-grid.gallery-grid--layout-grid { align-items: center !important; } } /* END LIGHTBOX CONTROLS FOR FLOOR PLANS */

Excellent explanation. Works like a charm. Apparently I was using wrong syntax. Section and lightbox sections are different. Thanks

Thanks for taking the time @Beyondspace . Lightbox pops up if you press any of the gallery pictures with the floor plans of the house, towards the end. Circled in red below

Trying to apply CSS to a specific image gallery section ((add gallery/images - not add gallery block) I tried entering the section, then yui I see with inspect and ultimately even the entire page with collection but the damn code keeps applying to the entire site and not only on that particular gallery section . Am I getting the syntax wrong or is targeting gallery sections impossible? Forum seems to suggest is doable but cant get it right section[data-section-id="65eba2ee2952eb7dd0fc1ef9"] is the one in question. trying to apply it to the following code. Entering that, with or with out the word section, with or without * before { ...code ...}, doesnt seem to work. What gives? https://www.dphworld.com/santorini/homer pass 1234 /* LIGHTBOX CONTROLS FOR FLOOR PLANS */ /* General controls and adjustments */ .gallery-lightbox-controls { display: flex !important; } .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * { stroke: white; stroke-width: 4px; } .gallery-lightbox-close-btn-icon * { color: white !important; } .gallery-grid.gallery-grid--layout-grid { align-items: center !important; } /* Change the background lightbox color - gallery */ .gallery-lightbox-background { background: #404040; opacity: 0.8; } /* Desktop gallery thumbnail position / per row */ @media screen and (min-width:933px) { .gallery-grid-wrapper { grid-template-columns: repeat(3, 1fr) !important; } .gallery-grid.gallery-grid--layout-grid { padding-left: 25vw !important; padding-right: 25vw !important; } } /* Mobile gallery lightbox arrow position */ @media screen and (max-width:932px) { .gallery-lightbox-control-btn[aria-label="Previous Slide"] { left: -22px; } .gallery-lightbox-control-btn[aria-label="Next Slide"] { right: -10px; } } /* END LIGHTBOX CONTROLS FOR FLOOR PLANS */

So basically I found a bug in Squarespace where a media library cannot load properly and lighthouse pictures are rendered in low resolution. Only bandaid solution I can think of, to which tech support will not assist because apparently it not their job to support when their product breaks down, is automatically refreshing that particular block or at least section of the page. For some weird reason, refreshing with F5 fixes most of the glitches so I need to make it an automatic process, relevant to that particular block or section alone. No idea how to code this so help would be appreciated. Ideally, code should have a "how many times" switch too. #block-yui_3_17_2_1_1709761603063_20548 is the offending gallery block that needs to be refreshed/reloaded, in section[data-section-id="65e8e4f405c27949534e7f67"] Also How to automatically refresh/re-render those images but in lighthouse view – they cant properly render without refresh at the moment If needed, https://www.dphworld.com/santorini/pelos , pass 1234 7.1, business plan Of course, if you have another idea its more than welcome. the problem is that the block gallery does not load all the times unless the page is refreshed (different behaviour between firefox and chrome) and that those gallery images in lighthouse view mode are rendered in low resolution. The 1st of the images *always* in low res

This is now a certified bug by squarespace . Apparently something is misbehaving with a combination of media libraries and lighthouse image rendering. Hopefully, they will fix it. Meantime, I came up with this band-aid. Tech support dismisses it as "not working" but frankly, it does for me. 0 display problems in either browser and no resolution problems

Visitor and incognito at that, to avoid cache application, both in Mozilla and chrome as well as on mobile devices with no previous access. The problem as I said is not with the top gallery pictures of the villa it self, but rather with the floor plans in the bottom gallery, right under "Review the floor plans" heading and just above the why chose the villa" picture (#block-4657ac005d8cd9a6035f). Top gallery with house, pools etc displays fine. Just checked to re verify and it persists. Unless I refresh, pictures below wont appear despite occupying space - as if they don't render? I also made sure that a CSS for blocking a certain display on top gallery in mobile view IS NOT the cause - though it couldn't be, plus problem occurs in all resolutions @media screen and (max-width:932px) { .sqs-gallery-thumbnails.sqs-gallery-design-strip { display: none; }} Thanks for the good words.

https://www.dphworld.com/crete/ariadne pass is 1234 7.1, business plan First gallery on top of the page, displays fine (property photos) Second gallery near the bottom of the page (property floor plans), consistently refuses to display unless I refresh the page. Occurs in both desktop and mobile. Cant be a cache issue as I also tried it on a separate computer and with incognito mode. What gives? Any help appreciated

How about this one though @creedon ? Uploads fine, looks fine but still, getting the error "there was an error. retry with the same file". With this and another 61 from the same source. Any ideas? **UPDATE** I honestly cannot follow what goes in the heads of the programmers. The problem, apparently, was that I was trying to upload in a folder in the library and not to the root of the library. Seriously, wtf? Why would it make any sense first to upload on root and then spend time to tick and move in the folder

I am trying to redirect from landing page https://www.tsiricos.gr after 5 seconds. This causes a "Properly defines charset Error! A character encoding declaration is required. It can be done with a <meta> tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. Learn more about declaring the character encoding." error. Despite having the meta, charset and body in right order. Way I have structure it, this auto redirection after 5 seconds is essential. What is happening? Syntax looks good. Codes that I tried redirected as intended BUT, cause the error report above: Both in Header Injection and in landing page <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> document.addEventListener('DOMContentLoaded', (event) => { if (window.location.href === 'https://www.tsiricos.gr/') { setTimeout(() => { window.location.href = '/en/home/'; }, 5000); // Redirects after 5 seconds } }); </script> </head> in codeblock in landing page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="5;url=/en/home/"> </head>

Not that easy this one @tuanphan I had to use the SS engine to insert the overlay in the picture. The code I provided is what I estimate to be relevant code as it the only reference I found in my code with "overlay" in. copy/pasting it though in CSS and adding a simple media screen width wont work. I am therefore assuming that, unless we can manually with CSS stop the overlay effect from displaying in mobile, we must then cancel it altogether and write the entire thing is CSS. So far I havent been able to limit the engine effect to mobile view only, nor have I managed to write code in order to simulate that effect and insert the media screen switch

SS 7.1 https://www.tsiricos.gr/en/real-estate From image / Design / Overlay I picked the multiply effect to apply to the house picture ( #block-a64da1b3f8db225771f8 ) . Trying, but failing, to exclude with CSS this effect from Desktop view (or apply to mobile only, whatever comes easier). Also tried but failed to manually add the overlay form scratch so had to go through the SS engine. *IF* I get this right, the relevant code from chrome inspection is the following but I cant figure how to modify it OR the correct addresses. Help is appreciated .sqs-block-image .sqs-block-content { height: 100%; width: 100%; } .fe-block-a64da1b3f8db225771f8 .fluidImageOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 1; }

Thanks @tuanphan , worked like a charm. Any ideas how to address the additional question, by chance, on how to have different photo for different days with multiple events, rather than a constant one?

Added question, though I dont see this post getting any traction. At the moment, any day with more than one events has a specific photo (the green one). any ideas how to hake it different days with more than one events having different photos? Or, even better how to force each of the various events displaying their assigned image from events, each image being contained in their respective field? This would allow each "multievent" days having their own unique multievent image, rather than all having the same as is the case now with my code.

95% solved by the updated code Having solved endless problems , I am at my end and need help. The questions are strictly relevant to the event’s calendar on desktop view. I have (unexpectedly) solved my problems in phone view and I am not interested in beautifying the “events” page at all, as it is only there to populate the calendar and will not be accessible by visitors as I will plant a custom redirection. The points of interest are also marked in the picture https://www.tsiricos.gr/calendar pass: test 7.1, business plan, circle member 6. Any ideas how to tweak the opacity of the flyover? Any attempt ended in disaster, displaying in opacity what was supposed to stay hidden. i.e. all the flyouts simultaneously without hovering. On the contrary, hovering made the selected one solid again. SOLVED This code seems to affect the entire flyout, letters included, and not just the background color opacity as intended. .has-event ul.flyoutitemlist { background-color: white; } .has-event ul.flyoutitemlist { .flyoutitem--ongoing { opacity: 1 !important;} 4. I have used #block-yui_3_17_2_1_1695919443787_5989 div.flyoutitem-datetime { display:none !important; } to hide the time depicted (seen on 17-18 in black before removal). My intention was to hide ONLY THE TIME, not the date, treating it as one object. Any solutions? At the moment, as a less than elegant workaround, I have added the date only manually in both events/event settings/excerpt as depicted in 12-13. STILL WITH WORKAROUND, but working 5. Additionally, for those purposes, I was able to manipulate the text in the flyout BUT, no matter what I tried paddings seem unresponsive. Any ideas? SOLVED 7. Any ideas how to force all calendar cells to retain one size? Look 1-8-15 for example. I have the impression that the cells bloat because of the extra words in the calendar info. I have tweak the font size but even at 1px the problem remains, partially due to the large padding between title, manually added date, separator and next title which I haven’t managed to tweak. SOLVED 1. If more than one events coincide on the same day, the thumb image is gone and substituted with text from those events. Is there a way to force an image there, as is the case with forcing coloring ? e.g. a collage .png of the 2 events, hosted in squarespace gallery, somewhere In the site, pinterest or whatever you suggest. Flyout info should remain intact. This is by far the most crucial one. SOLVED 2. In Oct 10, 1st day the events coincide, how can I get rid of that "7p" bug? SOLVED 3. In 17-18, can I get rid of the trailing arrow thingamajingie from flyout title (depicted in 17-18)? SOLVED Some of those questions have been raised before but usually website information where not provided to allow response. Any and all help is more than welcome. https://www.tsiricos.gr/calendar pass: test 7.1, business plan, circle member Posting my entire code here for posterity, to help who ever needs it and in hope of getting some feedback // <--------!!!!!!!!!!!! EVENT CALENDAR CODE !!-------------> // #block-yui_3_17_2_1_1695919443787_5989 .yui3-squarespacecalendar { /* ---! MOBILE ONLY ---- */ /* mobile view - no picture highlight date calendar */ @media screen and (max-width:900px ) { /* Properly aligns calendar grid */ .compact-layout .marker { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); } /* Set shape and color round marker for single day events */ .compact-layout .background { display: block !important; background: lightblue !important; opacity: 1 !important; border-radius: 50%!important; } /* Set shape and color marker for days with multiple events */ .compact-layout .yui3-calendar-day.has-event { background: linear-gradient(-45deg, #22e, #aef, #d28,) !important; border-radius: 50%!important; } /* Set size to calendar title (month/year) */ .yui3-calendar-header-label { font-size: 35px !important; } /* Calendar DATE size */ .marker-daynum { font-size: 18px !important; /* font-weight: bold; */ } /* Flyout title controls (itenirary title) */ .flyoutitem a { text-transform: none !important; color: #C58567 !important; font-size: 11px !important; font-family: Helvetica !important; padding-top: 0px !important; padding-bottom: 0px !important; } /* Flyout itinerary event excerpt (manually added date) */ p.sqsrte-large { text-transform: none !important; color: #C58567 !important; font-size: 10px !important; font-family: Helvetica !important; padding-top: 0px !important; padding-bottom: 0px !important; } } /* ---! DESKTOP ONLY --- */ /* Set background image for days with multiple events */ @media only screen and (min-width: 881px) { .has-event .itemlist--iseventscollection { background-image: url(https://as2.ftcdn.net/v2/jpg/06/20/57/41/1000_F_620574115_lSw0Ro5pSrHAPDvqInaeEK7XIXnnNNf7.jpg); background-size: 100% 100% !important; background-repeat: no-repeat; background-position: center center; position: absolute !important; color: #fffff; text-align: center; z-index: -2; /* Place background at back */ } /* Insert div.marker (box for date) for single event dates */ .has-event:not(.has-event--multiday) .marker div { background-color: #ffffff; position: absolute; top: 1%; right: 1%; width: auto; height: auto; min-width: 1px; min-height: 1px; border-radius: 0%; /* Make it square */ padding: 22%; opacity: 1; } /* --! calendar info and flyout controls -- */ /* Set size to calendar title (month/year) */ .yui3-calendar-header-label { font-size: 35px !important; } /* Calendar DATE size */ .marker-daynum { font-size: auto !important; } /* font-weight: bold; NOT ACTIVE */ /* Flyout title controls (itenirary title) */ .flyoutitem a { text-transform: none; color: #C58567 !important; font-size: 11px !important; font-family: Helvetica !important; padding-top: 0px; padding-bottom: 0px; margin-top: 1px !important; margin-bottom: 1px !important;} .flyoutitemlist--hasmorecontent { padding-top: 5px !important; } /* Flyout itinerary event excerpt (manually added date) */ p.sqsrte-large { text-transform: none; color: #C58567 !important; font-size: 8px !important; font-family: Helvetica !important; padding-top: 0px; padding-bottom: 0px; margin-top: 0px !important; margin-bottom: 0px !important;} /* Adjust flyout title position*/ .flyoutitem {max-height: 8%; max-width: 100%; overflow-x: 80px !important; } /* Adjust overflow size of flyout date */ .flyoutitem p { line-height: 1px !important; } /* Adjust overflow size of flyout */ .flyoutitemlist--hasmorecontent {max-height: 100%; overflow-x: 80px; } /* Adjust background flyout color */ .has-event ul.flyoutitemlist { background-color: white; } /* Adjust background flyout color opacity - NOT WORKING, affects whole flyout inc leters*/ /* .has-event ul.flyoutitemlist { .flyoutitem--ongoing { opacity: 1 !important;} */ } /* COMMON PARAMETERS */ /* Calendar background color and padding */ .yui3-calendar-pane { padding-top: 0px; padding-bottom: 0px !important; filter: opacity(100%); border: 0px solid #fffff;} /* hide today border marker */ .yui3-calendar-day.today { border: none!important; /* font-weight: bold; */ } /* Today calendar date color bullet - NOT ACTIVE */ /* .today{ color: #ff3333 !important; } */ /* Change text color in all event day numbers */ td.has-event .marker div { color: black !important; } /* Hide in the date calendar the title (event), end time of multievents and time bug remnant, and in flyout time & arrow */ .item.item--ongoing, .item-time.item-time--12hr, .item-time.item-time--24hr, .item-title, .item-enddate, .flyoutitem-link-arrow, div.flyoutitem-datetime {display: none !important;} /* Set a fixed height for the cell to maintain its default size */ .itemlist--iseventscollection, { height: 100% !important; width: 100% !important; } } // <--------!!!!!!END EVENT CALENDAR CODE !!-------------> // I count on you @tuanphan 😛 . Your answers in the forum already addressed 7/10 of my problems along the way.