Jump to content

CSS to force sentence case on H1 Tag

Recommended Posts

Hi

all h1 tags on our website are automatically capitalised. As such i've restricted these to single words but would like to improve the h1 tags across our site, but to do this i would want to be able to write in sentence case, especially because our logo / brand is :thatstudio and not :Thatstudio as is forced currently.

For example id like our h1 tag on our home page to be something along the lines of 

:thatstudio | Award Winning Architects : Linlithgow : West Lothian

is there a way to force sentence case? or a way to control the formatting of the letters that are forced capitalised?

Thanks for your help

Andrew

 

Link to comment
8 minutes ago, ajwtaylor said:

Hi

all h1 tags on our website are automatically capitalised. As such i've restricted these to single words but would like to improve the h1 tags across our site, but to do this i would want to be able to write in sentence case, especially because our logo / brand is :thatstudio and not :Thatstudio as is forced currently.

For example id like our h1 tag on our home page to be something along the lines of 

:thatstudio | Award Winning Architects : Linlithgow : West Lothian

is there a way to force sentence case? or a way to control the formatting of the letters that are forced capitalised?

Thanks for your help

Andrew

 

Can you share your URL with some screenshots of the result you want to achieve? We can take it a look

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 hours ago, ajwtaylor said:

is there a way to force sentence case? or a way to control the formatting of the letters that are forced capitalised?

In Design -> Styles -> Fonts -> Headings you can adjust the "Text Transform" property. Setting it to "None" will allow you to control the capitalisation of all of your headings manually.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 hours ago, Beyondspace said:

Can you share your URL with some screenshots of the result you want to achieve? We can take it a look

Thanks sorry i thought i had shared URL in previous post. It is

https://thatstudio.scot/

I have attached an image of what we have now (top) and what we would like to achieve (bottom)

for the purposes of this discussion. The problem is the capitalised T at the beginning of :Thatstudio

i would like to be able to write in sentence case across the site H1 titles, all news (blog) post titles are capitalised on first of every letter.

2 hours ago, Ziggy said:

In Design -> Styles -> Fonts -> Headings you can adjust the "Text Transform" property. Setting it to "None" will allow you to control the capitalisation of all of your headings manually.

Thanks for your reply. I checked this and it is already set to none.

We are using squarespace 7.0 and custom font metro sans loaded in via CSS already. I think this might affect what you suggested or the influence of these tools.

Many thanks both for your help.

 

 

 

Screenshot 2023-03-03 at 18.37.42.png

Edited by ajwtaylor
add further info to attachment for clarity
Link to comment
On 3/6/2023 at 9:24 AM, tuanphan said:

Try adding this to Design > Custom CSS

h2:first-letter {
    text-transform: uppercase;
}

 

Thanks this works, but it applies this site wide. Is it possible to isolate this by page with some additional code?

 

Link to comment

Try this, it applies to the homepage:

#collection-5cbf7104971a186cc116fa5e { 
  h2:first-letter {
    text-transform: uppercase;
  }
}

If that's not the right page then you can find and replace the #collection ID by referencing this guide:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.