Possible to add another line of text in the Portfolio Grid Overlay?

Site URL: http://caper-ukulele-8an9.squarespace.com

Is it possible to add another line of copy when you hover over a thumbnail? I'd like the first line to be the name of the client and the second line to be the project name. Ideally it would be another font as well. Attaching image of what I would like it to look like. 

Thanks for the help!

Yes. Possible. What is password?

awesome, thanks @tuanphan

password: hello

On 1/2/2022 at 3:41 AM, millersota said:

awesome, thanks @tuanphan

password: hello

Add to Design > Custom CSS

/* Home portfolio subtext */
body.homepage {
a.grid-item h3:before {
    display: block;
    font-size: 20px;
}
a.grid-item[href="/work/desolation-2"] h3:before {
    content: "Audi";
}
a.grid-item[href="/work/desolation-2-6ydr3"] h3:before {
    content: "duel";
}
a.grid-item[href="/work/desolation-2-nhjk8"] h3:before {
    content: "Reebok";
}
}

Do similar for other items

@tuanphan thank you, works perfectly!

If I wanted to make the top line a thinner font (Alternate Gothic Condensed ATF) is that a simple enough change?

On 1/5/2022 at 9:48 AM, millersota said:

@tuanphan thank you, works perfectly!

If I wanted to make the top line a thinner font (Alternate Gothic Condensed ATF) is that a simple enough change?

Possible. This is custom font or Squarespace font?

@tuanphan  yes, Alternate Gothic Condensed ATF is a Squarespace font.

One other thing I've noticed or am curious about. The URL slugs I can't custom name them to match the project name without undoing the code you sent, is that adjustable? For instance on this project I'd love for the URL to be /work/duel

Thanks again!

14 hours ago, millersota said:

@tuanphan  yes, Alternate Gothic Condensed ATF is a Squarespace font.

One other thing I've noticed or am curious about. The URL slugs I can't custom name them to match the project name without undoing the code you sent, is that adjustable? For instance on this project I'd love for the URL to be /work/duel

Thanks again!

Change url slug, then update above code. If you can't update, just change url slug then let me know, I will give new code.

Can you share link to a page where you use this font: Alternate Gothic Condensed ATF

(Just want to check font name code, I don't remember exact font name code of this font)

@tuanphan I updated the URL Slug for the first 2 projects. Looks like I'll need new code. Wasn't sure if you wanted me to do all of them yet.

For the font, the only place I'll be using Alternate Gothic Condensed ATF is on the portfolio grid on the top line. I circled here as an example.

Use this code

/* Home portfolio subtext */
body.homepage {
a.grid-item h3:before {
    display: block;
    font-size: 20px;
	font-family: alternate-gothic-condensed-atf;
}
a.grid-item[href="/work/desolation"] h3:before {
    content: "Audi";
}
a.grid-item[href="/work/duel"] h3:before {
    content: "duel";
}
}

You can add a new page (you can delete it later), set font on that page, then share url, I can check font name.

@tuanphanfor some reason that font wasn't actually loading as the correct font. Not sure why it doesn't register as it does when I try it in the design mode, looks different here. I can live without it. 

URL slugs look great for those first two, how do I apply that to the rest of them?

Thanks!

On 1/18/2022 at 5:42 AM, millersota said:

@tuanphanfor some reason that font wasn't actually loading as the correct font. Not sure why it doesn't register as it does when I try it in the design mode, looks different here. I can live without it. 

URL slugs look great for those first two, how do I apply that to the rest of them?

Thanks!

In the code, you will see this line, it is url slug, you can repeat the code, with coressponding url slug. You can try. if you still can't solve, let me know, we will give all code

/work/desolation

@tuanphan you were so helpful a while back that I thought I'd reach out again. I just added 2 new projects for Opendoor but can't figure out how to get the smaller title to appear like I did before. Any thoughts?

Attaching 2 examples, the Reebok one is correct, the Opendoor one is missing the smaller title.

Thank you!

Which code did you use for Opendoor Brand item? We can check easier

I made a duplicate of another project instead of doing code. Maybe that's my problem.

Okay. If you need help, just let me know.

Would love some help with the two Opendoor projects I added. Is that a matter of adding new code for those?

thank you @tuanphan!!

@tuanphan the spacing on the web version of my site is perfect. On mobile it looks quite different and not great. Is there a way to have different spacing between lines on mobile than web? 

Thanks for the help!

On 6/12/2023 at 1:38 AM, millersota said:

@tuanphan the spacing on the web version of my site is perfect. On mobile it looks quite different and not great. Is there a way to have different spacing between lines on mobile than web? 

Thanks for the help!

 

Can you share link to this page? We can give adjust code for mobile

Hi Tuan, 

Are you able to help add a second line under the project titles?
I would like a different font and size but dont know how to apply the custom CSS. 
https://plum-marigold-3pnz.squarespace.com/config/pages/649e1c7b6a5c1009cc011615

3 hours ago, paynter said:

Hi Tuan, 

Are you able to help add a second line under the project titles?
I would like a different font and size but dont know how to apply the custom CSS. 
https://plum-marigold-3pnz.squarespace.com/config/pages/649e1c7b6a5c1009cc011615

I answered here

hey,

may anyone help me with the following very similar topic as discussed above? i don't manage to make the css code work.

i would like to show on my portfolio thumbnails two lines of text when hovering over.

first line should show the project title, second line should display the h2 headline on the project page. is that possible? to make it clear, i attached to screenshots.

my intention is to give my clients for each of my films an overview, which shows the title and the category of film (e.g. tv spot, social media content, corporate movie, etc.)

any ideas how to solve my problem.

many thanks in advance! 

best, philipp

10 hours ago, Pivotman said:

hey,

may anyone help me with the following very similar topic as discussed above? i don't manage to make the css code work.

i would like to show on my portfolio thumbnails two lines of text when hovering over.

first line should show the project title, second line should display the h2 headline on the project page. is that possible? to make it clear, i attached to screenshots.

my intention is to give my clients for each of my films an overview, which shows the title and the category of film (e.g. tv spot, social media content, corporate movie, etc.)

any ideas how to solve my problem.

many thanks in advance! 

best, philipp

https://pivot-film.squarespace.com/

You can use #2 code