1

I have added the html code using sp page builder extension also need to add css and js to this particular page in joomla 3. i am using t3 blank template is there any procedure to add this or any shortcut

<head>
  <title>Web Interactive</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

  <meta name="generator" content="xxxx 3.8.1">

  <!-- favicons -->
  <link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
  <link rel="manifest" href="media/manifest.json">
  <link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">


  
  <script src="xx.js"></script>
  <script src="xxxx.js"></script>

  <link rel="stylesheet" type="text/css" href="Interactive.css">
</head>
Improve this question
1

2 Answers 2

Reset to default
2

Joomla's Documentation about adding CSS or JS to the document head: https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

use Joomla\CMS\Factory;
$document = Factory::getDocument();

$document->addStyleSheet("...demo.css", array('version'=>'auto'));
$document->addScript("...demo.js", array('conditional'=>'lt IE 9'));

That method still works.

You could also use the HTMLHelper to add CSS/JS to the document header

use Joomla\CMS\HTML\HTMLHelper;
HTMLHelper::_(
    'stylesheet',
    'com_foo/foo.css', 
    ['version' => 'auto', 'relative' => true]
);

HTMLHelper::_(
'script',
'com_foo/foo.js',
['version' => 'auto', 'relative' => true]
);

To add your CSS/JS to specific pages, you could add it within some check for the page (on option/view/id or the menu item via Itemid)

Improve this answer
1

In addition, you should check which page you need via this way:

use Joomla\CMS\Factory;
$app = Factory::getApplication();
$option = $app->input->get('option'); // your component like com_content, com_virtuemart etc.
$view = $app->input->get('view'); // view in your component 
$id = $app->input->get('id'); // id of item of your component: product, article or any you need.

And so on, you should find your conditions and then check it in if-else construction.

if ($option == 'com_content' && $id == '123456') {    
    HTMLHelper::_(
        'stylesheet',
        'com_foo/foo.css', 
        ['version' => 'auto', 'relative' => true]
    );

    HTMLHelper::_(
        'script',
        'com_foo/foo.js',
        ['version' => 'auto', 'relative' => true]
    );
}

But the true way is to create a system plugin on onBeforeCompileHead event and do this job inside the plugin.

Improve this answer

Your Answer

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

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