Jump to content

Customize "Post Comment" button on website

Go to solution Solved by tuanphan,

Recommended Posts

I am having trouble changing the "Post Comment" button without affecting the style settings of the primary button (see screenshot and html code).

I managed to fix the "Preview" link with the following code but didn't work on the "Post Comment" button:

.squarespace-comments .comment-btn-wrapper .btn-text {
    font-family: 'montserrat';
    font-size: 16px;  
    color: #C171A7;
    padding: 1rem .5rem;
}

I would like to only change this button to NOT inherit the primary button design settings (as it changes other buttons using this design on the site), but without using a ".comment-btn:after" code (that messed up the spacing).

The changes I'd like to make are:

- Remove border-width: 0px;

- Adjust padding: 1 rem .5rem;

- Change font-weight: 400;

- Change text to / content: "Post Comment" (no ellipsis)

Appreciate anyone that can help! Thanks!

Screen Shot 2023-06-17 at 22.56.21.png

Screen Shot 2023-06-17 at 23.01.14.png

Link to comment
  • Replies 6
  • Views 3.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Use this code

span.comment-btn.sqs-system-button.sqs-editable-button-font.sqs-editable-button-shape.sqs-button-element--primary {
    font-family: 'montserrat' !important;
    font-size: 0 !important;
    color: #C171A7;
    padding: 1rem .5rem !important;
    border-radius: 0 !important;
}
span.comment-btn.sqs-system-button.sqs-editable-button-font.sqs-editable-button-shape.sqs-button-element--primary:before {
    content: "Post Comment";
    font-size: 16px !important;
}

 

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
  • 2 weeks later...
  • 2 months later...
  • 7 months later...

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.