Adding CSS template to head?

[Renari]

I thought something like

    public static function templateHook($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        if ($hookName == 'page_container_head')
        {
            $contents .= '<xen:require css="style.css" />';
        }

would work however it seem that this is run after template syntax is evaluated, I also tried outputting the css using $template->create() which also failed miserably.

 

[Chris D]

Hi Renari, this is the correct way (as you've ascertained, <xen tags do not work in template hooks as they are processed prior to the hook code being inserted therefore, they get missed):

 public static function templateHook($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
	{
		if ($hookName == 'page_container_head')
		{
			$template->addRequiredExternal('css', 'style.css');
		}

EDIT: By the way, this can also be used to include javascript (just change 'css' to 'js' and the template name to the path to your js file, e.g. 'js/addon/javascript.js'

 

[Renari]

Thanks Chris, however that doesn't seem to be adding the required css to the page either. I also tried storing it as a file instead of a template and linking to it like you mentioned with a javascript file but that also didn't work.

public static function templateHook($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        if ($hookName == 'page_container_head')
        {
            $template->addRequiredExternal('css', 'styles/addon/style.css');
        }

 

[Chris D]

It definitely works, I've just tried it myself.

Bear in mind that it will be added alongside all of the other css files that are included in the page, e.g:

<link rel="stylesheet" href="css.php?css=Gritter,GritterEXTRA,bb_code_button,moderator_bar,node_category,node_forum,node_list,node_page,sidebar_share_page,social_connect_auth,waindigo_debug_info_debugonpost,waindigo_loginasuser&amp;style=1&amp;dir=LTR&amp;d=1354564584" />

It should be in there somewhere, just somewhat difficult to spot.

Have you created a code event listener etc. in the admin CP?

 

[Renari]

Right, I'm seeing that however the contents aren't being added to the css being output by that.

<link ref="stylesheet" href="css.php?css=moderator_bar,node_category,node_forum,node_list,node_page,sidebar_share_page,style.css&style=1&dir=LTR&d=1354571168">

Checking the css being output at css.php?css=moderator_bar,node_category,node_forum,node_list,node_page,sidebar_share_page,style.css&style=1&dir=LTR&d=1354571168 I find...

http://pastebin.com/0xCZPymx

The css I've added in the style.css template is not here.

 

[Chris D]

I'm sorry, I made a mistake.

In your template hook, you do not need to put ".css" at the end.

$template->addRequiredExternal('css', 'style');

 

[Renari]

Thanks, not sure why I didn't try that considering none of the other files listed had css extensions in the include.

 

[abdfahim]

Sorry to dig up an old post. I am trying to make my first add-on, to put some styled text in the hook "ad_header".

So, below is my listener class, it correctly shows the text in the place. But I can't style the text using the css file I put in library/MyName/myname_style.css.

I have 2 questions please,

1. Why the CSS is not working
2. Is it the correct way to style my add-on?

class MyName_Listener
{
    public static function templateHook($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        if($hookName == 'ad_header')
        {
            $contents.= '<div class="myname-header" >THIS IS TEST</div>';
        }
      
        if ($hookName == 'page_container_head')
        {
            $template->addRequiredExternal('css', 'library/MyName/myname_style');
        }
    }
}

 

[Paul B]

If you are just modifying templates, why don't you just use the template modification system?

 

[abdfahim]

Actually, my main intention is to learn the XF system, otherwise I could just add that line in ad_header template.

 

[Paul B]

That's fair enough, but there is no need to use PHP if you are just injecting your own CSS/templates into core templates.