Jump to content

When do I put code in the Header/Footer and when do I not put code in the Header/Footer

Go to solution Solved by Ziggy,

Recommended Posts

Now that I have the business plan, I'm trying to read articles and understand when I should place code in my header/footer and when I should not.  EXAMPLE.  Below is the google font that I am using throughout the site.  Shouldn't this go into the header code-injection instead of the CSS design box.  I'm still researching this to see how to best implement these change.  My thought is sitewide changes can go into header code while specific ID's can go into CSS Design or even page code injection (which I think I understand but I will look up for better understanding).  Just wanted some of your professional thoughts.  Thanks.

@import url('https://fonts.googleapis.com/css?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.instrument-sans-instrument {
  font-family: "Instrument Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
h1, h2, h3, h4, p { font-family:"Instrument", sans-serif;}

// -- END FONT DESIGN CHANGE -- //
 

Link to comment
  • Replies 6
  • Views 211
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Posts

MoeTalks

Posted Images

  • Solution

It's normally good to keep style code in the CSS section as it's easier to manage and update without saving and refreshing the page to see any updates. If you add it to the header code injection you will need to adjust your code as the Custom CSS uses CSS LESS, the code injection doesn't.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy  Ok, below is an example.  I added all of these to my sitewide code injection because I want these to affect everything.  But I left anything that dealt with data-section, #collections, or #blocks in the Custom CSS portion.  Some of which could get added to a page code but I can never find where I added the code which is why I leave it i Custom CSS.  Is this the way you mean and thank you again for the response. 

 

<style>
/* changes font site wide */
@import url('https://fonts.googleapis.com/css?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.instrument-sans-instrument {
  font-family: "Instrument Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
h1, h2, h3, h4, p { font-family:"Instrument", sans-serif;}
</style>

<style>
/* Change Burger Menu Color On Mobile */
body:not(.header--menu-open) .burger-inner>div {
    background-color: white!important;
}
</style>

<style>
/* Move Over Hyperlinks */
p a {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

p a:hover {
  margin-left: 20px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}
</style>

<style>
/*smooth scroll*/
html {scroll-behavior: smooth;}
</style>

<style>
/* Header Navigation - Pill Hover Style - Ghost */
.header-nav-item a {
  padding: 0px 5px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}
.header-nav-item a:hover {
  background: black;
  padding: 0px 5px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}
</style>

<style>
/* this changes all video captions on entire site */
.video-caption-wrapper 
{text-align: center; font-size: 1rem;
padding:0!important;}

.video-caption p {
    margin: 10px 0 0!important; ;
line-height:25px;}
</style>

<style>
/* Add Shadow To Videos */
.sqs-video-wrapper {
 box-shadow: 5px 15px 5px rgba(0,0,0,0.2)
}
</style>

<style>
/* This is for <br> line break that separates the stories */
  hr {
  overflow:initial;
  &:after {
    content:'';
    width:15%;
    height:10px;
    display:block;
    background: #0b5394;
    top:-5px;
    margin:auto;
    position:relative;}
}
</style>

<style>
/* this hover affects entire site */
a {color: #0b5394!important;
text-decoration: none!important;
  font-weight:bold!important;
}
a:hover  {
     color: #0b5394!important;
  text-decoration: underline!important;
  font-weight:bold!important;
  }
</style>

<style>
/* changes header and section width of all pages and images and videos */
#header {
    max-width: 1496px;
    margin: auto;
}
section.page-section {
    max-width: 1496px;
    margin: auto;
}
</style>

Link to comment
2 hours ago, MoeTalks said:

I added all of these to my sitewide code injection because I want these to affect everything.

Custom CSS is global, anything added there will affect everything.

There's no benefit to adding any of this to the Header Code Injection.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

OUCH Oh @Ziggy that just hurts my heart 😂.  I thought I was doing something.  Thank you for looking this over I will keep reading and looking at videos to get a full understanding.  What is your buy-me-coffee link?  I appreciate you taking the time. 

Link to comment
11 hours ago, MoeTalks said:

What is your buy-me-coffee link?  I appreciate you taking the time. 

No obligation, but it's in my footer.

Buy me a coffee?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.