Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
Guest

How can I edit the style settings on one page only?

Question

Guest

Essentially I want to have one page, my home page, different to the rest. Is there anyway to do this?

I don't mean change the layout or what have you, I simply want this page to have all its aspects transparent. Such as Content Background, Headings Colour, Body Text Colour, so you can just see the background image and it acts like a home page. I want to be able to change the aspects of the page without influencing or changing the whole site...

I am using the Momentum template.

Cheers

Edited by Guest

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 2

@leather0294 - The CSS you would need to paste into the custom CSS section on your site is this:


#collection-5196d546e4b0a0fe04e906ab #mainContent { display: none; } 

OR

If you decided to use the 'Page Header Code Injection' section for that particular page instead, you would paste this into the the 'Page Header Code Injection':


<style>
  #mainContent { display: none; } 
<style>    

Share this post


Link to post
  • 3

Yes, you can affect just a single page by using either the 'collection id' for that page with the 'Custom CSS' section, or by using the 'Page Header Code Injection' section for the particular page, in conjunction with some custom CSS and the various selectors.

To use the collection ID / custom CSS section you would go to the page in question, and then click the 'Manage Site' (gear icon) and then look in the URL for that page, it should look something like:

.squarespace.com/config/#module=content&collectionId=516240dfe4b0b72af94f9ff5

The bold part is the number you need to copy. Then you would go to the Custom CSS section -- 'Change Style' (paintbrush) > 'CSS' which pops open a window. You would add the collection ID before the selector you want to work with, something like this (replacing the collection ID with your own):


#collection-516240dfe4b0b72af94f9ff5 #canvas-wrapper { background-image: none; }
#collection-516240dfe4b0b72af94f9ff5 #horizontal-navigation-bar { display: none; }


If you were to use the 'Page Header Code Injection', you would instead go to the page you want to apply these changes to, then go 'Manage Site' (gear icon) > 'Page Settings' > 'Advanced' and paste this into the 'Page Header Code Injection':


<style>
   body { background-image: none; }
   #horizontal-navigation-bar { display: none; }
</style>

But in order for this to work, you need to find the various the selectors you want to hide. This can be done using the 'Inspect Element' found in Chrome and Safari, or by using the add-on 'Firebug' for Firefox. Different templates use different selector names so there's not really any way to provide the selectors without that basic information.

Edited by kale

Share this post


Link to post
  • 0
Guest

what you're saying makes sense, but I am struggling to carry it though.. my page's url is just /home so does make the first thing I put in need to be #collection-home ?

after that I am very lost. I have inspected element with chrome, but really do not know how to decipher the coding to find what right words to put in.

I simply want to make the content all disappear so you can just see the background image. Apologies, very new to this. Thanks again

Share this post


Link to post
  • 0

No, you need to find the collection ID number and use that, as I described above. You can use the 2nd method, however, if you want to avoid collection id's altogether.

It can be tricky finding all of the elements on a page, so if you post a link to the page on your site you want to remove all of the elements, I can provide the appropriate CSS.

Share this post


Link to post
  • 0
Guest

ok, I've found the collection ID #collectionId=5196d546e4b0a0fe04e906ab but I'm still lost after that point!

https://ajleather-art.squarespace.com/ is the page, but dont think you'll be able to view it as havent paid to upgrade from trail yet

Share this post


Link to post
  • 0
Guest

hero. much appreciated.

Share this post


Link to post
  • 0

I believe I want to do something similar, but with the site wide headings style. I want to change the headings in order to have captions in my galleries, but not have those changes affect a certain page on my site. I want www.joshhotz.com/aboutme to stay the same.

Thanks

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...