Create an Awesome SquareSpace 7.1 Site: CSS Customization Secrets | Kara Ferreira | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create an Awesome SquareSpace 7.1 Site: CSS Customization Secrets

teacher avatar Kara Ferreira, Websites for Creatives & Coaches

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (43m)
    • 1. Introduction

      2:23
    • 2. Code Demonstratkin

      1:16
    • 3. Setting Up Your Account & Pages

      3:38
    • 4. Editing Header Menu, Color Palette, Fonts

      4:38
    • 5. Adding Content to Your Pages

      8:49
    • 6. Customizing with CSS Code

      5:22
    • 7. Making Changes After Adding Code

      3:01
    • 8. How to Style Your Newsletter Form with CSS

      4:06
    • 9. How to Style Your Contact Form with CSS

      3:36
    • 10. Removing the Underline in Header & Footer

      1:13
    • 11. Adding Images to Your Blog

      2:13
    • 12. Changing Your Logo Color on Different Pages

      1:47
    • 13. Wrapping Up!

      0:38
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

359

Students

2

Projects

About This Class

If you're new to SquareSpace, or looking to optimize a new SquareSpace site, then this course is for you! In this course, we'll be working with SquareSpace 7.1. If you created your website after January 13, 2020, you will be working with SquareSpace 7.1. 

(If you created your website before January 2020 - or if you want more design flexibility - I suggest checking out my other course for 7.0, Create a Next Level SquareSpace Site here.)

SquareSpace 7.1 incorporates pre-made layouts that enable even the most novice website designers to create great looking website pages. In this course, we'll take it further by customizing the header and footer of your website and adding cool CSS tricks.

We'll go over:

  • setting colors and fonts in SquareSpace 7.1
  • editing the color of your navigation menu for more options than are available in the presets
  • removing the underline in links in the header and footer for a cleaner aesthetic
  • customizing heading (title) fonts with color backgrounds¬†
  • making heading (title) fonts appear vertically
  • how to add images to blog posts in SquareSpace 7.1
  • how to edit contact forms to make them pop with CSS code
  • how to style your newsletter forms with CSS code to make them look more professional
  • how to change your logo color on different pages

When you're done with this course, you will have three pages set up (Home, Blog and Contact) - and you'll have all the tools you need to build out any and all pages you website might need. What's more, your site will no longer have a cookie cutter feel because you'll have fully customized it using CSS tricks!

Meet Your Teacher

Teacher Profile Image

Kara Ferreira

Websites for Creatives & Coaches

Teacher

I’m Kara - owner of Kara +Co Creative (kcocreative.com), a website design shop for solopreneurs and creatives. I’m passionate about enabling entrepreneurs to take control of their own websites. I’ve been designing websites since I needed to make one for my health coaching business five years ago - and since then I’ve built over 100 websites on both WordPress and SquareSpace. As a self-taught designer & developer, I know what it’s like to feel stuck and unable to create the website you envision for your business. In my classes, I’ll give you all the tools you need to change that!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi, Kara here from well and Wonderful, the online designed shop for women entrepreneurs. Although I do work with some men as well, I'm here today with a square space skill share course. This one is for squarespace 7.1 If you have a squarespace 7.0 site one that you started before January 13th 2020. You want to check out my other sculpture course, create a next level squarespace site. This one will be focusing on 7.1 which was introduced around January 13th 2020. It does have a different interface. It does have mawr pre designed the layout. So that's a really nice feature for those of you who may not be as advanced for those of you want more flexibility? I do You recommend going to seven point Oh, and you still can create a 7.0 site. And again, instructions for that will be in my other sculpture course. Create a next level squarespace site and this one will be doing 7.1. I'm taking over my shoulder to show you the kind of site will be creating coming myself smaller here. And if we take this out you'll see here. I've created a custom squarespace site using seven point ones. We've added features like this underline. I've added things like making V navigation here dark. All of the rest of the theme is white. Um, again, Here you have more bars and highlighting. We have vertical text. We have a shadow behind the buttons. Um, and this is all filler text, so don't get too attached to it, but this is all using one of their layouts. So it's very easy for you to replicate this, Um, and I'll show you exactly what code to use to create these other features. Like the lines behind things again here will also go into how to remove links underlines from the length of the footer and things like how to get your blog's set up with thumbnails and you'll see here again the lion feature carries through. So that's important for consistency of branding. Another neat thing here is the local. Here is black. Word has weight on the home page. I'll show you how to create that differentiation. And on the contact page here we have ah, customized form so that stylized so that it looks nice and pretty, and this is also a customized newsletter. Sign up. So it's a lot of customization, a lot of sort of advanced formatting that will make you or 7.1 square space site pop and look more professional. So join me in this course and I'll show you exactly how to do it. 2. Code Demonstratkin: So this is the website that I showed you in the production. Um, with all of these features that I'll show you exactly how it was made. You'll see if I come in here to design and custom CSS that there is a whole lot of code in here. So I'm gonna show you exactly how to add in this code. You have the code yourself in your cheat sheet. Um, I'm gonna go ahead and basically recreate this look and you'll be able to customize the colors, funds and all of that images as we go. So the first thing I'm gonna do is actually delete all of this. So you'll see this makes things look a bit different. A little bit clunkier, a little bit less branded. Um, you'll see now the contact form. That was the old formatting. There it went. Now you see the regular formatting, and this is the, um, subscribe to our newsletter. So it's save canceled. I'm gonna start brand new site for you guys. It was just to demonstrate what this code is going to do for you, um, and join me in the next lesson, and I'm going to get into actually how to start this from scratch. 3. Setting Up Your Account & Pages: here we are. If you are new to squarespace, when you log into your account, you're not going to see a bunch of websites like I have here. Um, And if you're creating a new account, it's gonna walk you through this process as we go. I'm gonna go ahead and do you create a site, appear? I'm gonna say it's health and beauty. I m s a next, um, market myself or my business next growing an existing business. Whatever. Um, pick your starting point. I'm going to start with Paloma. This won't matter so much, which everyone you want to choose will be fine. Um, but I like the font presets on Paloma. So here, we're gonna call it Square space 7.1 demo. Hit the caps lock. All right, that's just getting some tutorial. All right, so here we are. Now, we have this all pre created. We have a lot of stuff in here. Um, I am not gonna use almost any of this, actually. So I'm gonna go ahead and delete episodes dally about from home. Up here, you'll see in squarespace that any of the navigation it won't show like, see, donate is not up here. You have to move up into Maine Navigation. Um, it is showing here because of via button, um, feature in the menu. So we'll go into how to change that in a minute. Um, actually, don't love the layout of this home page, So I'm gonna go ahead and create a new page page with layouts. And here, let's see. Gonna try to find the one that I used before. All right. This will be fine. We're gonna go and use this one. We're gonna call this home instead Order, and it'll delete this One. Can't leave the home page. So instead of work. And I make this the home page by going to settings said his home page. Close. Now, we can delete this now to use any of these pages that have demo next to it, you'll need to hit the gear icon. So now you see Demo went away again. Gear icon Devil went away. All right, so now we basically have the start of what I had before, and now we'll get back into customizing it. Our pages are already You will end up having one about page, but you're basically style. That the way you do the home. So for the purposes of this tutorial, I'm gonna show you how to do home block and contact. And then you can replicate the process for creating the home page for creating your other pages. 4. Editing Header Menu, Color Palette, Fonts: don't know that you have the pages that you need. You likely want to customize some of this. Maybe you have a logo. You just want to use the site title. Um, maybe you want to change some of these features in here, so we're gonna go ahead and come to edit at its site. Header site. Title in logo is where you can upload your own logo. If you have one, go to Dio. Wait. See, it's pretty small. So we're gonna go ahead and make it bigger back. Um Then we're gonna go down here to header layout here. You can change if you want to change where the menu appears compared to the buttons and everything. I'm going to do this one in this version. If we go to elements here, we might change this to no, Sorry. Clicked out of there. So at it's a header. Again, elements work with me. And here's what will change the link. We still have a donate page in the unlinked pages. Um, but we can go ahead and change that page at a later time. We'll go ahead and do that. Now if you want all of your stuff to be dark, for instance. So we're gonna hit, done save. If you want all of this text to be black was going to be different color where you were going to change. That is in the design colors. And this will change color presets for the entire website. So you'll see here. You wanna edit the pellet? I'm gonna choose this one instead, you see here the button changed colors. You can also change the page in to late. Bold. See, Now there's a background color. Black minimal. It'll have a black background. Um, I like white gold myself most of the time. We're gonna keep that if you want to change the funds. This has a lot of serif fonts in this theme or template, the Paloma template. So we gotta funds. I want to do mixed. Not seeing this update yet. Clooney. Here we go. They're changed twice. All right, so I'm going to say yes, I like that. This once San serif the menu did with that option, you can do your own custom parents if you'd like. Um, but this kind of is a great way of finding things that we know pair nicely together. because the squarespace design experts already paired them for you. Some say yes. Okay, I like those funds. So now that we did be heading and the funds, um, the one other thing that we might start to do is say I like my logo white, but actually want this to be black. And that's where our first bit of CSS code is gonna come in handy. So I'm gonna jump over here. This is how you change your navigation color outside of the presets, which was that color palette we just chose. So you would copy everything. What you see highlighted here are colors that can be changed using typically you want to use for black and for your primary colors, you can use the word. Otherwise you can use hex codes. So I'm gonna go ahead and come to our custom CSS panel and move me out of the way. I'm gonna go ahead and say this. I want money to be black, and now you see it, iss, um, this is a very violet violet, so I'm going to say gray nice. It's great. All right, so that's that next will start customizing the images and start to do some of these other um sort of advanced customization 5. Adding Content to Your Pages: So now I'm gonna start making changes to the actual page. So to do that were to come to edit, I'm gonna change the background image. So I'm gonna go ahead and click on this guy and go to background Middle eat. I'm gonna upload my own. And so I can try to make this as close to the demo that I showed you in the introduction. I'm gonna come to stock photos here and grab that image that I used. Take a minute, upload. All right, that would go Get out of that. Um, so we'll see how some of the Texas a little bit harder to see on this. One thing you can dio is now that you have your header image in there, you can come to colors and you can change some of this. It'll start toe look different with be, um, image in there. So wait, minimal default applies a little bit of an overlay so that the funds pop a bit more. So I think I'm gonna go with that. I mean it save. And then I'm gonna come back in here to edit some more. Now, one thing I don't like buttons in the header. That's a distraction. You don't design a huge home page just to have a but and take you somewhere else. So I'm gonna go ahead and delete that. I'm gonna start style izing some of this other stuff. Um, I don't want this to be large. I'm gonna go small. And for you, this might be something that you're offering. This might be a title here. Make that one medium, and then this might be about how to work with you. And then we might add just element over here by coming to see where is our buttons. I just want to add a button. Oh, and burial. Uh, so have a section. So that's me being so used to seven point. Oh, So where you saw my error? I added a blank section by adding a new section, and he was plus sign, and I need to delete it. So if you want to add just a but with in a section, you're going to do it the same way you would do within 7.0 by hitting this teardrop, and then we have a button. All right? Yeah. So that's that. I actually do want toe klik out of here. All right, so I'm gonna add a spacer, and then I'm gonna get that This is gonna be for that vertical feature you saw before. So I want to make sure that these two text things air separated text, all right. And then I'm actually gonna bring this to the side of this other text. I don't over here, and I wanna move the button underneath this and get rid of the space there now. All right, we're gonna make this guy vertical, and we're gonna move this over a little bit, so this guy's gonna become vertical. Um, So there is that These guys are fine. If you want to edit this text, you just click, and you can edit This could be for individual services. Um, great things that you want to feature other pages and have people click over to those other pages. Um, these features are really nice for that. Um, So I was going to change. The image is there And this I'm gonna riyadh the tagline, and I'm to change this image also by going to background delete. Gonna add a different thing. This guy over here. OK, my bad I navigated away. Don't do that. Squarespace doesn't like it. I was looking at the other things. Select this guy again. Give it time to fully upload. All right, there we go. So that's good. We have this updates. The footer you'll see here is unlike in 7.0 where you have your own foot or menu. Here the menu is created just with links to handle. Eat all of that. And I'm going to go ahead and delete this. Um, and I shouldn't leave that The one thing that, um I didn't love this guy in mind, so actually chose a different, um footer format. So here, I'm gonna dio this guy and here, instead of having these links, I'm gonna dio the social follow. So there you'll see now that they're here. And now I can delete this, Um, because in this, um, format that I have in this one as opposed to the other My demo that I showed you the beginning. I want to put either an image or a background behind this guy or behind the footer. Someone had a foot on to make the foot or color limps. It looked too much at it. Footer. Okay, this is accent dark. So that's how we change the colors in the footer. All right? Perfect. Now the last thing will dio, you'll edit all of this text to be what you needed to be. Last thing I'm gonna do is go ahead and edit these images and to swap them out. The demo images are very large, so if you smaller images, they will look a little bit different. So they're gonna take a blessed space. I personally like that. I think the images are a bit too on large in the demo. So I'm gonna go with horizontal images as opposed to two vertical ones. Perfect. And again with this one. Don't don't don't. In final image of a computer perfect this one. All right, so this page is done, and we're gonna make it a little bit special with the extra coated features which I'll get into in the next section. 6. Customizing with CSS Code: right. So now you've really gone through and you've created your page, and it's time to sort of add those coated features that make this very customized and personally styled website. So I'm going to take you over my shoulder again and show you how to add all the CSS code to change some of these elements. All right, so the first thing we're gonna do is add that sort of color block behind this. And so if you come down here, you'll see this. So this is gonna add sort of the underlying feature to it. So I'm just gonna actually go ahead and grab this again. Where you can do is change the colors, anything that is highlighted on this sheet. So come out of this part to come down, move myself out of the way, Custom CSS. And we're gonna add this here. You see, that adds this line. And what this did also wasn't made the font black because I didn't like it white on this particular image. So that part is here Color black important and his colon. If you don't want to change the font color, you just want the line you can delete that part and just have that start with background with envies parentheses. You can play with what it looks like when you remove one of these 50% or the other. So if I take out 50% here, for instance, you'll see it makes this kind of cool blur feature. What? They got 50% here. It makes it even more subtle. If I add 50% just up here, it's again subtle. And you can make this transparent white, for instance, if you want more of a highlighted effect. But there's a lot of fun things you can dio Um, so that will go on all of the H ones, the large subheadings, and that also will be on the blawg. So if I hit save here and we come over to block quick, you'll see that the highlight is here, too, because the the font here isn't each one fund that was the first little bit of code. The next thing we're gonna dio is we're gonna also going to do it at it behind he each twos , and that's gonna change it on these images here. So now we have it here and down here and also came onto the newsletter portion here, Um, and I'll show you how to make this styled a little bit nice more nicely. Another we have that color black on it. Finally, on my demo. I have this little vertical text feature here that was here. So I'm gonna go ahead and grab that code that's here. And please be aware this is not going to take effect on the cellphone size screen. It'll just be on the, um, tablet and desktop so that when I had and it made this background also All right, so we have the color. All right, so that are all those features for the speech. Next thing we did on my demo as we gave this, but in a shadow, So we'll grab this. This creates a little shadow on that button. See, please. No, it's not gonna effect on these ones because these are image cards right now, I haven't been able to figure out how to make the image card shadow work. Well, um, because you'll see if I try this. Actually, if I dio image card, it creates the shadow behind it. Image button. It does this all the way to the science I've been playing with that I haven't figured out in 7.1. If I do figure it out, I will update the CSS sheet with this course and will be able to do it. But for now, I'm unable to. So right now, just this button I also provided you with code to do a border ingredient Outline fell. So instead of that, if you want to have a different look for that But in see this and it does the greedy int on this. So this is ah, sort of a great a black radiant. You can change all of these colors. Um, if you leave the white background in here, it'll be outlined on regular. But you can change these colors to make it brighter. I'm gonna go ahead and go back with this guy. So that's that. I have an extra dot, which is why I that did not change. And then the last thing we have here are, um so this one has s I'm going to go ahead and it's safe and clean up a little bit of this now. Um, and we'll actually just so that's adjustable. I'll end this video and we'll get into how to clean up some of this stuff in the next one. All right, so meet me back here. 7. Making Changes After Adding Code: All right. So we started adding our code and a few things got a little wonky. First, the way that this is split up because of the way it's styled gonna come in here and have at it now, this doesn't look so bad when it's full screen. Just be aware that depending on the screen size, it's not always going to look that way if you like the way this looks totally fine, leave it. If not been coming here and hit at it and just like the title shorter, sign up and then you can add in more text here. Joy in the mailing list for V I. P treatment, you will have more thoughtfully worded out text, but there will add that so that you'll be able to see it, Um, and will hit apply. Okay, It's since I got in here. It wants me toe storage. So we're going to say that we're gonna use squarespace campaigns for now. All right, now, that little bit better to me. Um, the next thing that was a bit weird was this site titles now floating out over here. If you want to leave it vertical, you can, um we're gonna do is I wonder why it's all over there, Actually, if you Yes. So you can't leave it like that. It kind of looks awkward, but what we're gonna do is if you change this heading fund a little bit hard to select because it is vertical. There we go, and we change it to a large heading. I don't have the issue. Now we have this, um, bar, which, actually, it's kind of a nice feature. Um, so remember H one and H two. They're gonna have the bar and medium, and it's gonna be a vertical small heading. Will. Sorry, I just change these. That's not what I wanted. Medium paragraph. If we don't want any bar. Small heading is the one that will do for for this guy. So, Alice, Keira Ferrera LLC. I actually do like the bars. I'm gonna go ahead and make that back into H two. All right, So now we're gonna hit, done, save. We'll make this go out big so you can see what it looks like. So here we have it. All right. Next, I'm gonna show you how to clean up some of this a bit further how to further, um, style this newsletter form. Excuse me? My brains a little bit fried being home alone during Cove in 19 with a 13 month old, most the time. Um, so if you're watching this during the Corona virus scare, that's why I'm a little bit Laghi, but, um, join me in the next one, and I'll show you how to further style this newsletter form. 8. How to Style Your Newsletter Form with CSS: All right. So, as promised, we're back in here. I'm gonna show you how toe edit this a little bit more. I'm gonna come in here and grab code. This is the news letter form. So we're gonna grab this guy here. You'll see this edit set. So it's like this. I quite like that. Um, you can also add background to the form field right here has none in it. But if you want to dio but cl grab a color. One of my color codes. So I grabbed this guy here So you can do this if you like Teoh, or you can get any color you like. I'm gonna leave it just the black line. So I'm gonna go ahead and delete this guy here. All right? So I like the way that looks. I'm also gonna go ahead and create another version of that on the contact page. So we're gonna go ahead and edit this page a little bit. I'm gonna get rid of you. Remove and here I'm going to add page content. Um, and then here we should have contact so you can find a sale. You lake. I quite like this guy. here. I'm gonna add that, um and the nice thing here actually is If you've noticed, it will actually show things based on the code that's already in there. So you see, this is all vertical. So if you like that, you can keep that, um, in its vertical, and it's highlighted, so you'll see what it looks like. Um, based on the C s s co that's already in there. That's a nice feature that wasn't part of the seven point. Oh, I'm gonna add a newsletter form to the bottom of this page also on one with an image this time. So I'm gonna grab this one. So here, I'm gonna change the background, wait for it to loads likened elite apple it a new one of UK there. Try to find another image like this one. Give it a second and wait for it. Pardon the weight. Sometimes the recording software makes this a little extra slow. Very Oh, so now that is in there. Um, for this guy, you'll see the Texas kind of very light. So I'm gonna go in here on on the section do colors. I'm in a kind of play around with these until I find one. Harry goes I like this has the, um the words there are more easily seen. Yeah, All right. So I'm gonna go ahead and hit, save, and then if you'd like, you can leave this white box there. I'm gonna show you how to get rid of it, though, if you don't want it there. So if you don't want it, they're gonna go ahead and grab this code again for the background, and you're going to leave it with none. And that way it will not show here and also won't show on the home page where it just has a white background. It's still not gonna have anything here. Um, so yeah. So now that's how you would style the newsletter. Form two ways. One with the background, one without, um, and I'm gonna go ahead and come back and show you how to style this contact form. That's a little bit different that we just added in there. All right, so join me in the next one 9. How to Style Your Contact Form with CSS: All right, so we're back in here and we're ready to style this newsletter form. I have the code for that and here as well. So to grab that, we're gonna come up here and go to contact form field backgrounds. Make sure you're grabbing contact form, not newsletter form. And we'll add that here. So now you'll see these have backgrounds. Um, the next thing I'll do is add a line as well to sort of keep within that, um, sort of branding style. Add that there. If you want to have a line around the entire box, what you'll do is instead of having none here for right, you'll also hit two p x for left. You also hit two p x for top. You also hit two p x, and you've also sorry that's what's not missing here is got at this solid black important. So you see, now it's on the top. And so here you could add solid black, solid black. So now you'll see it's outlining the entire box. I'm gonna go ahead and reverse that, and I'm just gonna do that by actually pasting what I had before so you can see. But That's just to show you that you can play around with having the outline around the entire field or just part of it. Um, so that's that. The next thing I want to do is play with this, but in a little bit. So to do that button, Yeah, a lot of code here for the button. But here, see its outline or it fills in. So you'll see these colors here. Background color on non hover white outline, black text black. So you can change those anything you want and then on hover have the background color, be this and then still have the outline and the text be black. So that's what that code is telling you. You can change any of those colors, and you can reverse whether or not you want it to be colored before hovered or not by just sort of playing around with this and reversing those things. So that's that. I'm gonna go ahead and click on this so that it doesn't give us that. No, I would say it first, them and at it for this guy. And I'm gonna change the storage on this. What stops giving me the exclamation point. Okay, so I'm just gonna dio kara that well, wonderful dot com connect. So now there will be no more exclamation point in that. And then for this one, I'm going to connect storage. You can also connect your mail tip account and then if you're using Zap, you can connect other male things. All right, save. But now you'll see it's nicely styled contact form and that self styled as well. All right. Next will show us a few other housekeeping things we can do, like removing the lions here. I don't like those, so join me in that section if you want to remove the underlines in the header and a footer . 10. Removing the Underline in Header & Footer: all right. So as I mentioned, there are these underlines in the footer that bother me on the links. And there is also an underlying here, which I don't mind, but some people might not like that. So I'll show you the code for both of those things. If you want to remove them, the header one is up at the top of your sheet. Remove, header, underline and navigation. So we'll go ahead and grab that copy and we're gonna exit full screen, get back into our CSS window and go down to the bottom. I like to make sure I'm on a new new line. You'll see there that went away and then the bottom that code to find that remove footer link underlying. So that's here. And now those are gone. That's bad, But a bit of housekeeping. The next thing that's kind of a big deal. Well, it's safe. Forget is the block page there no thumbnails and also went missing this year. So I'll show you how to format the blawg in 7.1 so that you have thumbnail images on this page. Um, and we'll go from there. All right, 11. Adding Images to Your Blog: All right, So we're back on the block page and we have this line here, which I quite like. The one thing that we're missing is a thumbnail image for all of these posts. If your new disgrace based or for you to 7.1, it is a bit different. How to add this. I'm gonna go ahead and click on this post. And when you're looking at the Post, I hear it's not to get at it and cure icon. And then this is where this window pulls up that you'll be familiar with. If you've you 7.0. If not you goto options and you can add your image here. Poem a panel of image. We'll do that. I will wait for it. These are some rather large stock photos that I have in that folder. If you have smaller photos, it won't take quite us long to load. Um, so there's that will be on the thumbnail, but you'll see it's not added to the page. If you do want a large header image, you. Let's put that in here. And here we can upload that same image. Alright, Snow ever imagined there and see this nice little line goes there to, um, all right. By now, if we go to the blogged page, this post has a thumbnail. And so you would click on this one and do the same thing to get your thumbnail on that next page. All right, so that is for the blood. 12. Changing Your Logo Color on Different Pages: Okay, so we'll take a little quick look at the site. It's looking pretty good to me. It has sort of these little customization. Is that really make it look professional on and customized? If we go to bloggers, though, you'll see this little hitch where now my leg wasn't show and I'm contact as well. Still no logo a mess because I wanted the white logo on this background image. But it's not showing on the white background of the other pages. There is a fix for that which I will show you now. Um, and just as a housekeeping note, um, if your logo, for instance, right now, I need to be black on most of the pages, just white on one page. What actually should do is upload the black logo and do this code trick just on the home page. But instead, I'm gonna do the code trick on all these other page Islamic what logo available. But for you, you should upload the logo that's going to be on most of the pages and then do this inversion trick on just the pages that you need it. So this is the code here, and only get CSS. I believe it's actually Java script. Um, and we're gonna put that code in a difference place by going to page settings, advanced page header code injection and adding it there. Hit, save and again on contact. We need it. So advanced header code opened right up save. And now you'll see. When I go to blogged, I have the black version and contact the black version. This really works well with solid white or solid black logos. It won't work quite as well with colored logos. It's a 100% inversion, whatever the color is. Um, so white and black works very well. Colors don't work quite as well. Um, that have, you know, But if you have a white or black logo, this is a really neat fix. Um, so there you have it. 13. Wrapping Up!: All right. So hopefully you've been with me for all of these steps you've walked through, adding with CSS code to each section, and now you have a squarespace 7.1 site that's really customized and reflective of your brand. So go ahead. Please take a screenshot, um, of different parts of your site for the class project. I'm asking for either the newsletter up or your contact form, since that's where these customization will be sort of the starkest if you're using them. Um, you're also welcome to drop in the earl of your site so that I can review the entire thing . But hopefully this has sort of landed you with a next level 7.1 website. Thanks for being here and stay tuned for the next course.