Nevo Template - Force CSS file Order

gdogaru · Post by **gdogaru** » Tue May 24, 2016 5:48 pm

Hi
I have a template I am working on and I want to override the css for some extension.
The problem is that extension adds it's css line after my template and I wouldn't use the important flag

My css is add as

Code: Select all

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

<head>
    <jdoc:include type="head"/>
 ....

Is there a way to tell the temlate to load a css file last?

itoctopus · Post by **itoctopus** » Tue May 24, 2016 6:49 pm

Why do you not want to use the "important" flag if I may ask? It does solve a lot of problem?

In any case, you can simply change the class being used by the extension both in the CSS and in the extension itself - that'll solve your problem.

iamrobert · Post by **iamrobert** » Thu May 26, 2016 5:22 am

In your template you can try using unset for the css:

Code: Select all

unset($this->_styleSheets[JURI::root(true).'/media/system/css/calendar-jos.css']‌);

However - some components still override your template.

The most reliable solution I have found is utilizing a plugin to block css/js - JSS - CSS control:
http://extensions.joomla.org/extension/js-css-control

Also - in your case place your css after:

<jdoc:include type="head" />

Regards,

Robert

gdogaru · Post by **gdogaru** » Thu May 26, 2016 8:00 pm

Thank you iamrobert,
and indeed, that helps me a lot, and I hope to solve my problem using your suggestion.
I was hoping for a way to set the order of the css, similar to what you do for modules. That way some plugins that compact css could still do their job.
But unfortunately, all I can hope for is for is a new version that supports that

Thanks again

sozzled · Post by **sozzled** » Thu May 26, 2016 8:43 pm

Cascading Style Sheets are processed in the order that they are loaded. As far as Joomla is concerned, the order goes from innermost to outermost.

1) Components
2) Modules
3) Plugins
4) Languages
5) Templates
6) Template overrides

(I may have the order slightly imperfect, but this is just to give you an idea)

Your site may load CSS from a combination of these parts. For most of us, the CSS files are usually loaded by the site template. Starting with the site template index.php file, you can see which CSS files are loaded (and the order they are loaded in). Most templates support the means to add extra/custom CSS files (which are usually, but not necessarily, the last CSS files loaded).

In addition to the use of the !important attribute (which I try to avoid wherever possible) it's also possible to narrow the scope with the #id or .class qualifiers. 99% of the time, I package the most "important" things in one or two custom CSS files and things generally take care of themselves.

Hope some of this helps

archer1986 · Post by **archer1986** » Thu Aug 13, 2020 10:16 am

I wanted to post this in the viewtopic.php?f=713&t=925142&p=3402477& ... r#p3402477 topic but it is locked and I cannot reply. I spent a few hours looking online for a solution to this issue I was having and finally found a work around.

Issue:
The Nevo Template was loading my css files before all other files (bootstrap, template css) so I could not override either bootstrap or the template css.

Resolution:
I created a "master" view.html.php file that all other view.html.php files would extend. Created a method that would add the stylesheets to an array in the "view". In the "master" view, inside the method "display", I hooked into the JFactory::getApplication()->registerEvent() that would then add the css files to the "document" (JFactory::getDocument() ). I hope this helps anyone in the future looking for a solution and hopefully prevents hours of searching.

Example: master.view.html.php

Code: Select all

class FiltersViewMaster extends JViewLegacy
{
	protected $stylesheets = array();

	public function __construct($config = array())
	{
		parent::__construct($config);

		//This file will be added to every view
		$this->addStylesheet('path/to/css/file.css');
	}

	//the method to add stylesheet in child views
	protected function addStylesheet($url)
	{
		$this->stylesheets[] = $url;
	}

	public function display($tpl = null)
	{
		//add the event hook which then adds the stylesheet to the bottom of
		//the JDocument array durring the <head> tag creation
		JFactory::getApplication()->registerEvent('onBeforeCompileHead', function () {
			$doc = JFactory::getDocument();
			foreach ($this->stylesheets as $stylesheet)
			{
				$doc->addStyleSheet($stylesheet);
			}
		});

		return parent::display($tpl);
	}

}

Post by **pe7er** » Fri Aug 14, 2020 7:24 am

Thank you for sharing your solution archer1986! Much appreciated!

Old topics are locked automatically to prevent spam. I've merged your topic with the original topic.

The Joomla! Forum™

Nevo Template - Force CSS file Order Topic is solved

Force CSS files order

Re: Force CSS files order

Re: Force CSS files order

Re: Force CSS files order

Re: Force CSS files order

Nevo Template - Force CSS file Order

Re: Nevo Template - Force CSS file Order