@Jannis
Hi Jannis,
in November 2023 I bought your Iconic Gallery bric.
I can’t find a way to fine tune it.
I like to change the font and color for captions, change background and arrow color etc.
I there a way?
1 Like
Yes, you can. But not with a tickbox solution 
You will need to replace the embedded icon with your own base64 SVG icon. A few lines of styling do the job.
1 Like
I think we need some more tickboxes in 2024 ! 
will save so much trouble !
I believe tickboxes will be banned this year. 
Oh…they were allowed then ? …never seen one !
1 Like
I think a bric that costs now €49,- should have tons of tickboxes.
Basta.
Hey, @Bootsie. i purchased this awesome bric as well and I can’t recall the options you demand to see are promoted by the developer as being part of this Bric. I could be wrong though.
1 Like
No no, you’re right.
But all these options I mentioned should be a part of this bric.
@Jannis
are you planning to implement these features?
If not, can you please tell me how to:
- change background color of the gallery
- change type and color of arrows
- change font , color and position of captions.
I really would appreciate any help from you.
Which lightbox are you using?
I tried baguette and photoswipe
Which one do you want to use…
Actually both for different pages.
But let’s say baguette.
Here you go for the arrows. Just replace the base64 with your preferred icon.
.baguetteBox-button#next-button svg, .baguetteBox-button#previous-button svg {
display: none;
}
.baguetteBox-button#next-button:before {
content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktYXJyb3ctcmlnaHQtY2lyY2xlIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEgOGE3IDcgMCAxIDAgMTQgMEE3IDcgMCAwIDAgMSA4bTE1IDBBOCA4IDAgMSAxIDAgOGE4IDggMCAwIDEgMTYgME00LjUgNy41YS41LjUgMCAwIDAgMCAxaDUuNzkzbC0yLjE0NyAyLjE0NmEuNS41IDAgMCAwIC43MDguNzA4bDMtM2EuNS41IDAgMCAwIDAtLjcwOGwtMy0zYS41LjUgMCAxIDAtLjcwOC43MDhMMTAuMjkzIDcuNXoiLz4KPC9zdmc+');
display: block;
width: 50px;
height: 50px;
}
.baguetteBox-button#previous-button:before {
content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktYXJyb3ctbGVmdC1jaXJjbGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMSA4YTcgNyAwIDEgMCAxNCAwQTcgNyAwIDAgMCAxIDhtMTUgMEE4IDggMCAxIDEgMCA4YTggOCAwIDAgMSAxNiAwbS00LjUtLjVhLjUuNSAwIDAgMSAwIDFINS43MDdsMi4xNDcgMi4xNDZhLjUuNSAwIDAgMS0uNzA4LjcwOGwtMy0zYS41LjUgMCAwIDEgMC0uNzA4bDMtM2EuNS41IDAgMSAxIC43MDguNzA4TDUuNzA3IDcuNXoiLz4KPC9zdmc+');
display: block;
width: 50px;
height: 50px;
}
1 Like
OK. And how?
Thanks anyway Jerry.
I don’t get it.
Choose any SVG icon you wish to replace the standard arrows with. The Bootstrap icon collection may be a good start.
Download your icons and convert them into a Base64 string here:
Replace your actual string and add to the CSS editor in Blocs
Thats all.
1 Like
OK.
I tried various things with no luck.
I got this from Bootstrap Icons:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
</svg>
Which line in your code should I replace with mine?
You didn’t download the SVG, you copied the HTML
Step 1:
Download the SVG
Step 2:
Style the SVG to your liking with your preferred editor and export as a SVG
Color and size of the SVG are set within the Base64 string and can’t be modified afterwards!
Step 3:
Upload the image to codebeautify to get the Base64 string:
Step 4:
Copy/paste the srting inside the CSS, add it to the CSS editor in Blocs and upload to your server:
3 Likes
WOW.
All that for a little stylish arrow.
Anyway I’ll try it.
Could take a couple of weeks before I’ll be successful. 
When using Baguette, yes