custom.css changes are not reflecting.

[ukdeveloper]

So I copied the six template and named the folder megasix, and selected this template from within WHMCS admin panel. 

in the custom.css file for that template I've made a few small changes:

/* Change HEADER to some GREEN COLOR FOR TESTING */
.section#header {
    margin: 0;
    padding: 10px 0;
    background-color: #51d2a3 !important;
    border-radius: 5px 5px 0 0;
}

(I've also tried the below and also with and without !important etc...

/* Change HEADER to some GREEN COLOR FOR TESTING */
.header {
    margin: 0;
    padding: 10px 0;
    background-color: #51d2a3 !important;
    border-radius: 5px 5px 0 0;
}

))

Yet no changes I make to this custom.css are showing in any browser whatsoever. 

In Firefox it's reporting that the css file being loaded is  https://megadealhosting.com/billing/templates/megasix/css/all.min.css so it's referencing the right template, but no changes. 

Any ideas?

Carl.

[brian!]

Hi Carl,

1 hour ago, ukdeveloper said:

in the custom.css file for that template I've made a few small changes:

section isn't a class, so .section would be wrong... similarly, neither is header - it's an ID.

/* Change navigation bar to purple branding */
.navbar-main {background-color: #5c078e;}

/* Change HEADER to some GREEN COLOR FOR TESTING */
section#header {
    background-color: #51d2a3 !important;
}

/* Change body background to purple branding */
body {
    background-color: #5b068e;
}
#home-banner {
    background-color: #5b068e !important;
}

Edited September 18, 2020 by brian!

[ukdeveloper]

Thank you so much!!! Genius....

#imustlearncss

 

Carl.

[ukdeveloper]

So a question:

How would you reference this particular element and change it's hover colour:

Carl.

[brian!]

7 minutes ago, ukdeveloper said:

How would you reference this particular element and change it's hover colour:

 

[ukdeveloper]

It's starting to come along. Although I cannot for the life of me work out how to change certain things. I'll try and get there though. 

One thing, how would one change an image?

like the background to the "find a domain", and is there a way to change the wording should you so wish?

 

Thanks

 

Carl.

[brian!]

55 minutes ago, ukdeveloper said:

It's starting to come along. Although I cannot for the life of me work out how to change certain things. I'll try and get there though. 

never give up, never surrender! 😰

55 minutes ago, ukdeveloper said:

One thing, how would one change an image? like the background to the "find a domain",

what you'll need to do is right-click and "inspect element" on what you want to change - that will tell you it's name and the css that the element is using... from there, you can check in all.css (or wherever), find the default CSS for that element and used that for your changes in custom.css -  remembering that you don't have to copy the CSS of the entire element, only the parts you want to change.

if you do that, you'll find the yellow box is .domain-checker-container and the transparent image is .domain-checker-bg - so let's say you wanted a sunset on that container, you would just adjust the gradient hex values in .domain-checker-container...

if you wanted to, you could remove the gradient and just use your purple hex...

.domain-checker-container {    
      background-color: #5b068e !important;
      background: unset;
}

and if you wanted to remove the image...

.domain-checker-bg {
    background-image: unset;
}

and to replace the image, it's a case of changing the URL defined in .domain-checker-bg background-image... (you might need to adjust other settings depending on the image)....

now you wouldn't use this image here in real-life (I assume!), but it's the first URL that came to mind... 😀

55 minutes ago, ukdeveloper said:

and is there a way to change the wording should you so wish?

you should be able to use Language Overrides for virtually everything - though there are still the odd parts that are hard-coded in the templates or in encrypted code.

$_LANG['findyourdomain'] = "Search for your domain name here!";

just remember to never edit the original language files as they will get overwritten during an update - the overrides shouldn't.

Edited September 19, 2020 by brian!

[ukdeveloper]

Thank you so so much. 

One day I'll have your knowledge. 

Actually I probably wont LOL. 

[ukdeveloper]

So the bit im struggling with is finding the relevant element in all.css. 

For instance how (if there is a way) would you reference css files outside the theme folder?

These for instance (see pic) are in a different folder altogether. Would I need to change the original style.css for these elements or can I add the changed css to custom.css as I would normally.

Because anything I add to custom.css relating to these elements is not updating at all.

 

Carl.

[ukdeveloper]

Maybe you could be so kind as to tell me where im going wrong in my step by step here:

AIM: TO CHANGE THE BACKGROUND COLOUR OF IMAGE ONE TO RED IF UNAVAILABLE:

STEP ONE:

Right click and inspect element:

STEP TWO:

Locate element in all.css 

Now this is where I seem to struggle.  In this instance, what would I search for in all.css. I've searched for "spotlight-tld" and it finds nothing. Neither does btn:not and domain-contact-support.

However from within firefox if I change the properties for background-color to #ff0000 it shows exactly what im looking for. 

so I copy:

.spotlight-tld .btn:not(.domain-contact-support) {
    background-color: #FF0000;

}

to custom.css, but the change does not reflect. 

[brian!]

On 19/09/2020 at 15:44, ukdeveloper said:

One day I'll have your knowledge. 

the way this thread is going, that day might be sooner than anticipated LOL.

On 19/09/2020 at 16:16, ukdeveloper said:

So the bit im struggling with is finding the relevant element in all.css. 

two quick points - 1. all.css is for reference only, e.g WHMCS doesn't use it (it uses all.min.css which is a minified version of all.css - but all.css will be easier for you to understand); and 2) CSS might also be used in order template files and they may reference other CSS files.

On 19/09/2020 at 16:16, ukdeveloper said:

These for instance (see pic) are in a different folder altogether. Would I need to change the original style.css for these elements or can I add the changed css to custom.css as I would normally.

you would use custom.css - about the only time to go down modifying style.css would be if you were making wholesale changes to templates and css.... at that point you would duplicate the orderform template and make your changes... if you didn't rename/duplicate the orderform template, then WHMCS would overwrite style.css during an update... actually, if you were using an un-renamed "six", it would overwrite custom.css too... but you're using a modified Six, so you should be safe from that headache.... though always keep a copy of your custom.css file just in case (and especially before updating).

https://developers.whmcs.com/themes/css-styling/

Quote

If you want to make changes to any of the CSS that is applied by default, we recommend making those customisations inside of the /css/custom.css file.

 

On 19/09/2020 at 16:16, ukdeveloper said:

Because anything I add to custom.css relating to these elements is not updating at all.

often with the orderform templates CSS, you will have to add !important... so if we take your order now buttons and try to turn them orange, nothing happens... 😖

#order-premium_comparison .price-table-container .order-button, #order-premium_comparison .price-table-container .order-button:hover {
	background: linear-gradient(to bottom, #fb9214 0%,#fc640f 100%);
}

add !important to it, and it takes precedence and will work...

#order-premium_comparison .price-table-container .order-button, #order-premium_comparison .price-table-container .order-button:hover {
	background: linear-gradient(to bottom, #fb9214 0%,#fc640f 100%) !important;
}

no point boring you in great detail as to why you need to do this - but it's basically because custom.css is declared before the orderform template's CSS and so you have to tell it that the code in custom.css is more important that what's in style.css or wherever.

so ideally take the changes out of style.css and move them to custom.css and they should be safer for updating.

On 19/09/2020 at 17:45, ukdeveloper said:

Now this is where I seem to struggle.  In this instance, what would I search for in all.css. I've searched for "spotlight-tld" and it finds nothing. Neither does btn:not and domain-contact-support.

the domain registration page is a cart page, so for you it's using standard_cart - which means that it's referencing all.min.css in the /templates/orderforms/standard_cart/css/ folder and not the one in megasix.

On 19/09/2020 at 17:45, ukdeveloper said:

to custom.css, but the change does not reflect. 

it's going to need !important - but as written by default, it's worth noting that the css for these buttons makes them all the same colour - dark grey... the difference is that unavailable domains have their opacity and cursor changed because the button is disabled.

so one way for you to have unavailable domains shown in red, and available domains in dark grey could be...

.spotlight-tld .unavailable,
.spotlight-tld .invalid {
	background-color: #ff0000 !important;
	border-color: #cc0000 !important;
	opacity: 1 !important;
}

in the above example, i've added a dark red border and changed the opacity back to 1 - if you don't want to adjust the opacity, then just remove that line and it will default to  65% as specified in the default CSS.

[ukdeveloper]

Gotcha. I think.

So would I need to create a custom.css file inside standard_cart or just my usual custom.css, because the latter doesn't seem to work. 

I have placed:

.spotlight-tld .unavailable,
.spotlight-tld .invalid {
    background-color: #ff0000 !important;
    border-color: #cc0000 !important;
    opacity: 1 !important;
}

inside custom.css and it makes no difference. 

Cheers

Carl

[ukdeveloper]

Ok, so after playing a little I made a backup of style.css inside the standard_cart/css folder and added the above code you gave which now shows red for unavailable domains. 

What im struggling with is, can you explain how you knew it was the .unavailable and .invalid elements which needed changing. 

Where are these elements assigned?

Could you show me where I would have found the .unavailable reference by inspecting the element?

the only reference I can see is the one attached. 

And therefore do I assume if I wanted to change the AVAILABLE background colour to a green for instance, would I use the element:

.spotlight-tld .btn.add-to-cart ? If this is not right, how do you know where to find the ones that are??

Cheers

Carl.

[brian!]

17 hours ago, ukdeveloper said:

So would I need to create a custom.css file inside standard_cart or just my usual custom.css, because the latter doesn't seem to work. 

the one in megasix - you could create a custom.css in standard_cart, but then you'd have to tell the templates that it exists and to use it - and that way lies madness... keep everything in the main template custom.css file.

17 hours ago, ukdeveloper said:

inside custom.css and it makes no difference. 

certainly in Firefox, you will often have to do a shift+refresh to get it to use the updated CSS - other browsers will likely be similar... and if you use CloudFlare, then you will have to ensure that isn't caching the old CSS too.

4 hours ago, ukdeveloper said:

Ok, so after playing a little I made a backup of style.css inside the standard_cart/css folder and added the above code you gave which now shows red for unavailable domains. 

I see that CSS is now in /megamix/css/custom.css - that is the correct location.

4 hours ago, ukdeveloper said:

What im struggling with is, can you explain how you knew it was the .unavailable and .invalid elements which needed changing. 

i'm tempted to say 8 years of using WHMCS! 🤪

4 hours ago, ukdeveloper said:

Where are these elements assigned?

usually in the templates - in the above case, it would be /templates/orderforms/standard_cart/domainregister.tpl

<button type="button" class="btn unavailable hidden" disabled="disabled">{lang key='domainunavailable'}</button>

... that's often another way of finding out the CSS element being used - they may be hardcoded in encrypted files or JS files too..

4 hours ago, ukdeveloper said:

Could you show me where I would have found the .unavailable reference by inspecting the element?

when you right-click and inspect an element, it highlights the specific line of code, and relevant CSS styling for those elements... and it shows the name and URL of the specific CSS style that it's being pulled from.

4 hours ago, ukdeveloper said:

And therefore do I assume if I wanted to change the AVAILABLE background colour to a green for instance, would I use the element:

.spotlight-tld .btn.add-to-cart ? If this is not right, how do you know where to find the ones that are??

yes, that's correct...

.spotlight-tld .btn-add-to-cart {
	background-color: #b1ecd5 !important;
	border-color: #a7c8a8 !important;
}

.spotlight-tld .to-add {
	color: #000 !important;
}

[ukdeveloper]

Thank you so much for your help. It's been invaluable. 

There's still a few things I can't find or get my head around, but wont disturb you with those. I'll persevere and see if I can sort it. 

Thanks again

Carl. 

[brian!]

1 hour ago, ukdeveloper said:

There's still a few things I can't find or get my head around, but wont disturb you with those. I'll persevere and see if I can sort it. 

to be honest, you'll probably learn more that way - though if you get stuck, just give me a shout. 📣

I hope on your list of things to do is to change the GBP currency suffix from GPB to GBP !

btw - you have a separate domain pricing page available to your users @ https://domain.com/billing/domain/pricing/ if you want to use it - it's never linked to by default from the menus or mentioned in the docs (unless that's changed recently), but was added years ago to the templates.