Add subtitle for my portfolio projects!

Hello! I am hoping that somebody can help me out with this as I've searched YouTube and tried to do it myself with no success.
What I'm trying to do is add a line of text (subtitle) underneath the Title of my Projects.

So for example my first project is NEXT underneath that I would like to write a sentence that basically explains what the person will see once they open that project. I would like the subtitle text to be the font/size of my Paragraph 1 text (the same as the text underneath my name). I would like to be able to do this for all my projects (there are 4 total).

I am using a template but I do not remember which one unfortunately. 

I would really really appreciate it if somebody could provide me with an answer to this! Please let me know what additional information I need to provide to get an answer to this. Thank you in advance!

Hello!

Are you able to share a link to the site? I think it could be something as simple as adding a text block and selecting Paragraph 1 for the size (unless you're using the portfolio or blog feature to display this information). I'd be happy to take a look at your site though to make sure I understand exactly what you're asking!

You can see #2 code

@tuanphan Hi thank you for this! I see it has worked for other designers, but I am a bit confused by the instructions. 

I can find my URL slug underneath home (am I supposed to change something here?  What do I do once I find the URL?I don't have an option for advanced settings within the settings menu for the project.

However, I can get Advanced Settings if I open the settings menu for my home screen where it lists all of my projects. (See photo below) 

I have inputted the code and saved it yet no change. I am doing something wrong or possibly skipping a step. Can you explain what I need to do step by step, please? I'd appreciate it thank you 🙂.

 

@Snowday Hi thank you for answering! So unfortunately because of the portfolio template I used, I cannot add a text block. I only have the option to manage projects. I tried to do the solution that TuanPhan provided, but I didn't quite understand the instructions. I did see that it worked for others! I probably just didn't input the code in the right place or I missed a step. Link is below! 

ellipse-bison-agt9.squarespace.com
 

Got it! I think Tuanphan's solution is perfect for you! He has helped me with many problems and issues in the past and is a tremendous resource to this community.

For his solution, instead of adding the code to the Portfolio Settings > Advanced (Page Header Code Injection), you'll want to add the code to the site CSS area which can be found here: Website > Website Tools (toward the bottom of the website editor side menu) > Custom CSS.

To make sure the code works for you, take each project URL and add it to the code by replacing the placeholder URLs in the code. So in the code below, replace blue with your URLs, replace green with your desired subtitles. If you have more than 2, just copy and paste the last 3 lines of code until you have enough to cover all of your projects.

To adjust the color and size of the subtitle text, adjust the lines in red below. Font size will be in pixels and you can mess with this until you find the right fit. Color can be basic like "black", or "red", or for a more custom color you can use a hex code like #FFFFFF (which is white).

Let me know if you need further assistance!

 

/* Add subtitle */
h3.portfolio-title:after {
    font-size: 20px;
    color: black;
    display: block;
}
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
    content: "subtitle 01";
}
a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after {
    content: "subtitle 01";
}

@tuanphan @Snowday Thank you so very much! I really appreciate it, this makes all the difference I couldn't have done this without both of your help!

The fix worked perfectly, I have one last question! I would like to change the weight of the subtitle text to 300px so it matches my Paragraph 1 text. Right now it looks a little bold, like the same weight of the title which I believe is 500px. I would also like to reduce the spacing between the lines of subtitle text a bit. 

Are these changes possible? If not that's okay. Once again thank you both so much for the detailed explanations!  

@Snowday Thank you Noah! My page is now exactly as I envisioned it! I appreciate all your help 🙂 take care!

Hello! @Snowday@tuanphan I'm having this same issue as well -- I tried copying & pasting the code, but it's not working. I wonder if it's because I'm using the Flatiron template which is a little older? Let me know if you might have other ideas for how I can get this to work! Here's a link to my portfolio: https://www.jenniferkahndesign.com/

On 3/2/2024 at 3:02 AM, jkdesign said:

Hello! I'm having this same issue as well -- I tried copying & pasting the code, but it's not working. I wonder if it's because I'm using the Flatiron template which is a little older? Let me know if you might have other ideas for how I can get this to work! Here's a link to my portfolio: https://www.jenniferkahndesign.com/

With Flatiron, use code like this

/* Add subtitle */
#grid .item h2 {
    line-height: 30px !important;
}
#grid .item h2:after {
    font-size: 20px;
    color: black;
    display: block;
    font-weight: 300;
}
.item [href="/the-daily-show/"] h2:after {
    content: "daily show text";
}
.item [href="/bar-rescue"] h3:after {
    content: "bar text";
}