Oz_Soma

Hi Claudio, Tuanphan resolved this for me in this thread FYI

I think maybe it's working now. Something weird ws hapenning but I got a few people to try it and it seems to work. Thanks so much! Yes can I position it on desktop? It's not in line with the other text and icons, it needs to move up a bit.

Thanks @tuanphan that worked! Doesn't work on mobile though unfortunately. Also is there a way to control the position? Now it's a bit lower than it was, maybe it just needs centralising so it moves up a bit? Thanks for you help!

Oh yes, sorry, it should be right now. Thanks!

Hi @tuanphan ok, I have added it into my footer! https://www.somastudios.co/ Thanks

Site URL: https://www.somastudios.co/ Hi, I want to replace the animated gif logo I have in my header for a .json Lottie animation. I have got the .json animation to work in a code block using this tutorial but want to put the animation as a replacement for my logo in the header. Can anyone help me with the code for this please? Thanks Oz

If anyone can tell me how to put a Lottie animation in the header instead of the header logo that would be great, thanks! @tuanphan

Thanks for the reply SquareRefresh. Do you have any information about how to do this in JS? I think I will upgrade my account and give it a try if it’s not too difficult. Thanks Oz

Site URL: https://www.somastudios.co/ Hi, I am trying to use Lottie files on my Squarespace. Do I need to upgrade my account to add a code injection to do this or can I do it with a standard account? If possible, how can I add a Lottie animation (.json or otherwise) to my header logo animation? Thanks!

Thanks @tuanphan! It still popped off weirdly when the cursor moves off instead of fading so I removed that animation so it now doesn't fade out, but that's fine. Do you have code so I can move the text a tiny bit to the right (not right aligned), maybe 20px to the right? Also can I close the gaps a bit between the images? Thanks again for all your help!

Thanks, that's so helpful. If it's not too much there are a couple of tiny things? As the cursor moves off the image the caption pops down which looks a bit strange... is there a way to fix this? Also can I change the caption text color? Also move it a bit to the right? And is there a way to manually change the gaps between the images so I can make them a bit smaller? Thanks again for all your help! Oz

Also (sorry) my links no longer work when I use this code. I want to be able to click on an image and take you to another page of my site. Thank you

Thanks @tuanphan! Legend. Is it possible to make the green color have transparency over the image too? And also change the color of the text? And also have the hover fade up too? Thanks !

Site URL: https://www.somastudios.co/home-1 Hi, I am trying to create rollovers for my images which look like how they behave in my Gallery page. In the Gallery you rollover and a transparent green fill goes on top with centered captions. Is there any way to do this with CSS on normal images like at the bottom of the added link on a non-Gallery page? Thnks Oz

Hi @tuanphan I would love something similar to what you have done above. I have a Gallery and on the thumbnails the hover gives a transparent color and centrally aligned title caption. I would like to replicate this exactly on normal images elsewhere on my site. So when you rollover the image it fills in with a transparent color and has the same type style, then links to another page when clicked. Can you help with me this please? Thanks!

Hi, here's my CSS (I'm sure very messy as I am a beginner!) .header-nav *, nav.header-menu-nav-list * { font-family: 'halisa'; } .header-nav-item--active a { background-image: none; } .header-nav-wrapper a { background-image: none !important; } <style> #collection-61aea4707f67916f746be687 .header-title-logo a { content: url("https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/61d26232a1725e72615bed4e/1641177651022/Soma-Logo-Anim_Grey.gif"); } </style> ///.header { /// background: transparent!important; ///} @media screen and (min-width:768px) { .header-announcement-bar-wrapper { padding-left: 10vw !important; padding-right: 5vw !important; } } @font-face { font-family: 'halisa'; src: url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/619588e0523c051cdf3f897e/1637189856813/Halisa-WideHeavy.otf), url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/619588abdb29ba04a1b69ea1/1637189803626/halisa-wideheavy-webfont.woff), url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/619588c27e8fda04319b9cac/1637189826899/halisa-wideheavy-webfont.woff2);} h1 { font-family: 'halisa';} h2 { font-family: 'halisa';} h3 { font-family: 'halisa';} h4 { font-family: 'halisa';} @font-face { font-family: 'scto'; src: url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/61959ba47859f12c70aaa553/1637194661318/Scto+Grotesk+A+Regular.otf), url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/61959bac579b1b5951253694/1637194668697/Scto+Grotesk+A+Regular.woff), url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/61959bb1e3e2dd1e56e70e41/1637194673915/Scto+Grotesk+A+Regular.woff2);} .sqsrte-small { font-family: 'scto';} .sqsrte-large { font-family: 'scto';} @font-face { font-family: 'tiempos'; src: url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/61a8688113634b669d4d440f/1638426754256/TiemposText-Regular.otf), url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/61a86887222ebe3388963345/1638426759723/TiemposText-Regular.woff), url(https://static1.squarespace.com/static/5ed74460ff76d55e5f153ed9/t/61a8688a427a424e5f63298e/1638426762592/TiemposText-Regular.woff2);} p { font-family: 'tiempos';} h3.portfolio-title { font-size: 70px!important; } h1, h2, h3, h4 { font-family: 'halisa' !important; }

Hi @bangank36 I'm trying to do this too but this code didn't work for me. I changed the collection to the page I want and then added the new logo in custom files. It seems to have a problem with the Style at the beginning and end and says there's a syntax error at line 1. Do I need to upgrade my Squarespace to be able to do this? It would be great to be able to have different logos in the header for different pages so the colours don't clash. Thanks in advance! Oz Smith