How does the CSS compiling work? templates-six v7.1.0-release.1

[USA_Webmaster]

When I add styles to custom.css file, they do not override all.min.css. I find myself always adding the !important when I shouldn't have to. What is going on with this minify stuff? Is this being autocompiled? Am I suppose to be using a GUI tool to recompile?

 

Still I had no luck, even when in the /includes/head.tpl I made it look like this:

 

<link href="{$WEB_ROOT}/templates/{$template}/css/custom.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/all.min.css?v={$versionHash}" rel="stylesheet">

 

Here is the original /includes/head.tpl:

https://github.com/WHMCS/templates-six/blob/master/includes/head.tpl

 

---

 

https://github.com/WHMCS/templates-six/releases

http://docs.whmcs.com/Customising_the_Six_Theme

[sentq]

there is no compiling in CSS, all.min.css file is Bootstrap v3.3.7 original file.

 

also custom.css need to be called after all.min.css, or as the last CSS file will be better.

 

what you need to solve this issue is to know how CSS works

 

Specificity

When dealing with the specificity of a CSS rule, the more specific rule wins. So, if the selectors are the same, then the last one wins,

http://www.techrepublic.com/article/css-101-handling-multiple-rules-for-the-same-element/

[WHMCS Edward]

This isn't quite accurate. WHMCS 7.1 did introduce a new way of handling assets such as CSS files, so now all are combined and minified into the single all.min.css file. The all.min.css file includes the Bootstrap, Six theme styling and a number of other libraries CSS files into one single minified file.

 

This change reduces the number of external requests on page load leading to improved performance and faster load times.

 

The custom.css file is still loaded following the all file and should allow you to make any overrides without using the !important tag.

 

For more information on the changes to asset loading in 7.1, please see http://docs.whmcs.com/WHMCS_7.1_Asset_Changes

 

-Eddy

[USA_Webmaster]

thanks @sentq for the helpful link, i'm refreshing myself right now on this topic.

 

This isn't quite accurate. WHMCS 7.1 did introduce a new way of handling assets such as CSS files, so now all are combined and minified into the single all.min.css file. The all.min.css file includes the Bootstrap, Six theme styling and a number of other libraries CSS files into one single minified file.

 

This change reduces the number of external requests on page load leading to improved performance and faster load times.

 

The custom.css file is still loaded following the all file and should allow you to make any overrides without using the !important tag.

 

For more information on the changes to asset loading in 7.1, please see http://docs.whmcs.com/WHMCS_7.1_Asset_Changes

 

-Eddy

 

Smart! Thanks for the added clarification Eddy. Just wasn't sure if you guys had some kind of magical, minify script working in the backend. Or were using something like SimpLESS than just uploaded.

[brooks]

Why is the custom.css file not loaded for the cart templates? Adding it to common.tpl allows for easy changes. Otherwise you have to edit the all.min.css file to effect any change to the cart css.

 

A bug? At the least, it's an enhancement request.

[ejmerkel]

I am trying to change some of the colors, etc on the admin area on 7.1 and not having any luck having seeing any of the changes reflected. Is the correct location to put this file here?

 

./whmcs/templates/blend/css/custom.css

 

I made a simple change to the background color as a test.

 

body {

background-color: #414141;

}

 

I've tried SHIFT-F5, clearing my browser cache, alternate browsers etc. I don't see the custom.css file showing up in the developer tools/network/css.

 

Any advice would be much appreciated!

 

Best regards,

Eric

[brian!]

Hi Eric,

 

the admin area does use a custom.css file, so that will explain why your changes won't be working.

 

to make the changes you want, you have at least 3 options...

 

1. modify all.min.css directly - but those changes will get overwritten during an update.

2. edit header.tpl to use a custom.css file.

3. use an action hook to add a link to the custom.css file - https://forum.whmcs.com/showthread.php?111051-Change-Tab-Color-and-Text&p=452667#post452667

 

3 is probably the better long-term solution.