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!