Jump to content

Style fields (and metadata) to only capitalize the first word

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

I have a newsletter sign-up block on my homepage. I'm collecting first name and email address. I would like to only capitalize the first word, but not the second ("First name," not "First Name;" "Email address," not "Email Address"). Is that possible?

A related question — On my blog, I display the date and author at the top. The author field says "Written By" with the word "By" capitalised. I'd like to change that into small letters to, so that it says, "Written by."

Password: 2eRFn7gQ

Many thanks!

Link to comment
  • Solution

Ah got it, understand why it won't work on homepage, you try adding this line to top of Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, tuanphan said:

Ah got it, understand why it won't work on homepage, you try adding this line to top of Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Thanks so much! Would you mind explaining what the issue was if you can?

I have a similar situation on my contact form. Are you able to help me with that as well? I'd like "First name" and "Last name" to appear with only the first word capitalized.

Edited by Aurora
Link to comment
46 minutes ago, Aurora said:

@tuanphan Can you help me with changing the format of the author metadata in the blog posts from "Written By" to "Written by" where "by" is not capitalized?

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.blog-item-wrapper {
  .blog-meta-item--author {
    text-transform: lowercase !important;
  }
  .blog-meta-item--author::first-letter {
    text-transform: uppercase !important;
  }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 hour ago, Web_Solutions said:

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.blog-item-wrapper {
  .blog-meta-item--author {
    text-transform: lowercase !important;
  }
  .blog-meta-item--author::first-letter {
    text-transform: uppercase !important;
  }
}

 

Thank you for your help!

Can you help me with a similar issue?

On my contact form, I'd like "First name" and "Last name" to appear with only the first word capitalized, so NOT "First Name" and "Last Name." Is that possible?

Link to comment
2 minutes ago, Aurora said:

Thank you for your help!

Can you help me with a similar issue?

On my contact form, I'd like "First name" and "Last name" to appear with only the first word capitalized, so NOT "First Name" and "Last Name." Is that possible?

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.fe-block-57a3651e726d0c658f30 {
  .first-name, .last-name {
    .caption-text {
      text-transform: lowercase !important;
    }
    .caption-text::first-letter {
      text-transform: uppercase !important;
    }
  }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
17 minutes ago, Web_Solutions said:

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.fe-block-57a3651e726d0c658f30 {
  .first-name, .last-name {
    .caption-text {
      text-transform: lowercase !important;
    }
    .caption-text::first-letter {
      text-transform: uppercase !important;
    }
  }
}

 

Thank you! Now both words aren't capitalized. I'd like "First" and "Last" to still be capitalized, just not "name."

Link to comment
9 minutes ago, Aurora said:

Thank you! Now both words aren't capitalized. I'd like "First" and "Last" to still be capitalized, just not "name."

 

Replace the code with this 

.fe-block-57a3651e726d0c658f30 {
  .first-name, .last-name {
    .caption-text {
      text-transform: lowercase !important;
      display: block !important;
    }
    .caption-text::first-letter {
      text-transform: uppercase !important;
    }
  }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.