hansworks Posted August 28 Share Posted August 28 (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 by hansworks change description Link to comment
CassAggett Posted August 29 Share Posted August 29 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. WEBSITE • INSTAGRAM Link to comment
hansworks Posted September 3 Author Share Posted September 3 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 Link to comment
Solution tuanphan Posted September 6 Solution Share Posted September 6 @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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
hansworks Posted September 13 Author Share Posted September 13 Cass, this worked beautifully, so thank you again for all your help! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment