![]() Open the page Settings and go the the Advanced tabĪdd tags and your CSS in the “Page Header Code Injection” area It’s easier to place all that CSS here instead of scrolling through hundreds of lines of CSS in the Custom CSS panel when updates are needed. The other reason I use this area is for clients who have a very custom mobile design where we’re hiding blocks on desktop and mobile for many different elements. Some of these include different color accordions and others do not - I include the CSS in the Page Header Code Injection because it affects only the page I’m working on (and is quite lengthy). For example, I have a client who uses accordion menus on multiple sales pages. The other reason I’ll add CSS here is if a website has a lot of pages that require Custom CSS, but I don’t want to affect every page. Generally, I use this if I want to make it more difficult for people to see the code I’ve written. By adding CSS to the Page Header Code Injection area, you’re affecting the entire page, but not the whole site. This is the method I use least often for most clients (I’ll talk about an exception below) because it can be cumbersome and generally isn’t necessary. If that happens, I recommend going through the code to find out what’s not working and then add another set of Style tags around it. Occasionally, this method won’t work exactly as expected and not every change you’re making will be visible. Squarespace only know what kind of code you’re using if you tell it, so you will need to add Style tags before and after your CSS. Because this is the go-to place, Squarespace has already set it up to read CSS (no extra tags to add) and it allows the most flexibility in labeling your code for later reference. The Custom CSS panel affects the entire site, so any changes you make here will affect every page of your website (unless you tell it otherwise, as described in this post). The Custom CSS panel is designed to host any CSS changes you want to make to a site, which means that it’s easy to do without any extra steps. This is the most common place to add CSS and it’s where most tutorials will guide you to - and there’s a good reason. I’ve found that many other designers follow these same steps, so it’s a good bet that yours does too. I’m sharing these methods in the order that I prefer to use them. ![]() Whether you’re adding CSS to your own website, making edits for a client, or trying to change the existing CSS in a template, you need to know where you can add CSS and why you might choose each method.
0 Comments
Leave a Reply. |