hansworks Posted August 28, 2023 Posted August 28, 2023 (edited) 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 August 28, 2023 by hansworks change description
CassAggett Posted August 29, 2023 Posted August 29, 2023 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); } Instruction: How to set a site-wide password 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. WEBSITE • INSTAGRAM
hansworks Posted September 3, 2023 Author Posted September 3, 2023 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
Solution tuanphan Posted September 6, 2023 Solution Posted September 6, 2023 @hansworks use this CSS code header#header a.btn { letter-spacing: 2px !important; } header#header a.btn:hover { color: white !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!)
hansworks Posted September 13, 2023 Author Posted September 13, 2023 Cass, this worked beautifully, so thank you again for all your help! tuanphan 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment