Custom arrows on Portfolio navigation and on Lightbox.

Hi — I would appreciate if someone could shed some light on this. I am trying to add custom arrows to the bottom navigation of a Portfolio page as well as to the Lightbox, but so far my attempts are failing. Any help would be appreciated. So far I have tried targeting .caret-left-icon--small and .caret-right-icon--small but the background url sometimes work sometimes it does as it seems to have some sort of conflict with the svg... 

.caret-left-icon--small {
   width: 30px!important;
    background: url("/s/left_arrow.png")!important;
    background-size: 25px !important;
    background-repeat: no-repeat !important;
    background-position-x: left !important;
    background-position-y: center !important;
}

.caret-right-icon--small{
      width: 30px!important;
    background: url(“/s/right_arrow.png")!important;
    background-size: 25px !important;
    background-repeat: no-repeat !important;
    background-position-x: right !important;
    background-position-y: center !important;

}
 

@studiofilo Hi! Can you share your site URL? 

Hi Lesum,. at the moment is in Private mode I am afraid.

@studiofilo You can publish your site with a site-wide password. See for reference: Site-wide passwords

https://cranberry-drum-m74m.squarespace.com/

Pass: decor2024

Hi again Lesum and folks — now the arrows show in Safari but not in Chrome nor in Brave. I don´t really know what´s wrong here. Any help would be really appreciated:

 

#itemPagination a.item-pagination-link .icon svg {
    display: none;
}

/* Gallery Next Arrow Icon */
#itemPagination a.item-pagination-link.item-pagination-link--prev .icon::before {
    content: "";
    background-image: url('https://cranberry-drum-m74m.squarespace.com/s/left_arrow.png')!important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* Gallery Previous Arrow Icon */
#itemPagination a.item-pagination-link.item-pagination-link--next .icon::before {
    content: "";
    background-image: url('https://cranberry-drum-m74m.squarespace.com/s/right_arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
     width: 100%;
    height: 100%;
}

/* Portfolio Gallery Lightbox Arrow Icon */
.gallery-lightbox-control .gallery-lightbox-control-btn-icon svg {
    display: none;
}

/* Lightbox Next Arrow Icon */
.gallery-lightbox-control[data-next][data-test="gallery-lightbox-control-next"] .gallery-lightbox-control-btn-icon {
    background: url('https://cranberry-drum-m74m.squarespace.com/s/right_arrow.png') !important;
     background-repeat: no-repeat!important;
    background-position: center center;
    background-size: 30px 22px!important;
    width: 37px;
    height: 52px;
    display: inline-block;
    left: -20px;
}

/* Lightbox Previous Arrow Icon */
.gallery-lightbox-control[data-previous][data-test="gallery-lightbox-control-previous"] .gallery-lightbox-control-btn-icon {
    background: url('https://cranberry-drum-m74m.squarespace.com/s/left_arrow.png')!important;
    background-repeat: no-repeat!important;
    background-position: center center;
    background-size: 30px 22px!important;
    width: 37px;
    height: 52px;
    display: inline-block;
}

.item-pagination-link .item-pagination-icon {
    width: 37px;
    height: 22px;
    padding-right: 10px;
    padding-left: 10px;
}

On 6/24/2024 at 12:49 AM, studiofilo said:

Hi again Lesum and folks — now the arrows show in Safari but not in Chrome nor in Brave. I don´t really know what´s wrong here. Any help would be really appreciated:

 

#itemPagination a.item-pagination-link .icon svg {
    display: none;
}

/* Gallery Next Arrow Icon */
#itemPagination a.item-pagination-link.item-pagination-link--prev .icon::before {
    content: "";
    background-image: url('https://cranberry-drum-m74m.squarespace.com/s/left_arrow.png')!important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* Gallery Previous Arrow Icon */
#itemPagination a.item-pagination-link.item-pagination-link--next .icon::before {
    content: "";
    background-image: url('https://cranberry-drum-m74m.squarespace.com/s/right_arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
     width: 100%;
    height: 100%;
}

/* Portfolio Gallery Lightbox Arrow Icon */
.gallery-lightbox-control .gallery-lightbox-control-btn-icon svg {
    display: none;
}

/* Lightbox Next Arrow Icon */
.gallery-lightbox-control[data-next][data-test="gallery-lightbox-control-next"] .gallery-lightbox-control-btn-icon {
    background: url('https://cranberry-drum-m74m.squarespace.com/s/right_arrow.png') !important;
     background-repeat: no-repeat!important;
    background-position: center center;
    background-size: 30px 22px!important;
    width: 37px;
    height: 52px;
    display: inline-block;
    left: -20px;
}

/* Lightbox Previous Arrow Icon */
.gallery-lightbox-control[data-previous][data-test="gallery-lightbox-control-previous"] .gallery-lightbox-control-btn-icon {
    background: url('https://cranberry-drum-m74m.squarespace.com/s/left_arrow.png')!important;
    background-repeat: no-repeat!important;
    background-position: center center;
    background-size: 30px 22px!important;
    width: 37px;
    height: 52px;
    display: inline-block;
}

.item-pagination-link .item-pagination-icon {
    width: 37px;
    height: 22px;
    padding-right: 10px;
    padding-left: 10px;
}

I see icon url show blank page, not real file, you try checking and upload new files

That did it Tuanphan! many thanks!