Custom CSS not applying on WHMCS 8?

[SpaceIgniter]

I'm editing a copy/child theme of Twenty One.

My cusom.css changes are not applying however?
I've cleared the templates cache as well.

Thank you for any advice 🙂
 

[brian!]

18 hours ago, SpaceIgniter said:

My cusom.css changes are not applying however?

you often have to add !important to the CSS changes - are you doing that?

and I assume the file is called custom.css and not cusom.css ?? 🙂

[SpaceIgniter]

10 minutes ago, brian! said:

you often have to add !important to the CSS changes - are you doing that?

and I assume the file is called custom.css and not cusom.css ?? 🙂

Hi Brian,

Yes, it was just a typo. My mistake.
I'm trying to edit the header and footer colour.
Is the custom.css file the correct place to do it?
TBH, I'm unsure where to edit it exactly. Searching hasn't helped much.

I've tried the Theme.css file as well. Not winning.
Could you possibly give me some guidance with the CSS?

Thank you,
Enjoy your weekend.

[brian!]

1 minute ago, SpaceIgniter said:

Could you possibly give me some guidance with the CSS?

it should be in the /css/custom.css file within your child theme folder - the file won't exist by default (even in the main 21 theme), but that's where WHMCS would expect to find custom.css changes.

there was a bug in v8.1 where the path to custom.css failed in certain environments (e.g Windows), but assuming that's not occurring to you, then the above should work... there was a hotfix released for that bug, though updating to v8.1.1 would probably achieve the same goal.

[SpaceIgniter]

1 minute ago, brian! said:

it should be in the /css/custom.css file within your child theme folder - the file won't exist by default (even in the main 21 theme), but that's where WHMCS would expect to find custom.css changes.

there was a bug in v8.1 where the path to custom.css failed in certain environments (e.g Windows), but assuming that's not occurring to you, then the above should work... there was a hotfix released for that bug, though updating to v8.1.1 would probably achieve the same goal.

Thanks., I updated last night. It's a Linux Server. It made no difference.

[brian!]

1 minute ago, SpaceIgniter said:

Thanks., I updated last night. It's a Linux Server. It made no difference.

any chance of CloudFlare or some other caching option preventing changes from showing immediately ??

[SpaceIgniter]

10 minutes ago, brian! said:

any chance of CloudFlare or some other caching option preventing changes from showing immediately ??

HI Brian,

I'm not signed up with CloudFlare or any other CDN or caching service.
I've taken the example from the thread you posted to test.
This is the content of the custom.css file:

Quote

 

/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
.footer {
    background-color: #000000;
  }

 

 

Edited February 12, 2021 by SpaceIgniter

[brian!]

for a child of 21, I think I posted in that thread that it should be...

footer.footer {
    background-color: #000000 !important;
  }

that for me is working in a child theme.

[SpaceIgniter]

5 minutes ago, brian! said:

for a child of 21, I think I posted in that thread that it should be...

footer.footer {
    background-color: #000000 !important;
  }

that for me is working in a child theme.

Great stuff Brian,

Really appreciate it. That sorted the problem.
I also renamed the Theme directory from twenty_one_custom to twenty-one-custom.

Could you possibly assist with the code for the Header colour too please?

Thanks so much 🙂

[SpaceIgniter]

Managed to fix the Header Brian,

Quote

 header.header {
    background-color: #(colourIchose); !important;
}

Could you please help me change the Header Links Colours?

My CSS skills aren't that good yet.

Edit: seems the Header is still stuffed. Won't change colours.

Edited February 12, 2021 by SpaceIgniter

[brian!]

41 minutes ago, SpaceIgniter said:

Could you possibly assist with the code for the Header colour too please?

depends what you're defining as the header... e. g you could copy the above code, rename footer to header and it would colour the header to black. 🙂

header.header {
    background-color: #000000 !important;
  }

if you use .navbar-light instead of header.header, then....

9 minutes ago, SpaceIgniter said:

Edit: seems the Header is still stuffed.

is that a technical term? 😜

10 minutes ago, SpaceIgniter said:

Could you please help me change the Header Links Colours?

footer.footer {
    background-color: #000000 !important;
}
  
.navbar-light {
    background-color: pink !important;
}
  
.main-navbar-wrapper {
    background-color: red !important;
}

ideally, you will probably need to  use # hex colours in those CSS lines, I was just saving time by using the colour names. 🙂

btw - right clicking on any element in the browser will be your friend for doing this... you should then be able to identify the relevant class or ID that needs to be changed.

[SpaceIgniter]

Yep. That technical term sucked 😛

Brian, you are a superhero man. Thank you so much. Looks great now 🙂