Add Custom css or scss (custom.css - custom.scss) doesn’t work Topic is solved

Be informed that this forum is not an official support forum for Joomla! 4.0. Any issues regarding Joomla! 4.0 must be reported at https://issues.joomla.org/.

Joomla! 4.0 is still in its Alpha stage. This forum should be used for sharing information about Joomla! 4.0.

Moderator: ooffick

Post Reply
User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Sun Dec 23, 2018 3:27 pm

I try to add custom css to Cassiopeia.

I Try in both css & css folder, adding the file—> (custom.css - custom.scss)

• Don’t seem to work, any ideas?

• If it was working, what will be the advantages/disadvantages of using the css or css solution?
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37038
Joined: Sat Apr 05, 2008 9:58 pm

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Webdongle » Sun Dec 23, 2018 4:32 pm

Name the css file user.css then
// Load custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
(already in the Template's index.php file) should load it.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

User avatar
pmleconte
Joomla! Explorer
Joomla! Explorer
Posts: 369
Joined: Fri Mar 17, 2017 12:55 pm
Location: France

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by pmleconte » Sun Dec 23, 2018 4:55 pm

Webdongle wrote:
Sun Dec 23, 2018 4:32 pm
Name the css file user.css then
// Load custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
(already in the Template's index.php file) should load it.
Cannot find your lines in alpha versions, but I found a discussion about this on github https://github.com/joomla/joomla-cms/issues/22325

Just look at mbabker comments, where custom.css might be a problem..

Pascal
If anything can go wrong, it will.
https://www.conseilgouz.com/en

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37038
Joined: Sat Apr 05, 2008 9:58 pm

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Webdongle » Sun Dec 23, 2018 6:34 pm

Yeah just looked at the latest version ... the Template's index.php has been altered a lot. Can't even see how it loads the css files.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

User avatar
pmleconte
Joomla! Explorer
Joomla! Explorer
Posts: 369
Joined: Fri Mar 17, 2017 12:55 pm
Location: France

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by pmleconte » Sun Dec 23, 2018 7:41 pm

I just tried to add user.css file and it has been included in my template.

I did not find how it found it.

There' s a new StylesRenderer class, but I did not find how _doc->_styleSheets table is filled up....but, it's coming from HtmlDocument class.

Pascal
If anything can go wrong, it will.
https://www.conseilgouz.com/en

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37038
Joined: Sat Apr 05, 2008 9:58 pm

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Webdongle » Sun Dec 23, 2018 8:55 pm

So they have wrapped up the css calls (including the one to user.css) into one statement like the Meta tags?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

User avatar
pmleconte
Joomla! Explorer
Joomla! Explorer
Posts: 369
Joined: Fri Mar 17, 2017 12:55 pm
Location: France

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by pmleconte » Mon Dec 24, 2018 10:21 am

In index.php file, you'll find

Code: Select all

<head>
	<jdoc:include type="metas" />
	<jdoc:include type="styles" />
	<jdoc:include type="scripts" />
</head>
Lists of styles/scripts is defined in joomla.asset.json file.

Pascal
If anything can go wrong, it will.
https://www.conseilgouz.com/en

User avatar
pmleconte
Joomla! Explorer
Joomla! Explorer
Posts: 369
Joined: Fri Mar 17, 2017 12:55 pm
Location: France

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by pmleconte » Mon Dec 24, 2018 10:24 am

If anything can go wrong, it will.
https://www.conseilgouz.com/en

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37038
Joined: Sat Apr 05, 2008 9:58 pm

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Webdongle » Mon Dec 24, 2018 1:22 pm

Looked at that tracker and still can see where the list of metas, styles and scripts are. How does one change the things that are included in

Code: Select all

<head>
	<jdoc:include type="metas" />
	<jdoc:include type="styles" />
	<jdoc:include type="scripts" />
</head>


Sorry but that is far to complicated for the average user to customise the Template.Yes, there is the ability to create and use user.css but everything has gone far to complex. imho It will push newbies into using 3rd party Templates.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Mon Dec 24, 2018 1:52 pm

Ok, thanks.
It seem that joomla.assets.json is the loader of user.css
This is the only reference to “user.css”

Code: Select all

"template.cassiopeia.ltr": {
      "name": "template.cassiopeia.ltr",
      "dependencies": ["template.cassiopeia.base"],
      "css": [
        "template.min.css",
        "user.css"
      ]
    },
    "template.cassiopeia.rtl": {
      "name": "template.cassiopeia.rtl",
      "dependencies": ["template.cassiopeia.base"],
      "css": [
        "template-rtl.min.css",
        "user.css"
Is that mean that we can't use custom variables and a custom.scss?

Also, so far, i wasn’t successful to override any css in css > user.css ??????
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

User avatar
pmleconte
Joomla! Explorer
Joomla! Explorer
Posts: 369
Joined: Fri Mar 17, 2017 12:55 pm
Location: France

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by pmleconte » Mon Dec 24, 2018 2:14 pm

Chacapamac wrote:
Mon Dec 24, 2018 1:52 pm
....
Is that mean that we can't use custom variables and a custom.scss?
....
that's what https://github.com/joomla/joomla-cms/issues/22325 is about: a scss compiler has to be provided if we want to work with scss files.
Chacapamac wrote:
Mon Dec 24, 2018 1:52 pm
....Also, so far, i wasn’t successful to override any css in css > user.css ??????
I just tried a small user.css with h1.{font-size:150%} and I can find it on my webpage.

Pascal
If anything can go wrong, it will.
https://www.conseilgouz.com/en

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37038
Joined: Sat Apr 05, 2008 9:58 pm

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Webdongle » Mon Dec 24, 2018 3:17 pm

So long as user.css can override the Template's css I suppose the fact that loading the css files is different doesn't really matter? methinks I might create my own basic Template
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

User avatar
pmleconte
Joomla! Explorer
Joomla! Explorer
Posts: 369
Joined: Fri Mar 17, 2017 12:55 pm
Location: France

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by pmleconte » Tue Dec 25, 2018 10:58 am

For information, I just tried a 3.9 compatible template with 4.0 alpha 5 (with WebAssetRegistry class) : it did not like it at all.....with alpha 4, it was still ok.

I think we'll have to adapt "old" templates to be compatible with 4.0 by adding a correct joomla.asset.json file.

Merry Christmas everybody,

Pascal
If anything can go wrong, it will.
https://www.conseilgouz.com/en

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Tue Dec 25, 2018 2:47 pm

that's what https://github.com/joomla/joomla-cms/issues/22325 is about: a css compiler has to be provided if we want to work with css files.

I see, Thank You pmleconte !


• After reading the github post I’m a bit confuse on how I should put my custom code (css or scss, so far, user.css don’t even work ?

• And if I read correctly we will not be able to use a custom scss at all ????

Sorry to ask !

Merry Christmas to ALL !
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Wed Dec 26, 2018 2:35 pm

Ok, If I understand well...
If casual users want to use SCSS (who will not?) they are out of luck with Joomla 4 No compiler will be onboard.
Not really cool...
They will have to install their own compiler, not really user-friendly???

Rocketheme use Leafo SCSS Compiler and I NEVER a problem with it ???
I will try it...

Anyway with Joomla_4.0.0-alpha6-dev-Development user.css (in the css folder) don’t even work :-[
My test:
user.css is in the css folder

Code: Select all

$wa->enableAsset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtf' : 'ltd'));
is in the index.php
joomla.asset.json have the user.css entry
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

webdevtim
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 111
Joined: Sun May 28, 2017 4:37 am

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by webdevtim » Wed Dec 26, 2018 9:20 pm

I would think then you go to joomla.asset.json and add in the particular css files you want to load when Joomla loads, like

Code: Select all

{
  "name": "cassiopeia",
  "version": "4.0.0",
  "description": "Cassiopeia is the Joomla 4 site template",
  "license": "GPL-2.0+",
  "assets": {
    "template.cassiopeia.base": {
      "name": "template.cassiopeia.base",
      "dependencies": [
        "core",
        "jquery-noconflict",
        "font-awesome",
        "bootstrap.js.bundle"
        "whatever-other-icon-package-you-want-to-load"
      ],
      "js": [
        "template.js",
        "user.js"
        "custom.js"
      ]
    },
    "template.cassiopeia.ltr": {
      "name": "template.cassiopeia.ltr",
      "dependencies": ["template.cassiopeia.base"],
      "css": [
        "template.min.css",
        "user.css"
        "custom-ltr.css"
      ]
    },
    "template.cassiopeia.rtl": {
      "name": "template.cassiopeia.rtl",
      "dependencies": ["template.cassiopeia.base"],
      "css": [
        "template-rtl.min.css",
        "user.css"
        "custom-rtl.css"
      ]
    }
  }
}
Am I being over simplistically naive, or would this work?

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Fri Dec 28, 2018 9:28 am

My mystery is resolve, I did have a wrong comment code in my css. :-[

Code: Select all

///* --------------- LOGO ------------------*/
Do not work

Code: Select all

/* --------------- LOGO ------------------*/
user.css work perfectly...

I will try to add a custom.scss by adding it to the joomla.asset.json, maybe it will work ?
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Sun Dec 30, 2018 7:15 pm

Ok, now I understand, (I think) SCSS need to be compile.

and Joomla 4 will NOT include a Compiler (due to unreliability, it seem...?)

I like to try the one use by the RocketTheme (that I use without any problems) —> Leafo

QUICK START
http://leafo.net/scssphp/

COMPLETE DOCUMENTATION:
http://sass-lang.com/documentation/file ... extensions

You can also find the latest source online:
https://github.com/leafo/scssphp/

Anybody have hints on how to integrate it to Joomla?

So far, I copy the given leafo folder to Joomla Root > librairies > vendor > leafo
(I copy Rockettheme for the location...)

Now I’m trying to specify the scss file (will be name custom.scss) to be compile from the templates > cassiopeia > scss folder to the templates > cassiopeia > css one.

Any help welcome...
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Sun Dec 30, 2018 7:38 pm

Ok, it seem that leaf is old and not really updated.

What is the best alternative — Searching?????
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Mon Dec 31, 2018 4:09 pm

I was wrong Leafo is well alive

This is the right url’s


QUICK START
http://leafo.github.io/scssphp/

COMPLETE DOCUMENTATION:
http://leafo.github.io/scssphp/docs/

You can also find the latest source online:
https://github.com/leafo/scssphp/
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

webdevtim
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 111
Joined: Sun May 28, 2017 4:37 am

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by webdevtim » Sun Jan 06, 2019 12:36 am

I have added SAAS/SCSS compiling to Sublime Text 3. I can use Sublime Text 3 to compille style-sheets.scss on a Joomla installation to style-sheets-min.css, plus save a copy of both the .css and .scss files locally with the same key stroke [ctrl][s] for Sublime Text 3.

What are the advantages of having the SCSS compiler built into Joomla? For quick work when we may not have access to our favorite code editor?

I may be naive here, but if I don't ask questions I will remain forever naive.

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Mon Jan 07, 2019 1:32 pm

What are the advantages of having the SCSS compiler built into Joomla? For quick work when we may not have access to our favorite code editor?
I understand that this is not the job of Joomla to compile css, but being able to use the power of scss is, for me really important as I normally develop one master template that I adapt to each of my clients. Having the ability as example to change, on the fly, all site colours by scss variables are great. Many Top Templates (like Rockettheme) maker use a compiler, they do it because it’s convenient.
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

webdevtim
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 111
Joined: Sun May 28, 2017 4:37 am

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by webdevtim » Mon Jan 07, 2019 6:36 pm

A couple of things:

CSS variables now allow us to set things like global colors, global fonts, and other CSS properties; not break-points, as I have discovered.

I can have a local .scss file for each project that I compile and save to the host where the website lives. I can also have a local master .scss file that I keep for future projects, that I can use as a starting point for each project.

So I am having trouble imagining what you mean by .scss support.

Are you suggesting that the Cassiopeia template provide a template.scss file from which you can begin modifications? Perhaps having a layout.scss, content.scss, offline.scss, etc.

I do see an scss folder in the Casseopeia template that has a few .scss files like _variables.scss that holds all the scss variables, template.scss that assembles all the .scss files in the blocks and vendor folders, offline.scss that has just plain CSS, and template-rtl.scss that also just has a bunch of plain CSS. Additionally there is the cassiopeia\scss\blocks folder that has a bunch of .scss files like _css-grid.scss, which is a full blown .scss file, _layout.scss with is just a CSS file with one SCSS variable and one SCSS math operation. I won't go into all of these, but it looks like this a start of something, not a finished product. Then there is the cassiopeia\scss\vendor folder that contains things like _chosen.scss which takes advantage of .scss variables. plus a few other .scss files.

I don't know if this is just here as an example of SCSS styles for a Joomla template or if this is going to be compiled to template-min.css.

Here are the @imports from template.scss

Code: Select all

// Bootstrap functions
@import "../../../media/vendor/bootstrap/scss/functions";


// Variables
@import "variables";

// Bootstrap
@import "../../../media/vendor/bootstrap/scss/variables";
@import "../../../media/vendor/bootstrap/scss/bootstrap";

// FontAwesome
@import "../../../media/vendor/font-awesome/scss/font-awesome";

// B/C for Icomoon
@import "../../../build/media/system/scss/icomoon";

// Alert
@import "../../../build/media/system/scss/jalert";

// jQuery Minicolors
@import "../../../build/media/system/scss/jquery-minicolors";

@import "blocks/global"; // Leave this first
@import "blocks/alerts";
@import "blocks/banner";
@import "blocks/demo-styling";
@import "blocks/footer";
@import "blocks/form";
@import "blocks/frontend-edit";
@import "blocks/header";
@import "blocks/icons";
@import "blocks/iframe";
@import "blocks/layout";
@import "blocks/modals";
@import "blocks/modifiers";
@import "blocks/utilities";
@import "blocks/css-grid"; // Last to allow fallback

// Vendor overrides
@import "vendor/awesomplete";
@import "vendor/bootstrap/buttons";
@import "vendor/bootstrap/card";
@import "vendor/bootstrap/custom-forms";
@import "vendor/bootstrap/collapse";
@import "vendor/bootstrap/dropdown";
@import "vendor/bootstrap/lists";
@import "vendor/bootstrap/modal";
@import "vendor/bootstrap/nav";
@import "vendor/bootstrap/pagination";
@import "vendor/bootstrap/table";
@import "vendor/chosen";
@import "vendor/dragula";
@import "vendor/minicolors";
@import "vendor/tinymce";

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Wed Jan 09, 2019 1:09 am

CSS variables now allow us to set things like global colours, global fonts, and other CSS properties
You right “webdevtim” css variable are possible — I should have pay attention. :p
https://medium.freecodecamp.org/everyth ... 4d922ea855

Pretty cool and OK with all modern browser....[/b ] :pop


—————————————————————————————————————————
not break-points, as I have discovered


— What do you mean here “webdevtim” ???

CSS Breakpoints (devices)
https://medium.freecodecamp.org/the-100 ... d6a5ba1862

https://www.w3schools.com/howto/howto_c ... points.asp

also Bootstrap 4 Grid & breakpoints in 10 Minutes

https://medium.freecodecamp.org/learn-t ... 3bfae115da
—————————————————————————————————————————


it looks like this a start of something, not a finished product
Yep, no idea what that scss folder is doing there ???
— They are not loading at all but they are imported in the template.css (that doesn't load anyway) only the template.min.css is loading (include in the joomla.asset.json, that seem to load the assets)

template.min.css doesn't import these scss ???????

Can somebody explain what’s Up ?
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

webdevtim
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 111
Joined: Sun May 28, 2017 4:37 am

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by webdevtim » Wed Jan 09, 2019 6:39 am

I am not part of the development team, so I can't speak to the scss folder.

Whether temaplate.css or temaplte-min.css gets loaded is determined by what file is chosen in joomla.asset.json

Code: Select all

  "name": "sagacic",
  "version": "4.0.0",
  "description": "Sagacic Default is the Joomla 4 site template",
  "license": "GPL-2.0+",
  "assets": {
    "template.sagacic.base": {
      "name": "template.sagacic.base",
      "dependencies": [
        "core",
        "jquery-noconflict",
        "font-awesome",
        "bootstrap.js.bundle"
      ],
      "js": [
        "sagacic-template.js",
        "user.js"
      ]
    },
    "template.sagacic.ltr": {
      "name": "template.sagacic.ltr",
      "dependencies": ["template.sagacic.base"],
      "css": [
        "sagacic-template.min.css",
        "user.css"
      ]
    },
    "template.911tap.rtl": {
      "name": "template.sagacic.rtl",
      "dependencies": ["template.sagacic.base"],
      "css": [
        "sagacic-template-rtl.min.css",
        "user.css"
      ]
    }
  }
}

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37038
Joined: Sat Apr 05, 2008 9:58 pm

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Webdongle » Wed Jan 09, 2019 10:50 am

Copying the Template is being fixed https://github.com/joomla/joomla-cms/pull/23484
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

webdevtim
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 111
Joined: Sun May 28, 2017 4:37 am

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by webdevtim » Sun Jan 13, 2019 12:26 am

Great, I sort of figured it out, but for others it is nice if all the files get updated when making and renaming a copy.

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 37038
Joined: Sat Apr 05, 2008 9:58 pm

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Webdongle » Sun Jan 13, 2019 10:14 am

webdevtim wrote:
Sun Jan 13, 2019 12:26 am
... but for others it is nice if all the files get updated when making and renaming a copy.
Check the link I posted ... all the files are now copied. The changes will appear in the next release.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

webdevtim
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 111
Joined: Sun May 28, 2017 4:37 am

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by webdevtim » Mon Jan 14, 2019 6:25 pm

Responding to Chapamac about breakpoints, after read the suggested reading, and looking at what the modern web device landscape looked like, I came up with the following .

Code: Select all

$wearables "{min-width: 270px)"
$phones "{min-width: 360px)"
$tablets-portrait "{min-width: 600px)"
$tablets-landscape-pro-portrait "{min-width: 960px)"
$tab-pro-landscape-old-laptop "{min-width: 1300px)"
$HD-screens "{min-width: 1680px)"
$QHD-screens "{min-width: 2300px)"
$4K-5K-UHD-screens "{min-width: 3000px)"

// universal styles

@media #{$wearables} {
	…
}

@media #{$phones} {
	…
}

@media #{$tablet-portrait} {
	…
}

@media #{$tablet-landscape-pro-portrait} {
	…
}

@media #{$tab-pro-landscape-old-laptop} {
	…
}

@media #{$HD-screens} {
	…
}

@media #{$QHD-screens} {
	…
}

@media #{$4K-5K-UHD-screens} {
	…
}
In my opinion, the Bootstrap 4 breakpoints 540px, 720px, 960px, 1140px are way out of date. I looked at a new template I made on a 4K screen and though it looked really good on a 1920x1080 monitor, but it looked terrible on a 4K screen. Right now 4K monitors represent a fraction of the market, but as lithography methods improve, retina like resolutions are going to be common across the spectrum of display devices, so it makes sense to start planning for it now. On large format displays, I doubt they are going to be restricted to a view-port size of 1920 x 1080 when there are all those glorious additional pixels to work with.

Also, the more I read about Bootstrap 4, the more I am sold on CSS Grids. Bootstrap does some of the same things as CSS Grids, but not as cleanly, easily and comprehensively. Mix CSS Grids with the CSS Flexbox model, and I think we have a winning combination.

User avatar
Chacapamac
Joomla! Guru
Joomla! Guru
Posts: 865
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: Add Custom css or scss (custom.css - custom.scss) doesn’t work

Post by Chacapamac » Fri Jan 18, 2019 3:00 pm

Thanks webdevtim, you're breakpoints look pretty good. Thanks
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/


Post Reply

Return to “Joomla! 4 Related”