Jump to content

Change Footer For Specific Pages

Recommended Posts

Hi!

For my personal website (and future websites) I'm looking for a way to create unique footers for specific pages. This leads me to asking two questions: 

01. Personal Website
For my personal website it's just about changing the colors (which I managed to do for the background and the text, but not the social icons, button & divider). Does anyone know what to add to the code to change these colors as well?

Site url: www.tessaveen.com/over-mij

 

02. For Future Websites
In the future - for some upcoming client projects - I'm looking for a way on how to change the text of that specific footer. For example (see screenshot): www.tevestudios.com has a title in the footer - how can I change that text or the button text on specific pages?

Thanks!

 

Screenshot 2024-03-05 at 08.13.21.png

Link to comment
  • Replies 5
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

#1. Use this code to Page Header Code Injection (page where you want to change footer color) or Code Block (if you use Personal Plan) (DO NOT ADD TO CUSTOM CSS)

<style>
  footer.sections svg {
    stroke: #f1f !important;
}

footer.sections div.button-block a {
    background-color: #f1f !important;
    color: #000 !important;
}

footer.sections hr {
    background-color: #f1f !important;
}
</style>

image.thumb.png.2d474378725c961adea44d47ca814bc6.png

#2. Which text you want to change? And which plan do you use?

Personal or Business or Commerce?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks! This almost worked, except for the social icons. I've also tried using 'fill' and 'color' and neither solution will fill the icons completely with the blue. Do you have any suggestions on what to try next?

#2 - I would like to have the option to change the titles + subtitles in the footer as well as the text in the button. Do you have any suggestions about that?

Link to comment
On 3/15/2024 at 4:05 AM, tevestudios said:

#1 - Thanks, this worked!!

#2 - Business Plan! 

Use this code to Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("footer.sections h3").html(function() { 
          return $(this).html().replace("Your brand is special.", "new text line 1");  
    });
 $("footer.sections h3").html(function() { 
          return $(this).html().replace("Let’s make it a lasting legacy!", "new text line 02");  
    });
 $("footer.sections p").html(function() { 
          return $(this).html().replace("Ready to turn your brand into a legacy?", "new para01");  
    });
$("footer.sections p").html(function() { 
          return $(this).html().replace("We’re just a message away", "new para02");  
    });
$("footer.sections button.lightbox-handle").html(function() { 
          return $(this).html().replace("Let's Work Together", "new button text");  
    });
});
</script>

image.png.4fd6f8302e2eea821dacf4e0e11f37f4.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.