Jump to content

neeklamy

Member
  • Posts

    2,655
  • Joined

  • Last visited

Community Answers

  1. neeklamy's post in How can I hide parts of a page? was marked as the answer   
    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”.
    Right click on or near the part of the page you want to hide. Select Inspect Element. In the developer tools you will see the HTML elements that make up the page. 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. 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">… 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.
    Go back to step 1 of finding elements on your page (“Going Fishing”). Once you have those elements, add them as follows: .homepage {  #headerWrapper, #footer, .sidebar {    display: none !important  }}
    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 {) Add your CSS to the Custom CSS Editor and you’re done!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.