Support » Plugin: Autoptimize » Boxzilla

  • Resolved Fionavar

    (@fionavar)


    Hi there,

    The CSS code for Boxzilla is being stripped. Currently looking to adding the CSS to the Custom part of my theme, but was wondering if there was a way to not have this happen. Their code goes in the header apparently when generating each page. I can send you the email discussion if that would be helpful?

Viewing 9 replies - 16 through 24 (of 24 total)
  • The problem is that the theme component of the plugin is not displaying. There should be a coloured border on the left. What occurs now is the same image you shared previously – just the grey semi-transparent box. What I do not understand is that Boxzilla actually gave me the CSS code for the box and it is in the custom CSS file and the border still does not appear:

    .boxzilla-9673.boxzilla-theme a{ color: #448aff; }
    .boxzilla-9673.boxzilla-theme a:hover { color: #2b71e6; }
    .boxzilla-9673.boxzilla-theme input[type=”submit”], .boxzilla-9673.boxzilla-theme input[type=”button”], .boxzilla-9673.boxzilla-theme button { background: #448aff; }
    .boxzilla-9673.boxzilla-theme input[type=”submit”]:hover, .boxzilla-9673.boxzilla-theme input[type=”button”]:hover, .boxzilla-9673.boxzilla-theme button:hover { background: #2b71e6; }
    .boxzilla-9673.boxzilla-theme-left-border { border-left-color: #f2e279; }

    FYI: I did try disabling CSS and Java a you suggested to see if that would help figure out which one was being blocked. It was less than clear. I thought it was CSS and had entered the CSS exclusion – thought it was good and then today borders were gone. Tried entering JS but that caused the boxes to no longer appear.

    Plugin Author Frank Goossens

    (@futtta)

    well, if I understand correctly; AO is not active and the custom style still does not show, right? so you might as well re-enable AO? 🙂

    concerning the custom CSS; I can see it being loaded, so the problem is that the styles have no impact. so I had a look at the CSS, specifically your colored button on the left and it works OK if you change the CSS to

    
    .boxzilla-8733 { border-style:solid; border-left-color: #e2da31; }

    so maybe you need (to ask Bozilla) to re-evaluate the CSS?

    Hi Frank,

    Actually AO is live – the efficacy of the plugin is just too valuable not to make use of it. I might follow-up with them about the CSS. Just need to figure out if committing anymore time to this is useful. Please know I am VERY grateful for your time!

    Hi Frank,

    This just came from Boxzilla:

    _________
    This does affect the box when “Auto Optimize” is disabled. This code is added inside the <head> tag of your website. When AutoOptimize is enabled, it removes this code from the <head> tag and adds it to a CSS file https://adeaconsmusing.ca/wp-content/cache/autoptimize/css/autoptimize_97846175628352d6b55a3cb55a184714.css.

    This is what’s been causing the issue. There might be some CSS error in the generated file which results in the end code not being used.
    _______

    Is this helpful?

    Plugin Author Frank Goossens

    (@futtta)

    as the boxzilla box is also missing the custom style with AO disabled; no 🙂

    the root problem seems to be (also when AO is disabled) that this block of JS;

    
    <script type="text/javascript">var el = document.querySelector('.boxzilla-8733'); el.className = el.className + ' boxzilla-theme boxzilla-theme-left-border';</script>

    results in this JS error:

    07:08:25.040 TypeError: el is null 1 adeaconsmusing.ca:710:52
    https://adeaconsmusing.ca/:710:52

    which means the CSS code provided does not work as the selectors do not match. when you change the CSS code to this however:

    when you change the inline CSS to;

    .boxzilla-8733 a{ color: #448aff; }
    .boxzilla-8733 a:hover { color: #2b71e6; } 
    .boxzilla-8733 input[type="submit"], .boxzilla-8733.boxzilla-theme input[type="button"], .boxzilla-8733.boxzilla-theme button { background: #448aff; } 
    .boxzilla-8733 input[type="submit"]:hover, .boxzilla-8733.boxzilla-theme input[type="button"]:hover, .boxzilla-8733.boxzilla-theme button:hover { background: #2b71e6; }
    .boxzilla-8733 { border-style:solid; border-left-color: #e2da31; }

    you’ll see it will work (as the non-existing parts of the selector were removed).

    frank

    Thanks Frank! I have passed this on to Boxzilla – will get back to you. This is most kind of you! Any thoughts of a Pro version of AO that takes GTMetrix tweaks in their totality as a plugin? No one has done that and I would certainly purchase that from you to have one plugin to tweak performance fwiiw 🙂

    Plugin Author Frank Goossens

    (@futtta)

    the scope of gtmetrix (and google pagespeed insights) is a lot more broad then AO, so probably not 🙂

    Fair enough Frank 🙂

Viewing 9 replies - 16 through 24 (of 24 total)
  • The topic ‘Boxzilla’ is closed to new replies.