Jump to content

Different footers on different pages in 7.1 ( how to hide sections in a stacked footer)

Recommended Posts

Site URL: https://redesign-90-day-biz.squarespace.com/

Site Password: WhorunTheWorld2?

Hi smarties! I have a client in 7.1 who wants different pages to display different footers. Each footer has a few stacked Sections.

So, for example - on one page, it may show 3 stacked sections in the footer but on other pages, only 2 stacked sections. I'm having trouble figuring out how to target ONE specific footer section to hide/display. Do they have identifiers I'm missing?

Example - You can see 3 footer sections on the Home Page:

  1. section of footer - "how to launch your dream business in uncertain times?"
  2.  section of footer - instagram feed (currently white /blank)
  3. section of footer - classic footer w/ navy blue background, copywright info etc.

How do I hide just #1 of that footer on the HOME PAGE? But keep #2 and #3? 

Thanks so much!
Rachel

Link to comment

Password not correct

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
11 minutes ago, raeroshow said:

Ack - try it now! WhorunTheWorld2?

You will need fixed id of these section and your page id, use Find Squarespace  Ids Chrome extension to get these 4 ids, visual instruction on my blg

1. page id - Collection id

image.thumb.png.1efebf56f5e3ce7e07ddb91c50b6e235.png

2. footer section id, I help you collected 

image.png.b987c7e1deddb6d62327e1c2ca48fce4.png

These are in vertical order

  1. section of footer - "how to launch your dream business in uncertain times?"
    section[data-section-id="5fa45f47e86b2736c8aa4259"]
  2.  section of footer - instagram feed (currently white /blank)
    section[data-section-id="5f84b82f70010d188ea9a582"]
  3. section of footer - classic footer w/ navy blue background, copywright info etc.
    section[data-section-id="5f75392bb159184a34e4e225"]

To hide any of them on any page you can use this formula

[collection-id] [footer-section-id] {
	display: none ! important;
}

Real world example, your initial request

#collection-5f517693044378025220a034 section[data-section-id="5fa45f47e86b2736c8aa4259"] {
	display: none !important;
}

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

As a follow up (please ignore if you're busy, you've helped so much as is!) 

Is there an option to...

  1. Have one footer appear on blog posts ONLY but appear on no other pages? (i.e. instead of the CSS saying to hide a certain footer on every page, the CSS would say Show this footer only if the page is ___.)
  2. Display the "How to Launch Your dream business" footer on certain pages but hide it from all  on blog posts? 
  3. Distinguish between different blogs? I have 2 blogs - one called Articles and one called Case studies - and my client would like different footers on the posts from one blog vs the other.

THANKS again!

 

Link to comment
  • 5 months later...

Hi @raeroshow!
I'm looking for the same answer online, but haven't found it so far. Would you be able to share how you had one footer appear on blog posts ONLY but appear on no other pages? (Instead of hiding them everywhere else?) You mentioned using Advanced Injection Code for that. I'm curious to know what code you generated for this!
For context: I would like to show a newsletter subscription button in the footer under my blog posts only, but not in the footer of my homepage, contact page, etcetera.
Thanks in advance 🙂
 

Link to comment
18 hours ago, SophieTW said:

Hi @raeroshow!
I'm looking for the same answer online, but haven't found it so far. Would you be able to share how you had one footer appear on blog posts ONLY but appear on no other pages? (Instead of hiding them everywhere else?) You mentioned using Advanced Injection Code for that. I'm curious to know what code you generated for this!
For context: I would like to show a newsletter subscription button in the footer under my blog posts only, but not in the footer of my homepage, contact page, etcetera.
Thanks in advance 🙂
 

Can you share link to your site?

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
On 4/14/2021 at 6:42 AM, SophieTW said:

Hi @raeroshow!
I'm looking for the same answer online, but haven't found it so far. Would you be able to share how you had one footer appear on blog posts ONLY but appear on no other pages? (Instead of hiding them everywhere else?) You mentioned using Advanced Injection Code for that. I'm curious to know what code you generated for this!
For context: I would like to show a newsletter subscription button in the footer under my blog posts only, but not in the footer of my homepage, contact page, etcetera.
Thanks in advance 🙂
 

Hi @SophieTW
Here is the site: https://www.90daybusinesslaunch.com/ 
This client has specific needs for different footers on different pages, posts etc.

The first thing I did was edit the footer, adding all footer sections on top of each other.

THEN, depending on the page, I hid certain footer sections with css.

1. For regular pages (not blog posts), I would use the Squarespace ID Finder to find the ID# for the whole footer SECTION and then hide that in the CSS. (Squarespace ID FInder is the only block id tool I've seen that includes SECTION ID's (for 7.1) in addition to regular block IDs.)

For example, I added this in Custom CSS to hide one section of the footer on the home page:

#collection-5f517693044378025220a034 section[data-section-id="6064c7ac6f681445cba7a9d3"] /*hide footer on home page */ 
{
	display: none !important;
}

2. For Blog Posts, I would still use the Squarespace ID Finder to find the ID# for the whole footer SECTION and then hide that in the CSS - but I had to just put the code in a different area!
Pages --> Blog --> Settings (Gear Icon) --> Post Blog Item Code Injection. (see screenshot.)

<style> 
   /* footer changes*/
   
  section[data-section-id="5fa45f47e86b2736c8aa4259"] {
	display: none !important;
}

</style>

  

Obviously, for all of those data section IDs, you need to locate your section ID using that the Squarespace ID Finder

Hope this helps!

Rachel 

Screen Shot 2021-04-19 at 1.21.53 PM.png

Link to comment
  • 5 months later...

Hi guys !

I am trying something quite similar... it is chosing the footer i want to display depending on the language of the page using a script. I made a script for the multilanguage following the script of Brad Good. Everything works fine, i just need to display the right footer. I already made a footer with two sections within it.

The site is      lafirme .ca

For now, concerning the ccode, here is where i am....

 

/*EXCLUDE OTHER LANGUAGE FOOTER*/
  if (lang = "fr") {
  section[data-section-id="615e0033625b2043c92d327a"] {
  display: none !important;
  visibility: hidden !important;}
  }

  if (lang = "en") {
  section[data-section-id="609084d63d45de554fe899f5"] {
  display: none !important;
  visibility: hidden !important;}
  }

Could anybody please give me a hand and help me figure out what i got wrong here ?

Thank you very much to all for your time and all previous documentation !

Cheers

Link to comment
2 hours ago, Vanda-SuperBonjour said:

Could anybody please give me a hand and help me figure out what i got wrong here ?

It appears you are trying to mix Javascript and CSS. That won't work.

Add the following to Design > Custom CSS.

[data-section-id="609084d63d45de554fe899f5"],
[data-section-id="615e0033625b2043c92d327a"]

  {
  
    display : none;
                                                         
    }

.lang-show[data-section-id="609084d63d45de554fe899f5"],
.lang-show[data-section-id="615e0033625b2043c92d327a"]

  {
  
    display : flex;
                                                         
    }

Add the following to Brad's multi language code.

/*SHOW LANGUAGE FOOTER*/
  if (lang == "en")
    document.querySelector('[data-section-id="609084d63d45de554fe899f5"]').classList.add('lang-show');
  
  if (lang == "fr")
    document.querySelector('[data-section-id="615e0033625b2043c92d327a"]').classList.add('lang-show');

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
2 hours ago, Vanda-SuperBonjour said:

I did as you said, but now none of the footer section is displayed, they both disappeared.

They way the code works is to hide all footers with the CSS and then the Javascript that is added to Brad's code should display the correct footer section based on lang.

Without the code installed I can not diagnose if there is a issue with my code.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
12 hours ago, creedon said:

They way the code works is to hide all footers with the CSS and then the Javascript that is added to Brad's code should display the correct footer section based on lang.

Without the code installed I can not diagnose if there is a issue with my code.

The code is installed.  I get an error Uncaught ReferenceError: lang is not defined. Can't understand...

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.