Customisation Wish List

Hello All,

I am currently building my website on Squarespace (moving from Wix). I have tried to customise my site using css code found in the forums with mixed success so I am asking directly if someone can help me to do the following:

1. I have managed to get the site title and logo to display in the header but cannot get them in-line, with logo to left of title.

2. To hide the image captions in the gallery but show them centred on, and under the image in the light box.

3. To remove horizontal scroll from the lightbox so that the viewer must click in and out of one image at a time.

I am on the Personal Plan.

Thanks in advance!

What is site url? We can check easier

Hi @tuanphan , it is https://violin-bluebird-wtwa.squarespace.com/

On 11/20/2023 at 8:50 PM, omurchu said:

Hi @tuanphan , it is https://violin-bluebird-wtwa.squarespace.com/

#1. Make it inline like this?

#2. You can use code in this comment

https://forum.squarespace.com/topic/164356-lightbox-captions-only/?do=findComment&comment=646704

#1 More or less yes. On the same horizontal centre line with a bit more space between.

#2 Unfortunately I don't have access to Code Injection with the Personal Plan, do you have a Custom CSS solution?

On 11/23/2023 at 4:09 AM, omurchu said:

#1 More or less yes. On the same horizontal centre line with a bit more space between.

#2 Unfortunately I don't have access to Code Injection with the Personal Plan, do you have a Custom CSS solution?

#1. Use this CSS code

.header-title-logo a {
    display: flex !important;
    align-items: center;
}

#2. If you don't mind manually inserting captions for each photo with code, each caption is a code, I will give the code

Thank you @tuanphan,

#1 Works great.

#2 I will give it a try.

With Selected Page: https://violin-bluebird-wtwa.squarespace.com/selected-images

to add caption with CSS, add this code to Website Tools (under Not Linked) > Custom CSS

/* Selected page */
body#collection-654552924507a264bb7101c2 {
	[data-slide-url]:after {
    display: block;
    color: black;
    z-index: 99999;
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
[data-slide-url="ka7yigpadnsde8p2reu0kwq137dwzr"]:after {
    content: "Feral Goats on Slievecarran";
}
[data-slide-url="rbzzrph9y7ytkop3cfbeeia81shyuf"]:after {
    content: "Bouleevin-Sunrise";
}
[data-slide-url="w70lm6szn1rvswsz5sqrn6saws657s"]:after {
    content: "Doonties-Gateway-Dingle-Peninsula.jpg";
}
}

If you feel it okay, I will give quick guide to find data-slide-url

Thank you again. I probably won't add it to every image (it would take too much time) but it would be useful to know how to find the url.