1

I am facing a problem that I think many other are and yet I was not able to find a solution.

Basically I want to load a custom css after all extension's css so I can customize the way it looks without having to set important for everything.

The problem is that Joomla loads the css files before loading the extensions files therefore my custom.css or template css isn't working.

I tried 

$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/custom-style.css');

after the <jdoc:include type="head" /> but it obviously isn't working.

In the joomla docs it says all third Party extension should use JHtml->addStyleSheet to allow style override. But there are lots of extensions out there that are not doing that.

Any suggestion on how I could load the custom.css or my templates files after all extensions CSS?

Joomler
  • 2,610
  • 3
  • 30
  • 37
user5294803
  • 21
  • 4
  • you can add your custom css in the footer which will overwrite all the styling. check this - http://joomla.stackexchange.com/questions/371/adding-javascript-file-in-the-footer-custom-styles – Joomler Mar 15 '16 at 10:07
  • Thanks Mirko, I am having a look at it now – user5294803 Mar 16 '16 at 02:30
  • On that question someone posted that the builtin propostar has a user.css override. I will have a look at what the template shipped with joomla does and will try to implement similar solution if works for me. One thing I struggle with templates and extensions current concept is that they all load a bunch of things. I've seen sites that load mootools, core, more, jquery, extensions js and styles, bootstrap, etc.. Too much stuff. It would be good to consider a basichtml output for extensions and any other fancy stuff would be an addon extention template – user5294803 Mar 16 '16 at 02:36

2 Answers2

2

$doc->addStyleSheet adds the stylesheets to the code generated by <jdoc:include type="head" /> in the order of each time that function is called in the page load process.

I am assuming the main issue here is that you are using third party extensions, so can't just update the style sheets used by each one, as patching them may override your changes.

If so, your best first stop is to see if each extension has given you any configuration options or have been designed with styling in mind. A good extension should really give enough hooks (or left it vanilla enough) to be able to do this without using !important.

If not, as stylesheets are added in order of load, you could also create a module whose only purpose is to add a style sheet, and order this to appear below all the other modules so that its stylesheet loads last.

Another (slightly hacky) approach would be to add it as a custom tag - this will then be added below the other js and css in the head area.

<?php
$stylelink = '<link rel="stylesheet" href="'.$this->baseurl . '/templates/' . $this->template .'/css/custom-style.css" />' ."\n";
$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
?>

Realistically, I'm not sure if this final option is any better than a raw html link, however - it's more code and not really what custom tags are for.

Sticking only to best practise would probably mean to not override styles if the extension developer has not designed their extension with that in mind.

RichardB
  • 2,615
  • 1
  • 11
  • 14
  • Thanks Richard B. Unfortunately the extension did not allow me to include a custom style or turn it of. Yes, I could target an specific given class to the module/component but I would have to enter those classes every time I wanted to re-use that extension in a project. I ended up just including a a 'raw html link' to the custom-style.css. I guess in general the template files should be loaded after the extentions, after all the template is where a custom look is given to the out of the box joomla and extensions. – user5294803 Mar 16 '16 at 01:13
0

I agree with all the points noted by Richard B. I think it's also very likely that you could solve your issue by increasing the specificity of the selectors in your custom.css or template.css

For example, if you have an extension in a div on template titled nav, include .nav in your CSS selector. Use web inspector to help find classes on your site you might be able to use

Other options to help target and override your extension styling would be to set a Module Class Suffix in your module > advanced settings, or use a page class

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50