neeklamy

@cstine – I’ve formatted the code in your answer – the HTML was getting mangled by this site. To format code, just highlight the lines of code and use the 5th button in the toolbar:

Could you post a link to the page where you’ve added this?

You’re worrying about the wrong thing…
Bugging out: How rampant online piracy squashed one insect photographer
Most copyright holders are individuals; most infringers are businesses.

You’re worrying about the wrong thing…
Bugging out: How rampant online piracy squashed one insect photographer
Most copyright holders are individuals; most infringers are businesses.

You’re worrying about the wrong thing…
Bugging out: How rampant online piracy squashed one insect photographer
Most copyright holders are individuals; most infringers are businesses.

Could there be some kind of integration with Dropbox (or similar) via a 3rd-party site?

I removed the bit about the form from the title, I didn’t think it would materially change the nature of question (just shorten it). The opening line sums it up nicely too.

Jake - you’ve got a bit of repetition in there.

• Step 6 is unnecessary, if you look at the screen at step 7, you will see: “Enter code that will be injected into the ‘head’ tag on every page of your site”
• Further on, on adding a Code Block you include the jQuery, jQuery eventmove and TwentyTwenty files again!

So on every page with the slider you’re including it all twice, and on one page you have it included 3 times.

@florideja – it’s difficult to say what’s happening without seeing your site. Could you give us the address of a page where you’re trying to make the change?

@sossy – Just try adding the CSS from @jhughes92 answer, the very worst thing that can happen is that you don’t like the changes it makes. Or it doesn’t even work. Either way it’s easy enough to undo.

@jhughes92 – I’ve reduced your CSS down, there was some redundancy in there and code that didn’t do anything: opacity: 0 is meaningless when the element is hidden.

I would urge everyone else that has taken this CSS verbatim to look at it again and see if they can simplify their use – remember, simpler code = faster, more efficient websites!

@ImaadBKK – Please don’t take this wrongly, but I would suggest reading up on CSS a little bit, try this SitePoint CSS Reference.

That CSS is awful, there’s redundancy (all those <style> tags, duplicate display: none) and code that doesn’t do anything (opacity: 0). Here it is rewritten:

<style>
.product-price,
.product-quantity-select,
.sqs-add-to-cart-button-wrapper {
 display: none;
}
</style>

…That’s what Paul said in his question:

I do wonder, depending on what kind of data would be uploaded, whether a series of Google Forms and a bit of embedding would do it. Failing that, it sounds like more of a custom code thing.

Not in Squarespace, you might have to look at some sort of hosted system. How about Google Forms?

You don't need to add the first Code Block, all web browsers understand the # fragment as the top of the document. Just make that bottom Code Block:

<a href="#">Back to top</a>

That's an interesting hack, re-adding the text-indent: -40px does so much, but beyond that I don't know, sorry.

I would be inclined to say that it would be simpler to draw an up arrow and make that the background.

@jddowell - You will need to set the regular state of the scrollup class. I've just copied the hover color, try adding this to your Custom CSS, .scrollup:

color: #7daed3;

So it should look something like:

.scrollup {
 width: 60px;
 height: 40px;
 position: fixed;
 bottom: 50px;
 right: 100px;
 display: none;
 color: #7daed3;
}

There is, in step 4, just change the text inside of the anchor from "Scroll" to whatever text link you would prefer.

Then all you need to do is adjust the CSS, resize the box width and height and remove the text-indenting and background. Something like this:

.scrollup {
 width: 60px;
 height: 40px;
 position: fixed;
 bottom: 50px;
 right: 100px;
 display: none;
}

Going Fishing

All of the major web browsers come bundled with developer tools, with just a few clicks we can find the CSS selectors that are unique to the part of the page we want to change*.

*Apple’s Safari requires a bit more work, go into Safari’s Preferences > Advanced and enable “Show Develop menu in menu bar”.

1. Right click on or near the part of the page you want to hide.
2. Select Inspect Element.
3. In the developer tools you will see the HTML elements that make up the page.
4. Each time you select a different element, the corresponding part of the page is highlighted. We simply need to narrow down the part of the page that holds the content you want to hide.

    

   
   • Think you’ve found the part of the page you want to hide?
   • Hit the delete key (or right click > Delete Node), that bit will disappear.
   • Got the wrong bit? Never mind.
   • Got the right bit? Great!
   • Hit the undo (control-z on Windows, command-z on OS X), if you didn’t get the right bit carry on from step 4
   • And if you did get the right bit, we’re nearly there.
5. See this bit in the code: id="headerWrapper"? Briefly: an ID is unique, there is only one element on the whole page with this ID, this makes it ideal to target. When we target IDs, we use the hash symbol (#), classes are called with a dot (.), you’ll notice that further down there are two classes: <div class="logo site-title">…
6. After a bit of clicking around we have identified headerWrapper, because it’s an ID, in the selector we call it by #headerWrapper.

Hiding…

With some simple CSS you can do great things, one of which is the power to hide elements. Using the ID that we have found, we can put something like this together:

#headerWrapper { display: none !important }

The property (display) and value (none) simply says we want to hide this chosen bit of CSS, the !important says definitely do it (CSS can get quite gnarly, I suggest reading up on the use and misuse of !important).

Hiding on the Homepage

Great, but now this part of the page will be hidden on every page. Luckily the homepage <body> element has its own unique class, homepage, and if you remember from before, classes are called with a dot, so to use it in a selector, we call .homepage.

So we add that to what we learned before:

.homepage #headerWrapper { display: none !important }

Hiding on any Page

And what if you want to make these changes on something other than the homepage? You would just substitute .homepage for the unique collection ID, see How do I locate the page ID?

A Compulsion to Hide

You need to hide a few more things on the homepage? Easily done.

1. Go back to step 1 of finding elements on your page (“Going Fishing”).
2. Once you have those elements, add them as follows:

   .homepage {  #headerWrapper, #footer, .sidebar {    display: none !important  }}

3. See how each ID or class selector is listed, separated by commas? Make sure there’s no comma after the last one (in this example: .sidebar {)
4. Add your CSS to the Custom CSS Editor and you’re done!

You need to edit the form directly.

1. Go to your Squarespace Configuration
2. Click on the page where you have the form
3. Right click on the Form, the Edit Form window will pop up
4. Click on Storage, then the small x to the right of the Email entry

I've made some substantial changes to the answer, you wasn't seeing the widget because Hammadd forgot to link to the jQuery library, doh!

I've fixed the code formatting, made it clearer as to what goes where and included a working example too.

Apparently it's not supported in Internet Explorer.