Skip to main content ↑ ↓
Topic: Combined CSS (Read 4681 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Combined CSS

I have problems with this combined css as when it is compress and combined, it adds a full url to images css. Actually my multi ElkArte subforum addon problems especialy if we want to use SSL.

SSL requires all sources come from the same domain with https and so far my mod even with buffer in Beta 3 cannot overwrite what has already been merged into that combined css. I know that url is added for reason.

So my question is how do I intercept this before the full url is merged into that combined css?

First choice, intercept so that it does not add full url into the combined css.
Second choice, if first is not good, intercept so that I can insert subforum full url instead just before the combination.

Re: Combined CSS

Reply #1 –

Not adding full URL is kind of difficult because the combined css file is served from the cache directory, so in a completely different place from where the CSS usually is.

The first way that comes to my mind is "intercept" the "loading theme" phase and "fix" the various $settings urls (theme, default theme, images, default images, etc.). That should be enough to let the combiner do it's work as expected and use the correct url in the combined version.
Bugs creator.
Features destroyer.
Template killer.

Re: Combined CSS

Reply #2 –

Quote from: emanuele – The first way that comes to my mind is "intercept" the "loading theme" phase and "fix" the various $settings urls (theme, default theme, images, default images, etc.). That should be enough to let the combiner do it's work as expected and use the correct url in the combined version.

I think I know where that is and I guess that's related to one of MESFA earlier URL problems. I'll try to find that and fix it soon.

Edited:

I cannot have the fixed url before or after it is completed. That would be against the concept of subforums which based on dynamic urls.

My last options would be to disable it or override it via loading the original css.
Last Edit: November 10, 2015, 09:52:05 pm by ahrasis

Re: Combined CSS

Reply #3 –

Do we really need combined css to be in a "cache" directory? Can we move the combined css to the css directory for respective themes instead, so that we don't have to fix a fixed url inside it?
Code: [Select]
 // Combine and minify the CSS files to save bandwidth and requests?
 if (!empty($context['css_files']))
 {
 if (!empty($modSettings['minify_css_js']))
 {
 require_once(SOURCEDIR . '/SiteCombiner.class.php');
 $combiner = new Site_Combiner(CACHEDIR, $boardurl . '/cache');
 $combine_name = $combiner->site_css_combine($context['css_files']);

 call_integration_hook('post_css_combine', array(&$combine_name, $combiner));

As I see this in Subs.php, we can move it to other directory via integration hook. I rather believe that fixed url in combined css file is not necessary if the file is place at their respective theme folder. What do you think @emanuele ?

Currently, I will be using this code to move combined css to css folder of respective theme:

Code: [Select]
	DEFINE('THEMEDIR', $settings['theme_dir']); // As this is not defined yet.
	$combiner = new Site_Combiner(THEMEDIR . '/css', $settings['theme_url'] . '/css'); // So fixed url is not necessary.

As for the url code generated, I may need to study how to stop that from being injected before the css is combined. Care to explain?
Last Edit: November 11, 2015, 02:16:43 am by ahrasis

Re: Combined CSS

Reply #4 –

Quote from: ahrasis – I cannot have the fixed url before or after it is completed. That would be against the concept of subforums which based on dynamic urls.
Maybe, provide an example of what you tried would help in not giving you something you already tried. ;D

Anyway, hooking into integrate_load_theme should give you enough time to fix all the URLs unless I'm completely wrong.
Bugs creator.
Features destroyer.
Template killer.

Re: Combined CSS

Reply #5 –

Naaah... Not in the mod. The url in the combined css. It cannot be changed before or after it is combined. It must remain as it is (without fixed url in it) for subforums to work properly with both SSL and non SSL. Therefore a move to css folder is the right thing to do. So I don't want it to be processed with fixed url in it but as it is i.e. "url(.." not "url(http://domain". I already succeded in moving it to css folder, but how to exclude fixed url while combining the css?

Re: Combined CSS

Reply #6 –

Calma e gesso (we use to say :P).
The combiner requires 2 urls:
1) the url to where the combined css file will be,
2) the url of the resources (images, etc.) in order to expand relative urls.

1 is defined by $boardurl, so if you fix that (and I assume you do otherwise probably half of Elk wouldn't work) that should be fine.
2 instead is defined by $settings['actual_theme_url'], so, if you use the hook I posted above, you should be able to fix that url to whatever you want and the combiner will expand the relative urls to the fully qualified you want, whatever it is.
Bugs creator.
Features destroyer.
Template killer.

Re: Combined CSS

Reply #7 –

I am not so sure you get my point.

When I said combined css, I mean to say this /cache/hive-2004e618b628656a536ea24a75269e77b1547da3.css?67cc5c68. Inside the file, after css are combined, is this kind of fixed url: http://www.elkarte.net/community/themes/default/images/images.png, etc.

This causes problem to css related to font awesome as it will not be working well cross domain. This also causes problem related to the combination of SSL and non SSL domains as, similar to font awesome, SSL consider things from different domain as affecting the site security.

Plus, the embedded url is long and it doesn't serve the purpose of minifying the code.

So, my solution is to move the combined css back to css folder for respective themes so that it can use only ../images instead of full and fixed url.

I am currently testing this new combined css on https://www.sch.my and http://elkarte.sch.my. I fixed the fixed url back to ../ by string replace code instead, since I do not understand the minfying css process to intervene that from happening.

Re: Combined CSS

Reply #8 –

Yep, then this is my point number 2.
You should be able to fix that behaviour by changing $settings['actual_theme_url'].
I can't test it right now, I'll do hopefully tonight.
Bugs creator.
Features destroyer.
Template killer.

Re: Combined CSS

Reply #9 –

The reason for using a cache directory is file permissions.

Re: Combined CSS

Reply #10 –

Quote from: Joshua Dickerson – The reason for using a cache directory is file permissions.

Please explain further cause for the time being I'd prefer cuss directory for the above-mentioned reason.

Quote from: emanuele – Yep, then this is my point number 2.
You should be able to fix that behaviour by changing $settings['actual_theme_url'].
I can't test it right now, I'll do hopefully tonight.

I don't think we can change the fixed rule inside the combined css file simply by re-defining that settings.

Re: Combined CSS

Reply #11 –

Code: [Select]
<?php

class Combine_CSS_Integrate
{
	public static function integrate_load_theme()
	{
		global $settings;
		$settings['actual_theme_url'] = 'http://blabla.com/';
	}


	public static function pre_css_output()
	{
		global $context;

		foreach ($context['css_files'] as $key => $file)
		{
			$context['css_files'][$key]['options']['url'] = 'http://blabla.com/';
		}
	}
}
Bugs creator.
Features destroyer.
Template killer.

Re: Combined CSS

Reply #12 –

Thank you for the code emanuele.

The first one is fine as it intends to change all theme url to the one we need each time the theme is loaded. In the subforum addon case we will be using $_SERVER['SERVER_NAME so that in abc.com subforum it will show abc.com url and in xyz.net it will show xyz.net url.

The second one, though I haven't tested it yet with $_SERVER['SERVER_NAME, I think will be a problem. If I put abc.com url, then in the combined css file, the url will be fixed with abc.com. Similarly if I were to use xyz.net. I am quite sure that they won't be two css file.

The problem will not be on non-ssl domain as it care less about the fixed url (for images) in css file. However, if abc.com is SSL url at https://abc.com while xyz.net is not, then the problem will arise if the combined css is using other domain like xyz.net. For this, I have tested it. https://abc.com will realize that the images aren't coming its domain thus consider the SSL is flawed or has minor security breaches on its images url.

Similarly, font-awesome won't respect cross domain if in the combined css it is referred to as xyz.net while the forum is opened in abc.net. Thus, font awesome won't work as well.

What I did was:
Code: [Select]
 public static function post_css_combine(&$combine_name, $combiner)
 {
 	global $settings;

 	DEFINE('THEMEDIR', $settings['theme_dir']);
 	$combine_name = new Site_Combiner(THEMEDIR . '/css', $settings['theme_url'] . '/css');
 	}

And since (before this) I do not know how to stop fixed url in combined css before, I was using:
Code: [Select]
	$url_old2 = $settings['theme_url'];
	$url_new2 = '..';
	$filenames = $settings['theme_url'] . '/css/hive-*.css';
	if (is_array($filenames) || is_object($filenames)) {
	foreach (glob($filenames) as $filename) {
		$str = file_get_contents($filename);
		$str=str_replace("$url_old2", "$url_new2",$str);
		file_put_contents($filename, $str);
		}
	}

Since now I already have your suggested code, I will simply replace the url with ".." in it. But still, I think, I should find a way to stop the url being inserted in the first place, if possible.

By the way, as I just realized, why this site is not using combined css or js? How can we set that? That will be easier, if we can set it to use default instead of combined css.
Last Edit: November 13, 2015, 03:32:46 am by ahrasis

Re: Combined CSS

Reply #13 –

Being the name of the hive created based on the actual_theme_url setting, I'm confident (even though not sure as usual) that having two different actual_theme_url will create two different hives.

Give it a try and let me know.

The reason why it is not used here... I have no idea, probably @Spuds was doing some tests. :P
Bugs creator.
Features destroyer.
Template killer.

Re: Combined CSS

Reply #14 –

Quote from: emanuele – The reason why it is not used here... I have no idea, probably @Spuds was doing some tests. :P
Yup that was me being lazy, turned it off a few days ago and forgot to turn it back on  O:-)