Support » Plugin: Autoptimize criticalcss.com power-up » Button style weirdness

  • Resolved spirittlk

    (@spirittlk)


    On my site, I use the Avada theme. In theme options we set defaults. The button defaults should be dark blue for regular, pink for hover. On my site, various buttons are, instead, using a style that was only defined on my Sedona pages (under http://www.visionsofheaven.com/sedona – for example, buttons at the top. The orange color is defined directly in the button element in my theme’s builder on those pages.).

    An example of this is on the home page where if you search for a button with text “TELL ME MORE” it is orange. Scroll down a tiny bit and you’ll see a button that says “DETAILS” that is (correctly) blue. I actually copied the DETAILS button and edited it into the TELL ME MORE BUTTON in my theme builder but the colors differ. This problems exists on many other pages on my site (for example: https://www.visionsofheaven.com/2018-1006-manifesting-in-the-flow-of-grace – register and directions buttons at the top, etc. Interestingly the hover color is correct).

    Any ideas how I might debug this? I have verified it only works when using the CriticalCss plugin by selecting “inline and defer” under css in autoptimize. Thank you! If worse comes to worse, I can go into each problem page and fix it manually, but I’m hoping this isn’t an indication of something deeper that is wrong. Thank you!!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Hey Spirittlk,
    Can you try removing wp-content/uploads from the list of AO CSS optimization exclusions?

    Hope this helps,
    frank

    I just deleted that but still have the issue – bedtime here but I’ll check back in the morning 🙂 Thank you! I love your plugin!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    well, that was step 1/2, step 2/2 would be removing the matching critical CSS-rule to it can be re-generated 🙂

    That sounds good – I will see if I can figure that out during a break or later tonight and report back 🙂 Thank you!

    If I remove all the theme’s css file rules, then will they be regenerated when I turn off page cache and reclick? I don’t know which one has the code affecting my page.

    I went to delete one and got the messages “This Critical CSS rule will be deleted immediately and cannot be recovered” so I held off for now. By “cannot be recovered” does that mean I’ll not be able to regenerate? Sorry for my ignorance!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    if you remove a rule, it will regenerate, but with the correct CCSS 🙂

    Woo hoo! That seems to have solved the button problem! Thank you! I did as you said – (1) removed the wp-content/uploads from the exclusion list (2) removed the css rules (3) purged all caches, turned off page cache and reclicked on all pages (3) turned on page cache. Buttons are now working great!

    I have only one more theme style anomaly that I’m clueless about. I’ve verified that it is not a problem when the plugin is off.

    Pages (excluding the front page) on Safari browser have a 50px padding at the top. This is one example:

    https://www.visionsofheaven.com/newsletter

    On Chrome they do not have the padding. I went to look at the code and the body declaration has different tags in different browsers. As you can see in Safari there is a padding tag being added among a few other things:

    Safari –
    <body data-rsssl=”1″ class=”page-template page-template-100-width page-template-100-width-php page page-id-223 woocommerce-js fusion-image-hovers fusion-body ltr no-tablet-sticky-header no-mobile-sticky-header no-mobile-slidingbar mobile-logo-pos-left layout-wide-mode fusion-top-header menu-text-align-center fusion-woo-product-design-clean mobile-menu-design-modern fusion-show-pagination-text fusion-header-layout-v2 avada-responsive avada-footer-fx-none fusion-search-form-classic fusion-avatar-square do-animate” style=”zoom: 1; padding-top: 50px; height: auto;”>

    Chrome –
    admin-bar no-customize-support woocommerce-no-js fusion-image-hovers fusion-body ltr no-tablet-sticky-header no-mobile-sticky-header no-mobile-slidingbar mobile-logo-pos-left layout-wide-mode fusion-top-header menu-text-align-center fusion-woo-product-design-clean mobile-menu-design-modern fusion-show-pagination-text fusion-header-layout-v2 avada-responsive avada-footer-fx-none fusion-search-form-classic fusion-avatar-square”>

    I don’t know if it has to do with this “Review” request in criticalCSS:
    R is_page ccss_6496b7c3850c25fe83f1bd207ed44278_R.css

    Do you know where I’d begin to look to solve this? Thank you again for your help!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    the padding-top being added even happens when Autoptimize (and thus the criticalcss “child-plugin”) is not active. it looks like your theme has JS that depending on the browser adds inline CSS to the <body tag.

    here’s a screenshot of your non-autoptimized (see URL that has ?ao_noptimize=1 to disable AO for that request) newsletter-page for a Google Nexus 7 tablet;

    so this is _probalby_ added by your theme’s JS, maybe check with the theme developers?

    frank

    Thank you Frank, perhaps it came with a theme update recently 🙂 Your plugin is really amazing and I appreciate the great support! I think we can close this one!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Button style weirdness’ is closed to new replies.