atmos

Thanks for sharing and helping with this issue. Glad you found a way to solve it.

That image has now updated thank you. The majority of images look great with the box at the bottom. There are a few which still don’t quite look right. The edges of the caption box don’t line up correctly on some images when toggling thumbnails on and off. It’s only slightly off but still noticeable. Images and video attached for reference Direct links to these images: https://www.atmos.art/work/photography/bw/abstract?gallery=66fc1730f0bdb5792192462b&item=d82a10fa-6d36-4c1a-a176-b292895fdd09 https://www.atmos.art/work/photography/bw/abstract?gallery=66fc1730f0bdb5792192462b&item=84aed700-2c02-4759-919a-d0a3f6450898 https://www.atmos.art/work/photography/colour/abstract?gallery=66fad6e82d50682b18ac7d49&item=0a3e284e-82c6-4edf-b48f-2df11354762f Screen Recording 2024-11-26 at 10.42.35.mov

Hi, I am still having the same issue with the image mentioned before. The update doesn't appear to have changed anything.

Ok great. I’m happy for you to do that. Overall the update works perfectly but it seems to not work on a certain image and wondered if you could take a look? Video attached for reference. Toggle Issue.mov

Do you mean sharing my website URL on your website as part of a case study? If so, sure that would be great. To update the plugin to fix the toggle issue, do I just need to add the install code again and click update?

This looks great. Thank you for taking the time to fix the issue. You set the bar high for great customer service!

Site URL: https://www.atmos.art/work/art/mediums/drawings Hi, I am experiencing an issue with the Lightbox Studio plugin from BeyondSpace and wondered if someone can help. The Squarespace gallery lightbox captions shrink when the thumbnails are toggled and require the carousel to shift in order to resize correctly. I have attached a short video to show the issue. Atmos - Plugin Issue with 'toggle thumbnails'.mov

Hi Felix, Thanks for commenting. I looked into the plugin and I’m not looking for a subscription based model as this is quite costly for small businesses like myself. I appreciate your input though.

Bump

Site URL: https://www.atmos.art Hi, I am wondering how I could replicate the search feature dropdown that is found on this website? https://adamcrins.art/ I have attached some screenshots to help. I have managed to add these lines of code which has created a search icon but currently it links to the search page on my website which is not what I am looking for. Code Injection - Footer: <!-- Search Icon In Header Code from Will-Myers.com--> <script> (function(){ // Icon from Orion Icon https://orioniconlibrary.com/ let searchIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Search</title> <desc>Search This Website</desc> <path data-name="layer2" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M39.049 39.049L56 56" stroke-linejoin="round" stroke-linecap="round"></path> <circle data-name="layer1" cx="27" cy="27" r="17" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></circle> </svg>`; let searchEl = `<div class="search-icon header-actions-action--social header-nav-wrapper"> <a class="icon" href="/search" onclick="handleSearchClick(event)">${searchIcon}</a> </div>`; let mobileSearchEl = `<div class="search-icon header-menu-actions-action header-menu-actions-action--social"> <a class="icon" href="/search" onclick="handleSearchClick(event)">${searchIcon}</a> </div>`; // Add click handler to window scope window.handleSearchClick = function(e) { e.preventDefault(); window.location.href = '/search'; } // Insert desktop search icon let referenceEl = document.querySelector(".header-actions"); if (referenceEl) { referenceEl.insertAdjacentHTML("afterbegin", searchEl); } // Insert mobile search icon let mobileReferenceEl = document.querySelector('[data-folder="root"] .header-menu-actions'); if (mobileReferenceEl) { mobileReferenceEl.insertAdjacentHTML("afterbegin", mobileSearchEl); } }()); </script> Custom CSS: /** * Search Icon in Header Styles * From Will-Myers.com **/ //Search Page Styles .sqs-search-page.sqs-search-page-content::before { content: "Search"; display: inline-block; margin-bottom: 34px; font-size: ~"calc((3 - 1) * 1.2vh + 1rem)"; } .search-icon * { stroke: #FFFFFF; stroke-width: 4px; } // Desktop Search Icon .showOnDesktop { display: flex; align-items: center; } // Mobile Search Icon [data-folder="root"] .search-icon .icon { width: 28px; height: 28px; } Hope you can help. Thanks

Thanks for the code. I had to re-add the style code to keep the icon centre but that seems to have worked and changed the colour. Thanks!

Hi, I am trying to change the colour of an SVG icon which was uploaded as a file to my website. The icon is a star and I want to make it gold (such as #d4af37). It seems that you can only do this by using a filter code but I don’t know how to make it look like the colour I need. How can I change the SVG icon(s) colour to #d4af37 (or very close to this)? Here is the code for the code block <a class="star-icon"> <img src="/s/Rounded-Star-SVG-01.svg" height="40" alt="SVG file icon"> </img> </a> <style> .star-icon { display: flex !important; align-items: left !important; justify-content: left !important; } </style> Here is the accompanying CSS for the current setting .star-icon { filter: invert(.6) sepia(1); } Here is a screenshot of the icons with the current settings Thank you for reading. Hope you can help.

Bump

Hi all, I am wondering if anyone knows how to make the transparent areas inside this SVG icon trigger my hover effect? The code is used in a standard code block on this page at the moment: https://www.atmos.art/work/art/mediums/drawings I want to apply it to all pages eventually. I want the entire icon (border, arrow, and transparent area inside the border to trigger an effect when the cursor hovers over it. The area outside of the white border should not trigger the hover effect. I have provided a screenshot of my image and the current code for it as well. Any help would be amazing. Thank you! <a href="#" class="icon-link"> <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="#FFFFFF" class="bi bi-arrow-up-square" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm8.5 9.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/> </svg> </a> <style> .icon-link { display: flex !important; align-items: center !important; justify-content: center !important; } </style> I have since added the following CSS which is used for my anchor link. a.icon-link { width: 70px; height: 70px; } div#block-a529e9c3e5286fac9f1e { display: flex; align-items: center; }

Hi, I have decided on a different icon and have an issue with this code. I changed the margin and it looks centred in the editor but not when viewing the live website. URL: https://www.atmos.art/work/art/mediums/drawings I used the code below: <a href="#" class="icon-link"> <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="#FFFFFF" class="bi bi-arrow-up-square" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm8.5 9.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/> </svg> </a> <style> .icon-link { display: block; /* Use block to allow margin to work */ margin: -10px 0; /* Add top and bottom margins (adjust as needed) */ text-align: center; /* Center the text if needed */ } </style> Do you also know if it is possible to make the space inside of the border work for triggering the hover effect and clickable link? I imagine this is not possible as it is related to the shape of the SVG icon. I’d like the whole square to act as the active area without the viewbox triggering the effects. The only way I have been able to do this so far is an image file version but the problem is that the area outside of the icon triggers the effects. Hope that made some sense. I have uploaded two screenshots in case you are open to helping with this too.