Topic on Project:Support desk

adding CSS at onBeforePageDisplay hook

5
146.175.202.30 (talkcontribs)

Hello,

In an extension Im working on, I add additional modules containing CSS at the onBeforePageDisplay hook. The problem is that when the page loads, first the normal mediawiki CSS is displayed for a milisecond, and only after this my CSS is loaded.. which doesn't look too nice. How can I resolve this? Thanks :]

TheDJ (talkcontribs)
62.205.118.237 (talkcontribs)

Thanks for the reply :] Im adding an external stylesheet. The idea of what I want is simple: I have a custom SpecialPage on which I have added HTML buttons and I want to change the way these buttons look like. So I want to load a custom .css file only when the user lands on my SpecialPage. Unfortunately I have not uploaded my code to the web yet, so I can't give you a link, but my basic code for the hook looks like this:

  public function onBeforePageDisplay(OutputPage &$out, Skin &$ski ){

    $page_title = $out->getPageTitle();

    if($page_title === 'My SpecialPage Title Name'){
      $out->addModules("ext.myModule");    
    }

    return true; 
  }

ext.myModule then retrieves a small .css file with the changes I want for my buttons:

#button{
  width: 30em;  
  height: 1.5em;
  cursor: pointer;
}

#letter_button{
  cursor: pointer;
}
146.175.202.30 (talkcontribs)

Could it have something to do with that mw.loader.load(); is called at the bottom of the HTML page? When I just add my css using normal <style> </style> blocks, and $out->addHTML the CSS loads immediately

121.219.253.36 (talkcontribs)

You are using JavaScript to load your styles, so they aren't loaded immediately. Use addModuleStyles.

Reply to "adding CSS at onBeforePageDisplay hook"