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
-
1The 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 ♦Commented 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.– GochaCommented 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 ♦Commented 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.– GochaCommented Jul 11, 2022 at 6:17
-
1There 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.– SharkyCommented Jul 11, 2022 at 6:50
Add a comment
|
1 Answer
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.
