CSS file load order

[LeeFoster]

I am trying to add code in to the css file of my chosen template to overwrite the background colour of a card, however it appears that the user.css file in my template loads before the card.scss template file.

How can I change the load order?

[burt]

Your question doesn't quite make sense. What is "card.scss" ?
If you want to change the loading order of .css files, you would amend the relevant hook, assuming you are hooking them in in your template.

[LeeFoster]

Your question doesn't quite make sense. What is "card.scss" ?
If you want to change the loading order of .css files, you would amend the relevant hook, assuming you are hooking them in in your template.

card.scss is the one that is being generated by bootstrap, it's what it's named as when I inspect the card in chrome.

Capture.PNG

[LeeFoster]

Never mind, managed to sort it.

[14Steve14]

Never mind, managed to sort it.

Can I ask how just in case anyone else reads this post and needs an answer.

[burt]

Not knowing what you've done in your template, all I can say is that all the Botostrap CSS (ie in the default core download) comes from:

https://github.com/CE-PhoenixCart/Phoen ... ap.php#L21

a little bit of extra style comes from:
https://github.com/CE-PhoenixCart/Phoen ... ts.php#L19

And after that the user.css is loaded if it exists:
https://github.com/CE-PhoenixCart/Phoen ... hp#L21-L24

All that put together, outputs as so:

Code: Select all

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<!-- stylesheets hooked -->
<style>* {min-height: 0.01px;}.form-control-feedback { position: absolute; width: auto; top: 7px; right: 45px; margin-top: 0; }@media (max-width: 575.98px) {.display-1 {font-size: 3rem;font-weight: 300;line-height: 1.0;}.display-2 {font-size: 2.75rem;font-weight: 300;line-height: 1.0;}.display-3 {font-size: 2.25rem;font-weight: 300;line-height: 1.0;}.display-4 {font-size: 1.75rem;font-weight: 300;line-height: 1.0;}h4 {font-size: 1rem;}}</style>
<link href="templates/default/static/user.css" rel="stylesheet">

As seen at: https://template.me.uk/PRO/test/

Note that this site is a template under construction and is based on a slightly older version of Phoenix.

[Xpajun]

Not knowing what you've done in your template, all I can say is that all the Botostrap CSS (ie in the default core download) comes from:

https://github.com/CE-PhoenixCart/Phoen ... ap.php#L21

a little bit of extra style comes from:
https://github.com/CE-PhoenixCart/Phoen ... ts.php#L19

And after that the user.css is loaded if it exists:
https://github.com/CE-PhoenixCart/Phoen ... hp#L21-L24

All that put together, outputs as so:

Code: Select all

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<!-- stylesheets hooked -->
<style>* {min-height: 0.01px;}.form-control-feedback { position: absolute; width: auto; top: 7px; right: 45px; margin-top: 0; }@media (max-width: 575.98px) {.display-1 {font-size: 3rem;font-weight: 300;line-height: 1.0;}.display-2 {font-size: 2.75rem;font-weight: 300;line-height: 1.0;}.display-3 {font-size: 2.25rem;font-weight: 300;line-height: 1.0;}.display-4 {font-size: 1.75rem;font-weight: 300;line-height: 1.0;}h4 {font-size: 1rem;}}</style>
<link href="templates/default/static/user.css" rel="stylesheet">

As seen at: https://template.me.uk/PRO/test/

Note that this site is a template under construction and is based on a slightly older version of Phoenix.

Gary, is this something new, as in newer than v1.0.7.5? As I have the same reference to .scss as in: _card.scss and _grid.scss

And then I wonder if you are not now using bootstrap.css for styling can we (as store owners) not download the cloud styesheets and alter them to suit our own store as things like over-ridind a style marked as !important can sometimes be a pain especially when you then have to put the style directly in the coding rather than the user.css

[burt]

I think that grabbing the bootstrap css from cloudflare, automatically pulls in the range of styelsheets that bootstrap uses.
Thus although you can see in dev-tools reference to (eg) cards.scss, this is not something that is anything (per se) that Phoenix directly utilises.