Autoptimize Causing Buddypress Styles Issue

could you post the URL to your site knowitallninja?

I can, it’s https://www.knowitallninja.com.

A good page to see the issue (without being logged in) would be https://www.knowitallninja.com/members/

The tabs for different member types are being styled grey by the buddypress.min.css and not blue which they would be from my stylesheet.

ok, don’t know if it’s by configuration or a bug, but buddypress.min.css is not aggregated, so you are loading

autoptimized_xyz.css (which contains your knowitallninja-style.css)
buddypress.min.css
fontawesome.min.css
sensei-buddypress.min.css

so as buddypress.min.css is loaded after the autoptimized styles, it is overwriting your own css.

now the question; why isn’t buddypress.min.css (and sensei-buddypress.min.css) aggregated. what do you have in your AO CSS optimization configuration?

As mention I have the “Optimize CSS code”, “Remove Google Fonts” and “Aggregate Inline CSS” settings checked.

I also have admin-bar.min.css & dashicons.min.css in the exclusions.

ok, installed buddypress on my local dev-machine and buddypress.min.css is aggregated (as it should be). so the question is why does this not work for you. my best guess; plugin conflict or your functions.php (re. you mentioning that this does not happen when you deregister dashicons).

so one way to go forward would be to systematically disable/ enable plugins (and code in your functions.php) to try to pinpoint the culprit.

the alternative way to go forward (a workaround really) would be to force AO to insert the autoptimized CSS later (i.e. after buddypress.min.css) with a couple of lines of code that hook into the API;

add_filter('autoptimize_filter_css_replacetag','ninja_override_css_replacetag',10,1);
function ninja_override_css_replacetag($replacetag) {
	return array("</head>","before");
	}

hope this helps,
frank

Hi Frank,

I tried deactivating plugins, but nothing helped (except deactivating autoptimize). I also looked through my functions.php and couldn’t find anything but just to be sure I got rid of all my enqueued scripts and styles apart from my default style sheet, that still didn’t help.

Your code example did work at least though, so I’ve got it working in that sense at least.

Thanks for all the help.

well, at least it’s working ??

if you would want to take this further, we could add some temporary code to autoptimizeStyles.php (and possibly autoptimizeBase.php) to echo debug info to the php-errorlog, let me know if you want to go down that road.

frank

Hi Frank,

I hope you don’t mind me resurrecting this thread.

I stopped using autoptimize for a while (I can’t remember why), and just recently started to use it again. However I am having a similar problem as before but the fix we came up with above no longer works.

The issue is that autoptimize is now creating two css files. One for most of my css and 1 for the buddypress.min.css. The code you gave me before no longer works as the autoptimize version of buddypress.min.css is also moving along with the main one and so is not in the new order with the code you gave.

Have you ever in the last 9 months had anyone with a similar problem?

Thanks

Dan

yeah, found root cause a while ago; media attribute of the original CSS-files. all your CSS comes with media='all'. all but one that is;

<link rel='stylesheet' id='bp-legacy-css-css'  href='https://19a6911e511af601698aae1e.knowitallninja.netdna-cdn.com/wp-content/plugins/buddypress/bp-templates/bp-legacy/css/buddypress.min.css?ver=2.8.2' type='text/css' media='screen' />

and Autoptimize honours media-types (it has to, as sometimes this is relevant), creating separate aggregated CSS files for each type found.

so you could either dequeue the buddypress style and re-enqueue with media='all' or you could use the solution described in this long-ish blogpost which, who’d have thunk, also deals with media-types in buddypress ??

the code snippet in your case would look something like;

add_filter('autoptimize_filter_css_tagmedia','taming_buddypress',10,2);
function taming_buddypress($media,$tag) {
  if ( strpos($tag,"bp-legacy/css/buddypress.min.css") !== false ) {
    $media=array("all");
  }
  return $media;
}

have fun ??
frank

That works perfectly. Thanks Frank! If only everyone gave support like you do. ??

great! ??

I’m finalizing AO 2.2, would be great if you could take it for a spin?

I am happy to. Won’t be able to check it out until tomorrow but will do so 100%.

thanks, you’ll be my favorite ninja of the day ??