3

I have a CSS file on a Joomla 4 site using a custom template, that has code that only applies to special views for logged-in registered (manager level) users on the front end that styles list displays and other items when they add and edit articles, along with some styling in 'how to' articles I've written for them. This file is called front.css.

I have run a site performance test on https://www.webpagetest.org and the report says that "3 externally-referenced CSS files are blocking page rendering." (the other two are JCE Editor and GDPR cookie consent files, so out of my control).

So, I'd like to only load this file when one of the users actually logs in to do some work. I can use vanilla JavaScript if necessary.

1 Answer 1

5

Very interesting and good question in my opinion.

For this task I would use the 'joomla_user_state' cookie which is available from your template index.php file. (otherwise you can do this form a custom plugin or from a custom module). If you maintain your own custom template then you can insert a few lines in index.php that will load the css file if the User is logged in.

use Joomla\CMS\Factory;

/** @var Joomla\CMS\Document\HtmlDocument $this */

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();

$input = $app->getInput();  
$loggedIn = $input->cookie->get('joomla_user_state');

if ($loggedIn) {
    $wa->registerAndUseStyle('template.mytemplate.front', 'front.css');
}

Of course your front.css file is in media/templates/site/mytemplate/css folder.

But if not and your css file is in your template's css folder then you have to change this line and just use:

$wa->registerAndUseStyle('template.front', 'templates/mytemplate/css/front.css');

As an important additional note, since a lot of people have a hard time to load the custom templates/themes' css or script assets with the Joomla WebAsset Manager. My example above is used when you have a child theme as your theme, but if you do not use child themes then you can register and load the css file easier in many cases, if you explicitely give the full path to the file to media folder or to your template's css folder (as I gave above too) :

$wa->registerAndUseStyle('front', 'media/templates/site/mytemplate/css/front.css');

OTHER APPROACH

Just with a nuance a more reliable approach for long term could be if we'd identify the User/visitor at server side:

use Joomla\CMS\Factory;

/** @var Joomla\CMS\Document\HtmlDocument $this */

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();

$guest = $app->getIdentity()->guest;

if (!$guest) {

    $wa->registerAndUseStyle('template.front', 'templates/mytemplate/css/front.css');

}

Well, I just spot in your question, the small but important detail that you want to load the css only for managers (default Joomla user group ID = 6), so finally:

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();

$user_groups = $app->getIdentity()->groups;

if ( in_array(6, $user_groups) ) {

    $wa->registerAndUseStyle('template.front', 'templates/mytemplate/css/front.css');

}

Thus the appropriate title of this question would be: How to load a stylesheet only for a specific User Group in Joomla

4
  • Thank you. I'll try this shortly. I have, however, been using the old system of keeping all my template files in /templates/mytemplate/ so when I zip it up to test on a dev site and then zip it up again to transfer back to the live site, it only needs one zip file each way. So, I may need to tweak your code accordingly.
    – Gillian
    Apr 25, 2023 at 11:03
  • @Gillian - no problem I just added that variation of the code to my answer since a lot of people use stylesheets the way you do. So you can just change the path that way.
    – Zollie
    Apr 25, 2023 at 11:46
  • @Gillian - also added a Manager user group version of the code in my update. I just realized that you specifically want to target a user goup with this…
    – Zollie
    Apr 27, 2023 at 7:26
  • 1
    brilliant! The 'Other approach' works perfectly. Thank you.
    – Gillian
    Apr 27, 2023 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.