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

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

Password not correct

Ack - try it now! WhorunTheWorld2?

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

2. footer section id, I help you collected 

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;
}

YOU ARE A GENIUS! Sorry for the delayed response. Finally tried this and it worked so well.

That chrome extension is great. I've been using a simlar one for years  (Squarespace Collection/Block Identifier) but it didn't include these sections in it. (Perhaps it hasn't updated for 7.1).  In any case -  Thank you so much! 

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!

Nevermind! I actually figured out how to do all of this using Advanced injection code in the different blogs. I should be all set. Thanks again!

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 🙂
 

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?

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 

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

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.

Hi @creedon! Thanks for your answer!

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

I tried to removed the ""display : none;"" part of the css...

And intervert the sections id. Can't figure it out ahaha.

keeping trying though. If you guys see something well you save me!

Thanks again and again anyway

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.

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

@creedon actually your code worked!

I misplaced the script! It just had to be placed inside the  $(function() {    } of Brad setting up multilanguages and language classes!

Thanks a lot !