Jump to content

Form button color not matching sitewide button blocks and help adjusting type in Form fields

Go to solution Solved by tuanphan,

Recommended Posts

Hello All. Looking for CSS code help with a few issues I am facing:

site: hfrelief.org pw: phytoHF1

#1) I am trying to add css so the form buttons match the regular buttons blocks on the rest of the site. No CSS on similar posts seems to affect the form button. Currently form button is black and  I want to change outline and type to brown then on hover, solid brown button with white type.

#2) In the form, the "required" field type is very light weight. I would like it to be bold and match the time of day choices type

#3) The type in the blue button in the nav header is very tightly spaced and the style adjustments don't change it, only the regular button blocks. Can the letterspace be increased?

Thank you in advance!

site: hfrelief.org pw: phytoHF1

Edited by hansworks
change description
Link to comment
  • Replies 4
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Hey, try these codes:

1.

Looks like this is fixed, matches other buttons from my end

 

2.

// required form field //
.sqs-block-form .field-list .description {
  font-weight: bold;
}

 

3.

// header button spacing //
.header-actions-action--cta .sqs-button-element--primary {
  letter-spacing: var(--primary-button-font-letter-spacing);
}

 

 

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment

Hello Cass and thank you so much for your time and support! I forgot to edit the post to show that I fixed #1, the button issue. Here is the code that worked for me in the event anyone else comes across this thread. Possibly not the most elegant or efficient:

/* Change form button to match site */
form input[type=submit] {
        background: none !imortant;
        color: #680F0F !important;
        border-color: #680F0F !important;
}
    form input[type=submit]:hover {
        background: #680F0F !important;
        color: white !important;
        border-color: #680F0F !important;
}

#2, The code you sent for bolding the form text worked beautifully.

#3, the code you sent did not change anything, so if you have time, is there something else I could try? Attached is a screen shot of your code added and saved. The letters are still very close together. Ideally they would match the spacing of the other.

Lastly, I realized that I forgot to ask how to make the type on that blue header button white during hover. It may just be I need to change on of the theme colors, just can't identify which one.

Many thanks again for your help,

Hans

 

Screen Shot 2023-09-03 at 5.44.11 PM.png

Screen Shot 2023-09-03 at 5.44.47 PM.png

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.