Superstyle Squarespace Sites with 6 Simple CSS Snippets

1. Introduction: Hi there, I'm Kyle. I tried to spend as much time as I can road tripping around the country with my wife and my dogs. Taking in all there is to see, eating vegan doughnuts and drinking a lot of great coffee. But when I'm not doing that, I spend my time building websites for small businesses on Squarespace. In fact, I've built over a 100 Squarespace websites in the past three years alone for clients in a wide variety of industries, ranging from construction to commercial furniture, to bakeries, and even animal rescue organizations. Over the course of building these many Squarespace sites, I've come up with a set of CSS code snippets that I install into all of my sites from the beginning to make sure I get everything looking the way I like it. I'm not a developer, but I figured out some minor CSS to help clean up some of the items in Squarespace that I think could be better and I'm going to show you how to do that too. This class is for anyone who designs or manages Squarespace websites and wants them to look top notch. You don't need to know how to code, you don't even need to know what CSS is. I give you all the code you'll need in a downloadable PDF document. All you have to do is follow the directions to get the look you want. For your class project, I encourage you to add at least three of these snippets to a Squarespace site you're building or that you manage and share a link to the site on the class page so that we can all see your work. These CSS snippets work on all Squarespace plans. To the best of my knowledge, all Squarespace templates. All you'll need to get started is a Squarespace website, including a free trial would be fine and the PDF download I've provided that contains the snippets of code you'll be installing. Once you have those items ready to go, let's get started. 2. Horizontal Rule Styling: The first CSS Snippet we'll be inserting will be for horizontal rule styling, or as Squarespace likes to call it, a line block. Line blocks or horizontal rules are commonly used to break up text or section off headings, or just create space on a website. You can go ahead and go on to any page on your site, insert a block. It's going to be the line block. I'm going to put two of them here so you can see. Now, Squarespace line blocks only allow you to have completely horizontal 100 percent fill and they're usually pretty thin, about a pixel or two, and so we're going to insert a little snippet of code where you can change the color, the thickness, and the width. In many of the templates on Squarespace, you can already change the color, but some of them, you can't even do that. Once you've got those line blocks in your page, go over to the CSS download I've provided, horizontal rule styling. Go ahead and highlight that code, copy it, go back to Squarespace, you want to go to the Design tab, go to Custom CSS, and then just paste it. There, you see what happened when we pasted that CSS in there. Now, you can change the thickness of it by changing this first line height. If you want to do really thick, you can put it up to, say, 15. Or like I said, you could go down to a more standard three or so. The width here can be done in percentage or pixel. You could go and put it at something like 200px. Now, it's important to notice that when you do this, some of the templates will automatically make it left justified, so you can change this last margin command based on that. You can take that out completely. See, I'm working with a template that doesn't have it left justified so when you put it in a margin command, it actually justifies it over to the left further. But if you have a template you're working with that does left justify it when you make the width smaller, you'll need to keep that last margin one in there and then margin-left 25 percent will make it so it centers. But for mine, I'm going to keep that out. This background color is where you can choose a hex color or you can just type in a standard color if you want, like red. There you go. You can use this at, well, anytime you put this in your site now, you can go and add another one. It will be the exact same. We're going to put one up here, above that, and there you go. That's how you're going to style your horizontal rule line blocks in Squarespace with this custom CSS simple snippet. 3. Wrap Grid Gallery Titles: The second CSS snippet we're going to add to the site in order to super style any generic Squarespace site is command to wrap the grid titles. Now if you've added any grid galleries to a Squarespace site and you've had any captioned or titles that are longer than the width of the photo itself, you'll realize that you quickly get these ellipses right here and it cuts off. What we're going to do is we're going to enter a small CSS snippet that will wrap those around and show just like any old full-length title. You're going to go into the Design tab on Squarespace, go to Custom CSS. Go to the CSS download. I've provided, wrap grid titles. Go ahead and highlight that code. Go back to Squarespace and just paste it. You'll see what that does. Then it adds the command, which with the whitespace normal allows it to wrap and you get to see the full caption there. Full title. You can change out the line height here if you'd like to make those lines a little tighter, maybe 1.2 or go up to 1.8 if you think it looks cleaner. But either way, you now have all of your captions showing. This will happen no matter what screen size you're choosing. If you go to a mobile check, you'll still see it. It works out really well.It should be noted that if you're looking at it on mobile here, you may have some problem if you have these lines where there's two images on line and one goes down to two lines and the other one doesn't. It'll throw off the spacing here to bump that down to another line.I actually have a different CSS snippet coming up later that will take care of that as well and make things look really clean on mobile. Right now we're going to put it back to desktop. You can see that now you're able to view all your titles. Make sure you save it. 4. Consistent Button Widths: Our third CSS snippet, we're going to add is going to be one quick line of code in order to standardize the button widths. If you're using any buttons on your site, no matter what size they are, you'll notice that square spaces automatic setting for the buttons is to have them default to a width of whatever that text length is that you put in it, so other than if you have spacers around it or if it's really long and it goes down to a second line, it's going to be the width of the text that's inside of it and you can see that here. When you have two on the same line or even on the same page that are varying in length, it can look a little sloppy like we have here. So all we're going to do is add one quick line of code that standardizes that. As usual, we're going to go into the Custom CSS term here. We're going to go to the document I've provided. We're going to go to "Button Width" here, copy and paste that code. Go back to "Squarespace" and enter it in there and you'll see that they are now standardized. You can do this code based on a width of percentage like we have here, 80, or you could change it to a pixel quantity such as 400 say. Now you'll see that when you change the pixel quantity, it will be static at that. So you can have some overlap here depending on your screen size which is not ideal. So I'd recommend using a percentage and I'd also recommend keeping it closer to or at least under 90 or so percent. Otherwise, you'll have some spacing issues when you come to mobile and whatnot. You can use this on any of the blocks, any of the button sizes but if you want to make it only for one size, you can add a double dash after the element and then the size of the block, so small and you'll notice I'm using medium blocks here so you notice when I put the small in, it actually changes them back to normal because we are only applying to the small but if I enter medium here you'll see it go back there. So this is a great way to standardize all your button blocks on your site and make everything look nice and clean. 5. Remove Hyphenation: For our fourth CSS snippet, we're going to enter a little bit of code that will get rid of these pesky hyphenations that Squarespace does on smaller screens. You'll often see this if you're using a large font, an H1 or H2 that you've styled to be large often on the landing page or heading. When you're really trying to make an impact on the reader with some large font and short simple sentences, which is super common these days, and usually looks pretty good. The problem with Squarespace is when you have large texts like this with executing your architectural vision, which is something I used on a client's website. You go to the mobile view, you'll see that it hyphenates words naturally and you don't really get to pick where that happens obviously. It's something Squarespace does. But I've got a simple code here. We're just going to go to Design as usual, Custom CSS section. We're going to go to the Download that I've provided, go to Remove Hyphenation, copy that code, come back over here, paste in the CSS, and look at that. There goes your hyphenation. Its disappeared. You can do this. You'll see this is for regular font, the H1, the H2, the H3s. If for some reason you wanted them to hyphenate in some font types and not others, you can eliminate some of these, but for now you've got it all cleared up so you don't see that hyphenation anymore in smaller screens. 6. Force Single Image Rows on Mobile Grid Galleries: The fifth CSS snippet I've provided and that where going to style our Squarespace sites with, is going to be a snippet that I think is a feature that is super necessary in today's world where we're so used to scrolling vertically on our phones to view products and images, and that's a command to force all grid galleries into single image rows on mobile. If you've worked in Squarespace before, you'll know that when you have a grid gallery here like such, when you go to the mobile view, you will automatically be forced to have two images per row, and if you're using the code snippet I've provided in less than two to wrap your titles down to the second line or third line, that can throw off some spacing here on mobile. But we've got a solution for both of that, and that's to force one image per row so that each image gets as much space as it can and provides a nice clear image to your viewers. We've got this, we're going to go back to desktop view because Squarespace doesn't like it when I add the code in the mobile view. But we're just going to go to the document I've provided. For single image rows on mobile grid galleries. Go ahead and copy and paste that. I already had a copy and so I'm going to go in here and paste it. You won't see anything here when you're in the desktop view because I've got this media query set at 640 pixels so it will start to work when you're under 640 pixels. You can change that up as you see fit. But I'd probably recommend you keep at around 640. If you wanted to go down to really small screens, you could do something like 320. If you wanted to go up to encompass even smaller tablets, you can go to something like 960. But I like it at 640, I think that's a good breaking point. Now that you've got that in there, if you just go and look at the mobile view, you'll see that these are now all single image rows and so you've got a lot cleaner, larger photos, your captions look better, and you've got these all set. This is really great for any product shots, as well as just photos that you have. 7. Center Image Captions: The sixth and final snippet of CSS we'll be inserting into our Squarespace site is a very simple line of code designed just to center image captions, Squarespace defaults to left align image captions. So as you'll see here, I've got two images on the page. You can see the small image captions here are left aligned and that just looks a little funky especially when you have images with white backgrounds and you can't tell how wide they go. Like in this case over here, it looks quite a bit off from where it should be. So I'm going to go into the Design tab again, custom CSS, the same place we've been doing all of them. Go to the downloadable document I've provided. Center image caption, that's the last one. Go ahead and copy that. Paste it right into CSS and you'll see they moved to the center there. That's all you need to do to keep it centered. If you wanted to have it align right for some style touch, you could just replace this center right here with right, and there you go. But I only recommend that if you're doing it for a certain reason, that'll work better if you don't have white backgrounds. As you can see, this throws it off quite a bit if you're going left or right aligned. So like I said, just go with center. It's a great way to make everything look consistent throughout all your images and there you have it. That's everything that we've talked about it in our six CSS snippets for Squarespace sites that help you super style or otherwise generic site. If you've enjoyed this, learned anything, please hit the Follow button from my profile as I'll be teaching more Squarespace classes coming up. Thanks for watching.