Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

image.thumb.png.4bd82fe47b518854f3a02c4f4cfe51e3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Screen Shot 2022-01-04 at 6.47.34 PM.png

Possible. This is custom font or Squarespace font?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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!

Screen Shot 2022-01-09 at 9.02.01 AM.png

Link to comment
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!

Screen Shot 2022-01-09 at 9.02.01 AM.png

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)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

@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!

Screen Shot 2023-05-15 at 5.49.18 PM.png

Screen Shot 2023-05-15 at 5.49.09 PM.png

Link to comment
  • Solution
On 5/23/2023 at 11:11 AM, millersota said:

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

Use this code

a.grid-item[href="/work/desolation-t7znf"] h3:before {
    content: "Opend Door 2";
}

This is Page URL Slug

image.thumb.png.1317eef9550a1580e34d7a0995a159b5.png

image.thumb.png.898dfbadba986199d4d03d398ce1ed4c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.