Juci Kisistok: Create a Wow-worthy MV with CSS (and 1 easy trick to try today)

Hey there, Juci here from Code and Glitter. And if this is the first time that we meet, let me just quickly introduce myself. As I said, my name is Juci, and I’m a member of Certified Partner.

I’m a strategist Tech VA and an overall code enthusiast and total nerd. And this is exactly why we are here today because I want to show you a couple of cool tricks that you can use right away to elevate the fabulousness of your MemberVault.

So, first of all, I know that some people might freak out by the mere thought of having to code and, you know, I just want to assure you that you can absolutely do this. So if you’re doubting yourself, don’t, I’m going to give you very, very specific instructions and code snippets that you can go and implement right after this training is done. Okay.

Here, we have my MemberVault account, you can see that it is pretty customised. Yeah, I did spend a bit of time on this. But if you look at this version, this is how it would look if I didn’t write a single line of code, okay, so you can see that the difference is quite stark, the end product. So the design version is very colourful and bold and represents my brand and who I am as a human much better than then this version.

So what we are going to do today is to learn a couple of tricks, a couple of very quick and easy tricks that you can use to sort of reflect your bat brand better instantly. Okay, so I was thinking that we could give A different header colour here. So you can see that this white, white header and white background is kind of just merging together and I really prefer to have these beautiful colour blocks. So that’s what we’re going to do. And then down here we have the footer which also kind of blends in with everything else that’s going on.

So we’re going to go ahead and give this a bit of a facelift. Okay. And just to give you another way of inspiring yourself, I want to show you another account that that I worked on. This is the account of Linda Hamilton Ross. And here you can see also these beautiful colour blocks that I was talking about. We did add some custom fonts and down here you can see this amazing gradient golden background.

And if you have ever thought that gradients are cool, then you’re in luck because we are also going to cover how you can create a gradient background for your footer area. So, this is what we are going to do, okay and again, I am going to give you the code and I am going to explain what that means.

Let’s start with the header. Here I may want this low purple that I have in the in the Hello. And in order to be able to do this, we are going to go to our MemberVault admin account, right so we go to settings and general and then we see this law Advanced Settings thing that we need to click on to get to the custom CSS box. And here’s where we are going to write our code and first All without going too much in depth, essentially, we are just going to go ahead and write header. This is going to be the selector that we are we are working with.

Essentially, the only thing that you need to know is that every element on a web page and in the MemberVault account has a an identifier. It might be a unique identifier or it may not be a unique identifier, but essentially you need a way to sort of tell which element you are targeting. And with the header. It’s quite straightforward, because we just write ‘Header’ like you know, humans speak and then we write this low curly moustache bracket and this is also very important that every time you are writing code or if you’re tweaking someone else’s code, you need to make sure that it starts and ends with these little curly brackets.

Okay, so now I’m just adding four spaces because of styling, you don’t have to do that. What we are going to do is we write and I’m just going to cheat a little bit and do a total copy paste to save a little time. So we are going to say that we want a background of this thingy and then we are writing exclamation mark important okay.

So, what is this about? Essentially we are saying that we want to target the header area, okay. And then we need to say which attributes of the header area we would like to change and in our case, this is the background colour. And so we write Background and then we follow that up with the colour code that we want. So this might be any of your brand colours essentially.

And then this important is just to sort of force this decision because there are a couple of elements that are only willing to change their appearance if you sort of apply a little force in the form of writing important and then we are we are closing with this semicolon or how you call that but it’s also very important to have this because that signifies that okay, this is the end of this section. Please understand what I’m trying to do here.

Okay. And then, we just go ahead and save and see what we have done. You can see that now I have this absolutely lovely purple background. But if there’s something that kind of bugs me as how these black icons and text are kind of blending in, so I may want to have a white font colour here and this is exactly what we are going to do.

So, we go back to our advanced settings and we can just continue right here. Again some spaces for styling because I just like how that looks. And we put this, this right here, okay, so we say colour white, important. And again, when I write white, you can put any colour code or any name of a colour that you may want, but

This is a quite an important distinction that the background attribute controls the background colour and the colour attribute controls the font colour and this is so in, you know every situation. And again, we need this important to sort of force this type of styling. You don’t always need this, but sometimes you do.

Now, let’s see what we have done. Hopefully, we have done something very pretty. So again, we refresh. And voila, we have all this white text icons, what have you so it looks quite nice and balanced now. Okay, so let’s turn our attention towards the footer.

The idea is the same really, it’s just we have to sort of target this element, the same way that we targeted the header. So it is also quite a simple one because you just write footer and then the massage brackets.

And then you start to think about what you want to do, okay? And if you have a brand like I do, that doesn’t really feature any gradients anywhere is just, you know, very bold colour blocks, then you can do the exact same thing. So you would do you know, background, red, and semicolon. Now, let’s see what we have done now. It’s, it’s not going to look amazing because it’s going to be red. It’s just I don’t know,

I just tend to default to red when I’m trying out code so as you can see, we did manage to have this background right here. Again, not beautiful, but it worked. So that’s, that’s some reason for happiness. So if you have a brand that features gradients or a brand that would benefit from a gradient, like for example, in Linda’s case, we are just sort of reflecting this gradient in her logo in the footer and it gives this beautiful continuity between these two brand elements and you know, the the site overall, then First of all, you need to find the gradient that you want to have. And for that, you can use this amazing site called CSS gradient.io. which essentially lets you see what kind of gradient you have.

Essentially, it would pick colours here, right? So, so in this area, you would put your colour codes. And then you can play with this toggle. And as you can see in this area, it shows up how it would look live. And then you kind of just, you know, tweak this until you like it.

And there are some sample gradients here that you can use as a starter gradient. But essentially you would just put the colour code that you have and and then you will toggle this slow thing here to control how the gradient itself shows up. And then you have the option to have linear gradient which is like this.

The gradient would essentially go from let’s say this Add to this side or this side to this side doesn’t matter. The important thing is that it flows in a linear way. On the other hand, you can have a radial gradient, which would be a mean, by definition it is it is radial. So, it’s like looking through a, I don’t know, like a little magnifying glass, essentially, I don’t know if that analogy makes sense. Sorry, if it didn’t, but you can see the difference here.

And then, if we go back to the linear gradient, it is also possible to change the degree and it’s going to be a little difficult to see. But essentially, if you change this, you can see that as I’m changing it, the gradient itself kinda kind of changes. And this is what I was talking about that you can control. Where the gradients starts from and where and, okay.

And once you’re happy with what you’re seeing, then you just scroll down here and then you you choose this this little thing right here okay? So I do believe that the the second line is enough but we are going to use both of them for now. So essentially you just copy and paste this right back to your to your footer section. Okay. And then again we save and we hope that it worked, and indeed it did.

That is another reason for celebration. So you can sort of mix and match. For example, if you want to have this gradient in your header area, you could just use this code up here in this section. So you can just continue down here. And also, if you wanted to change the font colour in the footer, you would just go ahead, pick, like this line, and then you would copy and paste under the well within the bounds of the footer code.

Okay. So, this is essentially what I wanted to show you today, I hope that you found that approachable and I hope that you find the motivation to tweak your own CSS. And, you know, I’m just very curious to see what you’re creating.

So, if you’re trying these tips if you are tweaking your MemberVault a little bit. Make sure to post some before and afters under this video because I just love to see transformations and I would love to cheer you on. And if you have any questions, don’t hesitate to shoot. I’d be happy to answer anything that comes up. Alright, I’m hoping that you’re having a wonderful, wonderful day.

Privacy Preference Center