0

I want to properly remove CSS and JS links from Joomla 4 header

For example I did not want:

<link href="/newer/media/vendor/fontawesome-free/css/fontawesome.min.css?5.15.4" rel="stylesheet" />

To be loaded

5
  • 1
    The styles and scripts are added using web assets in Joomla 4 so read up on how you can add and remove WebAssets via the template override for that page or via another piece of code. I have tried to help someone a few months ago with removing that same library but we never managed to achieve it as expected so I can't provide the exact answer. Start by reading here docs.joomla.org/Special:MyLanguage/J4.x:Web_Assets
    – Irata
    Jul 10, 2022 at 11:10
  • Yes I have already researched before posting, but web assets manager does not have method to remove style that is added from joomla's core.
    – Gocha
    Jul 10, 2022 at 11:19
  • Have you considered using something like RegularLabs Re-Replacer to alter the name of the core library to something else so it wont load and your replacement will. A bit of a hack but might be useful for your needs.
    – Irata
    Jul 11, 2022 at 1:11
  • Yes there can be found hacks but I need to know correct way to do it. Thanks for your reply.
    – Gocha
    Jul 11, 2022 at 6:17
  • 1
    There is no really correct way. WebAsset API simply doesn't support disabling dependencies. You can use hacks like redeclaring the template asset without the FontAwesome dependency.
    – Sharky
    Jul 11, 2022 at 6:50

1 Answer 1

1

If you create a template with an index.php file in it and just put

<head>
</head>

at the top and then something like this...

<body>
<header>
<jdoc:include type="modules" name="logo">
<jdoc:include type="modules" name="header-menu">
</header>
<jdoc:include type="message" />
<jdoc:include type="modules" name="module-1" />
<jodc:include type="component" />
<footer>
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="footer-menu" />
</footer>
</body>

That will give you a template with no head content. As long as you don't add

<jdoc:include type="head" />

to the document you can add all the modules/component/etc and you can even add your own custom css/js into the head section if you so want e.g.

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="row">
<header>
<div class="row">
<div class="col-12 text-right">
<jdoc:include type="modules" name="logo" />
</div>
</div>
<jdoc:include type="modules" name="menu" style="bs-menu" />
</header>
<div class="col-6">
<jdoc:include type="modules" name="spot-1" />
</div>
<div class="col-6">
<jdoc:include type="modules" name="spot-2" />
</div>
<div class="row">
<div class="col-3">
<jdoc:include type="modules" name="left" />
</div>
<div class="col-6">
<jdoc:include type="component" />
</div>
<div class="col-3">
<jdoc:include type="modules" name="right" />
</div>
</div>
<footer>
<div class="row">
<div class="col-6">
<jdoc:include type="modules" name="foot-1" />
</div>
<div class="col-6">
<jdoc:include type="modules" name="foot-2" />
</div>
</div>
<div class="row">
<div class="col-12">
<jdoc:include type="modules" name="foot-menu" style="bs-menu" />
</div>
</div>
<div class="row">
<div class="col-12">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>

This would give you a basic template with just CDN based bootstrap css and javascript and a few module spaces like footer, foot-menu (using chrome style bs-menu which you could add to the layouts/chrome folder), foot-1, foot-2, left, right, spot-1, spot-2, menu (using bs-menu) and logo.

If you wanted to go a bit more fancier you could do things like count the modules in each module position

<div class="row">
<?php 
$maincol = 12 ;
$left = ($this->countModules( 'left' ) ? true : false ) ;
$right = ($this->countModules ( 'right' ) ? true : false ) ;
$maincol -= ( $left ? 3 : 0 ) + ( $right ? 3 : 0 ) ;
if ( $left ) : ?>
<div class="col-3">
<jdoc:include type="modules" name="left" />
</div>
<?php endif ;?>
<div class="col-<?php echo $maincol ; ?>">
<jdoc:include type="component" />
</div>
<?php if ( $right ) : ?>
<div class="col-3">
<jdoc:include type="modules" name="right" />
</div>
<?php endif ; ?>
</div>

That way the main column would be col-12 if there was nothing in the left/right columns but would shrink by three columns if there was something in either left/right or six if there are items in both the left/right columns.

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.