Jump to content

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


Recommended Posts

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

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

  • WHMCS Technical Analyst

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated