kiyary

Thank you!! :)!!

Hello @tuanphan, you seem to be the master of coding! I also noticed just today (maybe I messed It myself), my footer is divided in two columns in mobile, and I would like it to be one line like on desktop. Could you help me please? I try to use the codes you gave to everyone here, but nothing was happening so I deleted them. I tried to find the same id or block id, but I really have no idea what I am doing xD. the website is www.kiyary.com Thank you!

HII!! omg yes!!! This is what I needed for so long, thank you so much!! is there a way to change the font? this is already amazing. thank you!!

Hello Tuan Phan I mean, show the caption when Hoover, on the image, not under image, and some images will be a link to projects, so they don't need Lightbox. Hide the caption under image, just show it when hoover. Is this possible? Thank you!

oh dear, I do mean, show caption when hoover! my bad. Is there a way to do it? It used to work, you gave me the code, it just stopped working one day 😞 Thank you!

Hello @tuanphan sorry for the late reponse. Yes! it is added here https://www.kiyary.com/editorial-illustration for example. I used to have it working with a code you provided. But one day it just stopped working so I had to replace everything into the fluid engine, but I still left some pages with the text underneath the images in gallery mode, hoping I will be able to make it hover on top of the image again. like projects but in masonry grid. thank you so much. 🙂

Hello @tuanphan I added the code on advancec - code injection but then the code appears at the botton on the footer and it doesnt work. thank you anyways

Hi @tuanphan I am using again the same code you provided long ago, .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; pointer-events: none; /* enable click */ } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 2rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } but it has no effect 😞

Hi! Oh, my bad, I meant not the Lightbox (that works fine), but the captions on Hover with the mouse.

Hello Tuan! Yes, here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images. Thank you!!!!

Hello @tuanphan! thank you for getting back to me. I wish I could find answers without troubling anyone. I need to caption to appear on hover, like they do for my projects, but in the masonry grid So, instead of appearing like this, the captions appear underneath 😞, there is no hover or overlay with text. and I didnt change the code or anything. Do you know what happened? or how to fix this issue? thank you This is the code I have, which of course I do not understand , this is foreign language for me haha. <script> jQuery(document).ready(function($){ $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){ var text = $(this).find('img').attr("alt"); console.log(text); $(this).append('<div class="lightbox-caption">' + text + '</div>'); }) }) </script> <style> .lightbox-caption { color: grey; font-weight: light; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -35px; z-index: 9999; } .gallery-lightbox-wrapper:hover { cursor: pointer; } .gallery-lightbox-item[data-in='false'] .lightbox-caption { display: none!important; } .gallery-lightbox-item[data-active='true']:hover .lightbox-caption{ display: inline-block; } .gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{ display: inline-block; } .gallery-lightbox .lightbox-caption { display: block !important; } </style> <script>

Omgosh THANK YOU! @tuanphanYES! this is what i needed! You are a saviour!

Hello guys! I used to have the wonderful code provided by @tuanphan to display the caption on my galleries as a hoover, but since the last update, it is not working anymore and I do not know what to do 😞 . I have switched my homepage to the new "fluid engine" as a temporal solution, but I would still appreciate to have the hoover on all my masonry galleries on my web. This is the code I used to use: <script> jQuery(document).ready(function($){ $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){ var text = $(this).find('img').attr("alt"); console.log(text); $(this).append('<div class="lightbox-caption">' + text + '</div>'); }) }) </script> <style> .lightbox-caption { color: grey; font-weight: light; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -35px; z-index: 9999; } .gallery-lightbox-wrapper:hover { cursor: pointer; } .gallery-lightbox-item[data-in='false'] .lightbox-caption { display: none!important; } .gallery-lightbox-item[data-active='true']:hover .lightbox-caption{ display: inline-block; } .gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{ display: inline-block; } .gallery-lightbox .lightbox-caption { display: block !important; } </style> -- on a side note, another of my codes broke, the "selected page" used to highlight on a color and now went back to underline. could this be fixed? Thank you anyone who would help me!! My website is www.kiyary.com and page with a masonry gallery for example is this one: https://www.kiyary.com/editorial-illustration My previous homepage https://www.kiyary.com/home-masonry when the captions used to be on top of the images on a hoover. thank you all!!

Site URL: http://kiyary.com Hello guys! I need some help on figuring out how to activate or create a badge/label of "SOLD OUT" on products marked as such, as the only thing I get, it is a tiny text under the price. my site is www.kiyary.com First screen shot shows what I want. Right now I managed to have this badge design by using "product" block on a new page www.kiyary.com/shop ; but where I want it is in my real store page www.kiyary.com/store ; because when I use the product block it only can put up to 30 items and when you click on the product the breadcrumbs take you back to the original store. Thank you! 🙂 P.S. I have other questions regarding some hover text on gallery.

Hello @tuanphanI am back from the dead to this code, which worked wonderfully until now, I think square space updated something and now all the texts appear as a caption and not on hoover. Please could you help me? This is the code which was working but now it doesnt and I dont know why 😞 or how to fix it. <style> .lightbox-caption { color: grey; font-weight: light; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -35px; z-index: 9999; } .gallery-lightbox-wrapper:hover { cursor: pointer; } .gallery-lightbox-item[data-in='false'] .lightbox-caption { display: none!important; } .gallery-lightbox-item[data-active='true']:hover .lightbox-caption{ display: inline-block; } .gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{ display: inline-block; } .gallery-lightbox .lightbox-caption { display: block !important; } </style> thank you so much EDIT to add my site is kiyary.com thanks!

yes, you helped me 🙂 thank you!!

I tried both codes, Added @naomiokitacode ( bellow ) plus did the change @tuanphan mentioned to make it clickable, but the hover effects appears a second the moment I paste the code, then it disappears 😞 so when I save and refresh the website, the hover is not working anymore, don't know why. Could someone help me please? Thank you website www.kiyary.com

Hello Brandon, I tried the code you posted above, but I get double titles on the light box, and I would like to remove them from the main page. Currently I am leaving the titles on on the main page, because I want those to be Hoover text, but I have no idea how to do that. While I managed to put the text on transparent (no background), I have no idea why they are double. Could you help me out please? Thank you so much! website: www.Kiyary.com

Oh, extra question, I would love to have that icon for now, as I see it simpler to do, or (I don't know if it's possible) but I would love to have a "portfolio block" ( I don't know if it's called as such) bellow. What I mean is if there's a way to open (expand) the project selected above the portfolio. I will try to find an example of what I mean. Thank so much!!! 🙂 🙂 🙂 🙂

YES! that's exactly what I meant! I will try to attach an image now, I want to make something like this: It could direct me to "home" or to the "portfolio" page. I would love it if I could choose. I am also trying , to use the image gallery on the home page as the portfolio , since portfolio doesn't have masonry style; I wanted to try to use this code fromhttps://www.ghostplugins.com/steps/wj7238uh to add hover text to make it behave as the portfolio page, but it is not working, any ideas why? // Grid Gallery Zoom // @media all and (min-width:770px){ .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{ transform: scale(1.1); -webkit-filter: brightness(60%); filter: brightness(60%); } .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{ opacity: 1 } .sqs-block-gallery .sqs-gallery-design-grid .slide img{ -webkit-transition: all 1s ease-in-out !important; -moz-transition: all 1s ease-in-out !important; -o-transition: all 1s ease-in-out !important; transition: all 1s ease-in-out !important; } .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{ position: absolute; opacity: 0; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; -webkit-transition: all 1s ease-in-out !important; -moz-transition: all 1s ease-in-out !important; -o-transition: all 1s ease-in-out !important; transition: all 1s ease-in-out !important; z-index:99999999999; font-size: 50px !important; font-weight: 400 !important; color: #ffffff!important; padding: 10px; } } Thank you so much for helping!! 😄 you people are so awesome!

Site URL: http://kiyary.com/portfolio Hello guys! I've been googling this for days, and I cannot find the answer, so I decided to post the question. I would like to add an icon to go back to "all the projects" to my portfolio navigation in line to the previous/next, once I am in any project, just like the: <"name of the previous project" >icon here< "name of the next project"> I will attach an image of what I want. 🙂 I have seen it on other portfolios in Squarespace. If this is also possible to add in the blog, that would be amazing. Also, I would love to be able to change the size of the navigation arrows (< / >) which are huge. Another question, is, is it possible to use a masonry grid for the portfolio instead of the available? (if I need to post this question somewhere else, just let me know 🙂 ) Thank you so much! (I cannot upload an image, I get an error (Error code: -200) 😞 )