The-Design-Order Posted August 17, 2020 Share Posted August 17, 2020 Site URL: https://pineapple-maroon-hpja.squarespace.com/home My client has just asked whether it is possible to change the colour of the error messages on the forms (on incorrect form submissions) to another colour. Has anyone had any experience with this? Hoping to change the colour to #768D99 Link to comment
tuanphan Posted August 17, 2020 Share Posted August 17, 2020 Add to Home > Design > Custom CSS /* Field error background */ .field-error { background-color: #768D99; } MillyBanks 1 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
The-Design-Order Posted August 17, 2020 Author Share Posted August 17, 2020 Thanks @tuanphan - has worked perfectly! Link to comment
ChrisFil Posted June 9, 2022 Share Posted June 9, 2022 I'm wondering how this worked after some time? I got this warning when attempting to make the change...Warning: Adding custom CSS to your site can break your design. Please use caution when using this feature. Our support team will be limited in their ability to help you with design related issues if you have custom CSS. Link to comment
tuanphan Posted June 11, 2022 Share Posted June 11, 2022 On 6/9/2022 at 8:09 AM, ChrisFil said: I'm wondering how this worked after some time? I got this warning when attempting to make the change...Warning: Adding custom CSS to your site can break your design. Please use caution when using this feature. Our support team will be limited in their ability to help you with design related issues if you have custom CSS. That is default message in Custom CSS. Don't care it. 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
posyrae Posted April 26 Share Posted April 26 @tuanphan This worked perfectly for the error blocks but not the error text on it's own, any idea how to fix that too? Link to comment
tuanphan Posted April 29 Share Posted April 29 On 4/26/2023 at 9:49 PM, posyrae said: @tuanphan This worked perfectly for the error blocks but not the error text on it's own, any idea how to fix that too? Can you share link to this page? We can check easier 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
tuanphan Posted May 3 Share Posted May 3 On 4/26/2023 at 9:49 PM, posyrae said: @tuanphan This worked perfectly for the error blocks but not the error text on it's own, any idea how to fix that too? With error text, use this code .field-error { background-color: #94195f; color: #f1f; } 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
hello_studiofrey Posted June 22 Share Posted June 22 Hello I have the same issue like above but unfortunately, the code doesn't work for me. Not sure what I'm doing wrong. (https://www.mulle-legal.ch/kontakt) Anyway, preferably, I would like to change the default red colour of the error boxes into an outlined version as in the image attached. Could someone please help me out? Thank you very much! Natasa Link to comment
paul2009 Posted June 22 Share Posted June 22 18 minutes ago, hello_studiofrey said: I have the same issue like above but unfortunately, the code doesn't work for me. Natasa Form Blocks were changed in late May 2023 and there's a new selector for error messages (.mkTKK6Se1WSWC0Psa20C). Note this is a code-generated class and could change at any time. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
hello_studiofrey Posted June 27 Share Posted June 27 Hi @paul2009 Thank you very much, I managed to adjust the form. However, there is still a warning icon that I can't figure out how to colour in the red(#D0342C) instead of white. Please see attached screenshot. Could you please help me out? Thank you! Natasa Link to comment
paul2009 Posted June 27 Share Posted June 27 2 hours ago, hello_studiofrey said: there is still a warning icon that I can't figure out how to colour in the red instead of white. The warning icon is an SVG so the fill colour is defined in the HTML and cannot be changed with CSS. You may want to use some CSS to hide it instead. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
hello_studiofrey Posted June 27 Share Posted June 27 @paul2009 and what would be the CSS to hide it? Link to comment
paul2009 Posted June 27 Share Posted June 27 40 minutes ago, hello_studiofrey said: what would be the CSS to hide [the exclamation icon]? You would use the class mentioned above, followed by svg. For example: .mkTKK6Se1WSWC0Psa20C svg { display: none; } As I said earlier, I don't expect this will endure because the class may change at any time. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
daniellenoakes Posted August 24 Share Posted August 24 is there a way to target the font size of the error message? i can't seem to get it working Link to comment
tuanphan Posted August 27 Share Posted August 27 On 8/24/2023 at 7:12 PM, daniellenoakes said: is there a way to target the font size of the error message? i can't seem to get it working Use this CSS code .field-list .mkTKK6Se1WSWC0Psa20C { font-size: 17px !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment