Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding a subtitle to a title to thumbnails in portfolio grid


noraboeke-art
Go to solution Solved by tuanphan,

Question

  • Answers 29
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add this to Home > Design > Custom CSS h3.portfolio-title span { display: block; font-size: 12px; } then edit title to this format  

You can use | or - character, however this will require JavaScript to solve. You can add Title | Sub Title| then we  will check. It sill appear on browser tab, however I think it will be bet

Posted Images

Recommended Posts

  • 0

Add this to Home > Design > Custom CSS

h3.portfolio-title span {
    display: block;
    font-size: 12px;
}

then edit title to this format

Quote

Title <span>Subtitle</span>

 

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0

/config is url for site owner.

You mean this page? https://heron-olive-sh9k.squarespace.com/beachlife

I see sub title here. Do you still need help?

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0

Hi Tuanphan, Thanx for your reply. 

That is the page im showcasing my work right now. The problem there is that it is not clear for people that the images are clickable.  So that's why I started to showcase my work in a portfolio page (but this one is still hidden since it is not finished yet).

I want the portfolio page to look the same as this page https://heron-olive-sh9k.squarespace.com/beachlife

So im wondering how I can add a subtitle to the titles under the thumbnails. 

Hope you can help me out with this ūüôā

Link to post
  • 0

Hi Tuanphan, 

Thanx for your reply. 

Im wondering what im doing wrong since its not working yet. 
Attached 2 photo's with what I did. 

Also I would like to have the subtitle in normal weight as on the last image (that's from a normal page and not a portfolio grid). 

Schermafbeelding 2020-10-21 om 13.36.53.png

Schermafbeelding 2020-10-21 om 13.37.05.png

Schermafbeelding 2020-10-21 om 13.40.54.png

Link to post
  • 0

Not sure why, but your code has invalid character. Try copy this code then enter title box

 

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0

That strange. Just tested on my site & It worked here.

--

Do you use Personal Plan or higher?

 

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0

Hi Tuanpan, 

I found out that this code is working for the portfolio layout: grid overlay. So that's great! 
The thing is... im using the 'grid simple' design. So maybe there is another code needed for that one? 
 

On 10/23/2020 at 11:50 AM, tuanphan said:

Not sure why, but your code has invalid character. Try copy this code then enter title box

 

 

Link to post
  • 0
On 12/10/2020 at 3:06 AM, brianb123 said:

@noraboeke-art did you ever figure this out?  I am trying to do the same thing using the grid simple option for may portfolio page. 

 

It still work on my client site. Try this code. It it doesn't work, can you share link to your site? We can check easier.

 

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0
7 hours ago, tuanphan said:

It still work on my client site. Try this code. It it doesn't work, can you share link to your site? We can check easier.

 

Thanks for your reply. I tried this a had similar results to @noraboeke-art, it worked for the portfolio layout:grid overlay where the text overlays the image but not for the portfolio layout:simple grid where text is below image. 

Screen Shot 2020-12-11 at 10.26.29 PM.png

Screen Shot 2020-12-11 at 10.17.41 PM.png

Link to post
  • 0
4 hours ago, brianb123 said:

Thanks for your reply. I tried this a had similar results to @noraboeke-art, it worked for the portfolio layout:grid overlay where the text overlays the image but not for the portfolio layout:simple grid where text is below image. 

Screen Shot 2020-12-11 at 10.26.29 PM.png

Screen Shot 2020-12-11 at 10.17.41 PM.png

Do you use Personal Plan or higher?

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0

Hello, 

I have tried this code, which has worked wonderfully. Thank you Tuanphan (I have been following some of your answers over this forum, and I am so grateful for your generosity of this knowledge)

h3.portfolio-title span {
    display: block;
    font-size: 12px;
}
  Quote

Title <span>Subtitle</span>

I have a quick question. following this code. with this code I was able to add a subtitle under the title of a project on the thumbnails - great. Now, Is it possible to have the option to add like 3-4 subtitles? one subtitle has its own line?

I am not knowledgeable of custom CSS, so again, I am very grateful for this forum ūüôā

Link to post
  • 0
16 hours ago, vcampaner said:

Hello, 

 

I have tried this code, which has worked wonderfully. Thank you Tuanphan (I have been following some of your answers over this forum, and I am so grateful for your generosity of this knowledge)


h3.portfolio-title span {
    display: block;
    font-size: 12px;
}
  Quote

Title <span>Subtitle</span>

I have a quick question. following this code. with this code I was able to add a subtitle under the title of a project on the thumbnails - great. Now, Is it possible to have the option to add like 3-4 subtitles? one subtitle has its own line?

I am not knowledgeable of custom CSS, so again, I am very grateful for this forum ūüôā

Add more span

Title <span>sub1</span><span>sub2</span><span>sub3</span>

 

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0
12 minutes ago, tuanphan said:

Add more span


Title <span>sub1</span><span>sub2</span><span>sub3</span>

 

This works, thank you so much. 

What if I have longer text than what the title page settings can take ? Is there a way to add more text space. 

also is there a code that adjust line height of the subtitle on thumbnails. When I try changing the title height, it doesn't affect the subtitles correctly. 

this is so helpful. thank you so much. 

Link to post
  • 0
On 12/15/2020 at 3:47 PM, vcampaner said:

This works, thank you so much. 

What if I have longer text than what the title page settings can take ? Is there a way to add more text space. 

also is there a code that adjust line height of the subtitle on thumbnails. When I try changing the title height, it doesn't affect the subtitles correctly. 

this is so helpful. thank you so much. 

Hi. Have you solved this yet?

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0

Hi @tuanphan,

First of all ‚Äď thanks for¬†your generosity and helpfulness across the forum.

Regarding the Portfolio thumbnail subtitling using <span>, these subtitles also show as part of the portfolio item's title (thus it also appears on top of the browser window when entering the portfolio item page, as well as in the pagination field, where too long titles often clutter the layout). See attached screenshot.

Is there any way to add subtitles on Portfolio thumbnails without cluttering the page titles with the same text?

PS: it seems you can also add simple code like <br> and font-styling in the title field in the settings of each portfolio item, and they will show correctly on the portfolio thumbnails. However, then all the text + coding also appear as page titles just like when using <span>.

Thanks!

Link to post
  • 0
On 2/1/2021 at 7:50 AM, Thormod_RK said:

Hi @tuanphan,

First of all ‚Äď thanks for¬†your generosity and helpfulness across the forum.

Regarding the Portfolio thumbnail subtitling using <span>, these subtitles also show as part of the portfolio item's title (thus it also appears on top of the browser window when entering the portfolio item page, as well as in the pagination field, where too long titles often clutter the layout). See attached screenshot.

Is there any way to add subtitles on Portfolio thumbnails without cluttering the page titles with the same text?

PS: it seems you can also add simple code like <br> and font-styling in the title field in the settings of each portfolio item, and they will show correctly on the portfolio thumbnails. However, then all the text + coding also appear as page titles just like when using <span>.

Thanks!

Skjermopptak 2021-02-01 kl. 15.46.14.mov

You can use | or - character, however this will require JavaScript to solve.

You can add Title | Sub Title| then we  will check.

It sill appear on browser tab, however I think it will be better than <br> tag.

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0
2 hours ago, tuanphan said:

You can use | or - character, however this will require JavaScript to solve.

You can add Title | Sub Title| then we  will check.

It sill appear on browser tab, however I think it will be better than <br> tag.

Thanks, @tuanphan. The use of |¬†definitely looks better, but as you say ‚Äď the titles will still show on browser tabs and in pagination. As for jscript, would this be a complicated matter to solve?

@vcampaner, did you find a solution?

Link to post

Create an account or sign in to comment

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


√ó
√ó
  • Create New...