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– IrataJul 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.– GochaJul 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.– IrataJul 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.– GochaJul 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.– SharkyJul 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.
