Add text to top of Index Page

Hi, 
I would like to add a short text/page description to the top of a certain index page on my site to describe what is shown in the index below. The text i would like to add is now below the index thumbnails but I want this above the thumbnails.
This would be used on the following page:

https://www.jirobosma.com/drone

Can i do that with custom CSS?

(I did try this solution but it did not work https://forum.squarespace.com/topic/226702-add-text-to-top-of-index-pages/)

Thanks!

Something like this

body#collection-65ba9c2d82e27a520f220005 .main-content:before {
    content: "abcxyz";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 50px;
    color: white;
}

Thanks that works!
Can it also be a title line in bold for example, and another couple of lines below it in a normal font?
Like the attached image.

This is what i have now:
 

body#collection-65ba9c2d82e27a520f220005 .main-content:before {
    content: "Aerial Cinematography";
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: bold;
    color: grey;
}

Thanks. Iv'e updated with your code.
But the sublines need to be in a different font weight. and the enters aren't working.
So like this: Title in bold and size 16. and sublines in normal and size 15.

It has to look exactly like this attachment if possible. (the correct text and formatting is below the thumbnails on my site now)

If both in different weight, you will need to use Script code, CSS code can't handle this. This will require a Business Plan or higher.

Thats to bad. Thanks for the help!

Hi tuanphan, I have a similar request.  I need to add description text between the navigation bar and images on these two index pages:

https://www.joshuakirsch.com/sculpture

https://www.joshuakirsch.com/fabrication

Your help would be greatly appreciated!

Thanks, Josh

On 8/19/2024 at 9:12 AM, StallerMass said:

Hi tuanphan, I have a similar request.  I need to add description text between the navigation bar and images on these two index pages:

https://www.joshuakirsch.com/sculpture

https://www.joshuakirsch.com/fabrication

Your help would be greatly appreciated!

Thanks, Josh

You can use this to Website Tools > Custom CSS

#collection-575fc20540261df38922ffad #container-content:before {
    content: "Fabrication";
    display: block;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}
#collection-576069805559865cc19ff580 #container-content:before {
    content: "Sculpture";
    display: block;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

On 8/22/2024 at 4:58 AM, tuanphan said:

You can use this to Website Tools > Custom CSS

#collection-575fc20540261df38922ffad #container-content:before {
    content: "Fabrication";
    display: block;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}
#collection-576069805559865cc19ff580 #container-content:before {
    content: "Sculpture";
    display: block;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

 

Thank you! This works great... however is there a way to have the text disappear when you navigate to a project?  Ideally the project pages look and function exactly as they did before, and the new description text is only on the two index pages.

On 8/26/2024 at 2:53 PM, StellarMass said:

Thank you! This works great... however is there a way to have the text disappear when you navigate to a project?  Ideally the project pages look and function exactly as they did before, and the new description text is only on the two index pages.

You can use this new code

#collection-575fc20540261df38922ffad:not(.index-detail) #container-content:before {
    content: "Fabrication";
    display: block;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}
#collection-576069805559865cc19ff580:not(.index-detail) #container-content:before {
    content: "Sculpture";
    display: block;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

On 8/27/2024 at 9:35 PM, tuanphan said:

You can use this new code

#collection-575fc20540261df38922ffad:not(.index-detail) #container-content:before {
    content: "Fabrication";
    display: block;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}
#collection-576069805559865cc19ff580:not(.index-detail) #container-content:before {
    content: "Sculpture";
    display: block;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

 

Perfect! Thanks again!