Jump to content

kiyary

Member
  • Posts

    33
  • Joined

  • Last visited

Posts 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. On 3/24/2023 at 11:21 AM, tuanphan said:

    Add to Design > Custom CSS
     

    /* Masonry hover */
    figure.gallery-masonry-item {
        position: relative;
    }
    .gallery-caption {
        position: static;
    }
    /* title */
    .gallery-section .gallery-caption p {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        padding: 7%;
        transition: opacity ease 200ms !important;
        opacity: 0 !important;
    pointer-events: none;
    }
    .gallery-masonry-item:hover .gallery-caption-content {
        opacity: 1 !important;
    }
    /* overlay */
    .gallery-masonry-item-wrapper a:after {
        background: rgba(255,255,255,0.5); /* overlay color */
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity ease 200ms !important;
    }
    .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
        opacity: 0.75;
    }
    /* remove gap */
    figcaption {
        padding: 0 !important;
    }

    image.png.50a172c825956a9137494a1589050c23.png

    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. On 2/15/2023 at 4:46 AM, tuanphan said:

    You mean show caption in lightbox, or show caption when hover image on grid?

    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!

  4. On 8/27/2022 at 10:38 AM, tuanphan said:

    Can you enable Gallery Caption & add some text? Currently It doesn't show anything

    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. 🙂

  5. On 8/26/2022 at 11:43 AM, tuanphan said:

    If you look at the code, you will see "grid". This code for Gallery Grid. Your page uses Gallery Masonry.

    Use this new code

    /* Gallery Section Masonry Hover */
    figure.gallery-masonry-item {
        position: relative;
    }
    .gallery-caption {
        position: static;
    }
    /* title */
    figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        padding: 7%;
        transition: opacity ease 200ms !important;
        opacity: 0 !important;
    pointer-events: none;
        color: white;
    }
    .gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
        opacity: 1 !important;
    }
    /* overlay */
    .gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after {
        background: rgba(0,0,0,0.5); /* overlay color */
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity ease 200ms !important;
        pointer-events: none;
    }
    .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
        opacity: 0.75;
    }
    /* remove gap */
    figcaption {
        padding: 0 !important;
    }

     

    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

  6. On 8/23/2022 at 4:43 AM, tuanphan said:

    Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here

     

    1 hour ago, kiyary said:

    Hello Tuan! Yes,

    here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images.

    Thank you!!!!

    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 😞

  7. 7 hours ago, tuanphan said:

    I see it looks fine here https://www.kiyary.com/portraits

    Caption appear in lightbox

    caption disappear in grid view

    What is your problem?

    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

    image.thumb.png.63c1e0f6ba77f034aeb505ea708c657d.pngSo, 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

    image.thumb.png.dce8c755022b0ce834d908364566a1bd.png

     

    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>

  8. 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!! 

  9. 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. 

    Screen Shot 2022-08-18 at 20.32.45.png

  10. 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!

  11. On 4/19/2021 at 12:18 PM, tuanphan said:

    Edit this code

    .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;
    }

    to this

    .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 */
    }

     

    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

     

    On 4/17/2021 at 8:49 PM, naomiokita said:

    I have the same exact question! My url is https://naomiokita.com/

    So how do I add a custom css for a clickable image with captions on hover to the coding, I already have 

    .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;
    }
    .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;
    }

     

  12. 16 hours ago, derricksrandomviews said:

    I suggest you use summary blocks to display all blog posts and put the blog page in the unlinked section of your site. Summaries are very flexible, the blocks can be moved side by side, you can hide posts by using the featured only setting and filter by cats or tags. I do that and i can group my archive block by subject. I actually have two blog pages, one is composed of posts using summary blocks that pull content from the main blog page using categories and the featured

    https://myrandomviews.com/storyarchive

    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? 

  13. On 11/2/2019 at 3:15 PM, brandon said:

    Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post.

    If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question?

    If it's a different sort of section you've added (that is, not a gallery section of some kind), what section was it?

    image.png.801cd4f9a3a7fe730b35c332e36fc6cf.png

    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 

  14. On 7/27/2021 at 12:23 PM, tuanphan said:

    Yes, if you need to fix any problems, just comment, we will support

    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!!! 

    Screen Shot 2021-10-12 at 20.33.19.png

  15. On 10/11/2021 at 3:01 AM, tuanphan said:

    Caption is description

    Click Pencil to edit Gallery Section >> Click on Enable Caption to make it visible under image, then I can check code easier

    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

×
×
  • 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.