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

Question

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Can you share link to portfolio page? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

--

Do you use Personal Plan or higher?

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Create an account or sign in to comment

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

√ó
√ó
  • Create New...