Jump to content

kiyary

Member
  • Posts

    33
  • Joined

  • Last visited

Everything posted by kiyary

  1. 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!
  2. 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!!
  3. 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!
  4. 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!
  5. 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. πŸ™‚
  6. 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
  7. 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 😞
  8. Hi! Oh, my bad, I meant not the Lightbox (that works fine), but the captions on Hover with the mouse.
  9. Hello Tuan! Yes, here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images. Thank you!!!!
  10. 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>
  11. Omgosh THANK YOU! @tuanphanYES! this is what i needed! You are a saviour!
  12. 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!!
  13. 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.
  14. 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!
  15. Omg i love you!!! Thank you so much! That’s what i have been struggling with for so long lol. Thank you!!
  16. 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
  17. Oh, thank you. I will see and try that too but I just wonder if what I asked was possible, as making another page just to add a summary blog, what happens to the navigation? and functionality of a blog? the summary will work?
  18. I use square space 7.1 , my website is www.kiyary.com/blog I just want to move the "Latest posts" to the side, like the image you shared. It has links on the side column. Just like Moushi, who also has 7.1 from what I read. Is this possible? How? Thank you!
  19. 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
  20. Hello, still need help. I want that Hoover effect, but it doesn’t work, I don’t know why. https://www.ghostplugins.com/steps/wj7238uh I pasted this code but doesn’t work. thank you.
  21. Hello Tuanphan, Sorry to jump on this convo, but I am looking to achieve a similar looking blog. my blog, which I am building now, https://www.kiyary.com/blog ; I just would like to add the "Latests posts" on a column on the right, and keep the blogs on the left, but when I edit the design of the blog, I cannot move it to the side. Is it my computer? or this is not possible and I need a code? just Like Moushi has on the screenshot you shared here, bellow her profile. I want that column. thank you so much!!!
  22. I removed this code: // Gallery Caption Text // .gallery-section .gallery-caption p { text-align: center; font-size: 18px; font-weight: 500; color: #ffffff; text-transform: normal; line-height: 1.2em; font-family: inherit; } .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.2); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; pointer-events: none; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1rem !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; } Which was affecting the captions, now, they show. πŸ™‚ thank you
  23. Hello I did that, the captions are enabled, but they are not showing I do not know why, I will try again, Thank you
Γ—
Γ—
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.