• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Adding CSS template to head?

#1
I thought something like
PHP:
    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

XenForo developer
Staff member
#2
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):

PHP:
 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'
 
#3
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.

PHP:
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

XenForo developer
Staff member
#4
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:

HTML:
<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?
 
#5
Right, I'm seeing that however the contents aren't being added to the css being output by that.
HTML:
<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

XenForo developer
Staff member
#6
I'm sorry, I made a mistake.

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

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

abdfahim

Active member
#8
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?

Code:
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');
        }
    }
}