seonto

January 6

On 1/4/2024 at 4:44 PM, tuanphan said:

SS updated something on Form so old code doesn't work, I don't know how to update code with new form, but if you can add me as a contributor, I can help you disable this update.

@tuanphan

How can I add you as a contributor?

Or.. I would appreciate it if you could tell me how to change the settings myself.

January 6

On 1/3/2024 at 7:45 PM, Web_Solutions said:
Can you try with the code below? Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS. Let me know if it's working.
html, body {
    background: #F9F9F5 !important;
}

It's works!! Thank you very much!!

January 3

1 hour ago, tuanphan said:

You mean remove button after clicking submit

or remove text "Submitting"?

@tuanphan

Remove "Submitting" button after clicking submit button!

Submitting button is not useful for me 😥

January 3

On 6/13/2023 at 5:15 PM, tuanphan said:
Add to Design > Custom CSS
input[value="Submitting"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

Hi, @tuanphan
this codes doesn't work any more TT
Do you have another solutions?

January 3

Hi. I want to hide the all "submitting" button that appears when I press the send button.

My send button is write in Korean, with black square.

Any help would be greatly appreciated. Thanks!

website
https://seonto.kr/order
https://seonto.kr/return
https://seonto.kr/poetry/news
https://seonto.kr/ask

January 3

hi. I would like to change the top and bottom of the website background color that is visible when scrolling.

It works fine on PC and mobile phone, but when I open the website on iPad, the top and bottom background colors visible when scrolling are white.

I want to change the white color to #F9F9F5.
Thank you!

website: https://seonto.kr

November 3, 2023

hello. I am currently a user using the 7.1 template. I feel stressful whenever a feature is automatically updated. Because I have to change the codes every time. If I create a new template with 7.0 or 5.0, won't there be any inconvenience as the features will be updated?

For example, things like new form design format.
Any helps would be appreciated! Thanks.

https://seonto.kr/ask

tuanphan · June 16, 2023

On 6/13/2023 at 5:15 PM, tuanphan said:
Add to Design > Custom CSS
input[value="Submitting"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

Thank you very much!!! It's works TT
You are the best!!

June 12, 2023

Hi I want to hide a form button when it's click status.

My website is all korean, except form button. When I click form button, 'submitting' title is shows on..

How can I hide a form button after click it? I know SS changed form system and remove about submitting codes. so I want to focus a form button after status..

Thanks.

https://seonto.kr/order

May 23, 2023

On 5/22/2023 at 2:36 AM, creedon said:

I do not have a solution but some observations. Apparently SS has removed the class for the submitting state of the button. SS now only changes the value attribute on the input.

Without the state class you'd probably be looking at a MutationObserver which are not easy.

@creedon Okay.. I check your hyper link and read about MutationIbserver, but I can't understand at all 😂 then it is impossible to hide a submitting button now?

May 20, 2023

Hi. After SS changed the form list system, my submit button (the mint one) ignore the codes.
I used this codes to changed the submitting button text. ("submitting" to "전송 시도 —")
I have a three submit button in my website. and want to change all of it.

https://seonto.kr/order
https://seonto.kr/return
https://seonto.kr/ask

If you have another codes for new form system, please share to me. Thank you 🙂

	/* submit button - change the button text */


		.submitting input.button,
			{
  				visibility: hidden !important ;
			}
	

		.form-button-wrapper,
			{
 				position: relative;
			}


		.submitting .form-button-wrapper:after,
			{
  				content: '전송 시도 —' ! important ;
              	font-size: 14px !important;
  				position: absolute;
  				display: block;
  				z-index:99999;
    			left:50%;
  				top:50%;
  				background:  rgb(155,195,195);
  				transform: translate(-50%,-50%);
              	color: #000000 !important ;
              
                padding-top : 9px !important ;
                padding-bottom : 9px !important ;
              	padding-left: 15px !important ;
                padding-right: 15px !important ;
              
			}

May 19, 2023

On 4/11/2022 at 8:01 PM, Beyondspace said:

section[data-section-id="624bcec43c713c27b2e782d0"] section[data-section-id="624bcec43c713c27b2e782d0"].submitting input.button {
  visibility: hidden;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .form-button-wrapper {
  position: relative;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .submitting .form-button-wrapper:after {
  content: 'your word';
  position: absolute;
  display: block;
  z-index:99999;
  left:50%;
  top:50%;
  background:  rgb(155,195,195);
  padding: 5px;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

Hi. after SS changed the form list systems, this codes didn't works any more ;(
Could you let me know for a new version? Thank you!

May 13, 2023

On 5/30/2020 at 1:45 PM, jpeter said:

You can add this JS, replace the value of the submittingText variable with with your own:

(function () {
  // Text to add when form is submitting.
  var submittingText = 'SUBMITTING!!';

  // Select the node that will be observed for mutations
  var form = document.querySelector('form');
  var submitButton = form.querySelector('input[type="submit"]');
  var submitText = submitButton.value;

  // Options for the observer (which mutations to observe)
  var config = { attributes: true };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(function () {

    // Check to see if the form has a `submitting` class.
    var isSubmitting = form.classList.contains('submitting');

    // Toggle betweeen the default submit text and the submitting text.
    if (isSubmitting) {
      submitButton.value = submittingText;
    } else {
      submitButton.value = submitText;
    }
  });
  // Start observing the target node for configured mutations
  observer.observe(form, config);
})();

Hi. Do you have this JS for new version too? SS changed the form list system on this May.. TT

leart_byleonapejar · May 13, 2023

On 5/5/2023 at 5:35 AM, Valisco said:
Did something just recently update with Squarespace for the form? I used this code and changed some of it around yesterday (see below for what I used) and it worked perfectly! I looked at my website today and everything reverted back. Do you know of any reason why this would be?

The only thing that DOES seem to be working still is the padding/margins I did on the form button.

https://www.valiscosupply.com/contact
/* Contact form */
.form-wrapper .field-list .field .field-element {
    background: #F5F4F0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
	color: #000000 !important;
  margin-top: 15px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

/* form input size */
.form-wrapper .field-list .field .caption .field-element {
    font-size: 14px !important;
}
/* form button */
input.button.sqs-system-button.sqs-editable-button {
    padding-left: 3em !important;
  padding-right: 3em !important;
  padding-top: 1em !important;
  padding-bottom: 1em !important;
  margin-top: 10px;
}
***** EDIT ******

I figured out the issue from another post. It looks like Squarespace is updating the form to other "naming conventions" (not sure what they're officially called, newbie here) but I was able to fix it with these changes if it helps anyone else.
/* Contact form */
.form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea {
    background: #F5F4F0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
	color: #000000 !important;
  margin-top: 5px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  }}

/* form input size */
.form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea {
    font-size: 14px !important;
  }}

/* form button */
input.button.sqs-system-button.sqs-editable-button {
    padding-left: 3em !important;
  padding-right: 3em !important;
  padding-top: 1em !important;
  padding-bottom: 1em !important;
  margin-top: 10px;
}

Thank you very much! It works perfectly!
If you want to change the place holder too, use this code. I just add red one only.

       .form-wrapper .react-form-contents .field-list .form-item
           { input, text area, select, textarea, ::placeholder
               {
font-size: 14px ! important ;
               }
           }

October 13, 2022

On 10/6/2022 at 5:16 PM, Ziggy said:

::selection works on most browsers, but doesn't work on iOS mobile. From a quick bit of research, it doesn't look like there's a way to change this on iOS mobile.

Thanks a lot! Then there's no way to remove the touch mark area too?

October 6, 2022

Site URL: https://seonto.kr

1. How can I change the text drag color on mobile?
I add this code on custom CSS page. PC mode is works, but not on the mobile..

	::selection
		{
			color : #82aaaa ! important ;
			background : rgba(155, 195, 195, 0.15) ! important ;
		}


		@media screen and (max-width: 767px)
			{
				::selection
				{
				color : #82aaaa ! important ;
				background : rgba(155, 195, 195, 0.15) ! important ;
				}
			}

2. When I touch some image or title on mobile website, the touch mark area (gray block) is shows on. Can I hide or remove it on all web site on mobile? Thanks :)

September 7, 2022

14 hours ago, tuanphan said:
#1. Add to Design > Custom CSS
/* transparent header */
header#header {
    background-color: transparent !important;
}
#2. Which field?

#3. Internet is slowly now. I will check again later

#4. You changed in Site Styles or? Can you take some screenshots of problem?

#1
Thank you! It's works!

#2
The last field.

#4
I changed drag text color by below cording. It's works on PC but not on the mobile.

   ::selection
       {
           color : #82aaaa ! important ;
           background : rgba(155, 195, 195, 0.15) ! important ;
       }

September 5, 2022

Site URL: https://seonto.kr

Hi. I have a four questions.
If you letting me know, it'll help a lot!
PLEASE HELP ME..

1.
When I scroll down the website, the logo bar background color (white or black) is show up.
I think is new SS rules because It didn't appear before.
Could you change the logo bar background to be transparent?

2.
https://seonto.kr/order
When I type more than the text area, I want to change the format to extend down instead of just moving to the right.

3.
https://seonto.kr/mysleeptalking
If the background image is dark, I want the text color to be reversed to white.

4.
I changed the color to change when I drag text on the web,
but the color doesn't change on the mobile.
Is it possible to change it? Thank you.

July 22, 2022

21 hours ago, tuanphan said:

Try adding this to Design > Custom CSS

div.container.header-menu-nav-item, div.container.header-menu-nav-item a {
    border-color: transparent !important;
    outline-color: transparent !important;
}

I ask this error to SS help center, and now it's gone! Anyway thank you for helping me. 😌

July 20, 2022

Site URL: https://seonto.kr

Hi. I found some error with new SS upgrade.

When I click the folder menu title in mobile and go back, the square outline is show up.

I think this issue is becoming with new SS upgrade.

How can I remove it? Thank you.

June 21, 2022

39 minutes ago, tuanphan said:
Change your code to this code
@media screen and (max-width:767px) {
body .content-wrapper {
    padding-left: 10px;
    padding-right: 10px;
}
}

Perfect!! It works! Thank you every time ;D

June 21, 2022

Site URL: https://seonto.kr/sleeptalking

Hi. I want to add a margin on the mobile only.
So I add this code.

       @media screen and (max-width: 767px) {
               body
{
padding-left: 10px;
               padding-right: 10px;
                   }
               }

And then, I can't use the full background image anymore ;(
Pc version is fine, but not the mobile.
How can I setting the mobile margin with full background image?
Please letting me know. Thanks!

creedon · June 8, 2022

8 hours ago, creedon said:
SS is making changes all the time so this could be something new. The underline appears to be indicating that, that link is the active page.

Add the following to Design > Custom CSS.
body:not( .header--menu-open ) .header-nav-folder-item--active .header-nav-folder-item-content, /* desktop */
:is( [aria-current="page"], [aria-current="true"] ) .header-menu-nav-item-content /* mobile */

  {
  
    background-image : unset;
    
    }
Let us know how it goes.

It works!! Thank you so much!
You save my website XD

June 6, 2022

Site URL: https://seonto.kr

Hi. I want to remove the dropdown menu underline when it's active.

and all the mobile menu underline too.

It's not exist 1 month ago, but it's suddenly turn up.

How can I remove it? I need a help.

I want to maintain header menu navigation underline when it's active on the website like before.

tuanphan · April 20, 2022

On 4/18/2022 at 5:38 PM, tuanphan said:

@seonto Have you solved it yet?

Yes.. I need your help.

I think that codes just cover the older submitting button. So I should use more longer words than "submitting..." words.

And I have other submit buttons on the website with different button layout too.

ex 1. https://seonto.kr/letter
ex 2. https://seonto.kr/journal/news

So if you let me know how to change the submitting title or delete it, I'll really appreciate!

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by seonto

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources