Home Forums Weaver Xtreme Theme V5 weird problem with SVG via CSS

Viewing 16 posts - 1 through 16 (of 17 total)
  • Author
    Posts
  • #69935
    jsternfe
    Participant

    Okay, I spoke too soon when I said I was able to update all three of my websites to V5 with no further problems.  I mark external links in the entry-content area with an SVG arrow, similar to the technique described here:

    https://instance-factory.com/?p=2083

    It worked fine before, but since updating to V5 yesterday, there is now just blank space where the SVG box arrow should be.  For example, on the main page:

    https://www.harveymercheum.com/

    the “Virtual Museum” hyperlink is external and should have a box arrow next to it but just has blank space now.  I have tried adding !important to the CSS, and tried it on FireFox, Chrome and whatever browser my Android phone uses and all are not working.  Any help please?

    -Jon

     

    #69942
    Weaver
    Keymaster

    Not sure how you did that, but your SVG code seems to be in a file in the /wp-content/uploads/weaverx5-subthemes directory called weaverxt-style-sheet.min.css. That file is NOT a standard Weaver Xtreme file, AND it has been minimized. I don’t know how that file ended up in that directory, let alone minimized.

    But I suspect that is the source of the missing external link arrow.

    #69947
    jsternfe
    Participant

    Hi @Weaver,

    I suspect the “Minify CSS” in SiteGround Optimizer did this.  Problem is, I turned it off, purged the cache, tried saving the Weaver settings again and it is still not working.  Any idea how to recover?

    -Jon

     

    #69948
    scrambler
    Moderator

    I can see the code for the arrow in your custom CSS and a modified version of the CSS to apply it to a link

    :root {
    –icon-external-link: url(‘data:image/svg+xml,\
    <svg xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”-24 -24 48 48″> \
    <defs> \
    <mask id=”corner”> \
    <rect fill=”white” x=”-24″ y=”-24″ width=”48″ height=”48″></rect> \
    <rect fill=”black” x=”2″ y=”-24″ width=”22″ height=”26″></rect> \
    </mask> \
    </defs> \
    <g stroke=”blue” fill=”blue” stroke-width=”4″> \
    <rect x=”-20″ y=”-16″ width=”32″ height=”32″ rx=”7″ ry=”7″ stroke-width=”3″ fill=”none” mask=”url(%23corner)”/> \
    <g transform=”translate(1,0)” stroke-linecap=”square”> \
    <line x1=”0″ y1=”0″ x2=”17″ y2=”-17″ stroke-width=”6″/> \
    <polygon points=”21 -21, 21 -8, 8 -21″ stroke-linejoin=”round” stroke-width=”3″/> \
    </g> \
    </g> \
    </svg>’);
    }

    .entry-content a[href^=”http”]:not[href*=”harveymercheum.com”]):not([href*=”bit.ly”])::after {
    content: ”;
    background: no-repeat left .25em center var(–icon-external-link) !important;
    padding-right: 1.5em !important!;
    }

    but that does not activate the arrow on virtual museum.

    If I add the generic CSS selector below

    a[target=”_blank”]::after {
    content: ”;
    background: no-repeat var(–icon-external-link);
    padding-right: 1em;
    }

    Then it shows the Arrow on the Virtual museum. So I suspect the modified CSS selector is wrong (will check further)

    Also, Minify and optimizing plugin for CSS and JS are known to break the theme as weaver already optimizes and minifies its JS and CSS. I highly suggest to deactivate these, or make sure to exclude ALL Theme JS / CSS from its optimization

    #69950
    jsternfe
    Participant

    I am using Appearance->Weaver Xtreme Admin->Main Options->Fonts&Custom->Custom CSS Rules and yes that CSS is there slightly modified, right below the creation of the SVG.  Not sure why it is not saving?

    Also, is there a list of JS/CSS files Weaver uses that I should be excluding?

    -Jon

     

    #69952
    scrambler
    Moderator

    I edited my post while you posted, so reread my post above, I see your modified CSS and the problem seems to be that the modified selector does not apply to the Virtual museum link (may be syntax error).

    If I replace it with the generic selector, it works.


    @weaver
    would have to comment on if there is a list of Theme CSS and JS that should NOT be optimized by a plugin

     

    #69953
    scrambler
    Moderator

    OK, so there was some syntax errors in the CSS rule (Missing (, extra !…)

    the one below appear to work

    .entry-content a[href^="http"]:not([href*="harveymercheum.com"]):not([href*="bit.ly"])::after {
    content: '';
    background: no-repeat left .25em center var(--icon-external-link) !important;
    padding-right: 1.5em !important;
    }
    #69954
    scrambler
    Moderator

    For the optimization, If the plugin allows to set exclusions by folder, then excluding anything in the theme folder should do it

    #69963
    jsternfe
    Participant

    Very sorry about the typos, they must have gotten in there while I was adding and removing code trying to fix the problem.  I finally cut and pasted it back from @scrambler’s post above, purged cache again, made sure CSS minify is off, and the selector is still not working for me.  I swear it worked on V4.  Any idea what I’m doing wrong now?

    I will look into exclusion by folder before activating the minify again.

    -Jon

     

    #69968
    Weaver
    Keymaster
    #69973
    scrambler
    Moderator

    I can see the arrow on the virtual museum link on your site.

    If you don’t, then it has to be a cache issue

     

    #69988
    jsternfe
    Participant

    @scrambler, I still can’t see them, even if I force refresh or use Incognito/Private window.  I tried loading 5.0.1 and now I’m getting some sort of PHP variable error.  I am going to restore the site from backup and hold off on V5 for now.

     

    #69989
    jsternfe
    Participant

    I logged in and saw an update to 5.0.2, so I loaded it.  It seems to have fixed the PHP variable error, but I was still missing my arrows, so I restored from a save with 4.4.8 and now my arrows are back.  I contacted Siteground and the Optimizer exclude does not allow directories, so I am going to have to compile my own list of what to exclude and set up those rules.  I will then try loading 5.0.2 again.  Might take me a couple of days.  Fingers crossed!

     

    #69990
    scrambler
    Moderator

    Make sur you also updated the theme support plugin to its latest version.

    For the arrows, the bad CSS with the syntax errors is back.

    Change it back to the one I gave you, Clear all your caches, and post back so we can nail this one  🙂

    #70001
    jsternfe
    Participant

    @scrambler, I think I have it.  There were multiple problems going on.  The “Purge SG Cache” option in my WordPress dashboard was not clearing my Cloudflare cache, so I was not seeing changes properly. By staying logged into my Cloudflare dashboard and “purging everything” from there, I was able to get more accurate test results.  Enabling CSS minification does seem to be the cause of the problem.  Siteground’s exclude does not allow directories, as I stated above, but not only that, it gives you a limited list of what can be excluded, presumably what it thinks is enqueued.  So the only Weaver CSS it showed was /uploads/weaverx5-subthemes/style-weaverxt.css and I selected it for exclusion and purged caches and it seems to be working.  Could you please check on your side and make sure 1) you can see the arrows and 2) the CSS is correct no typo’s?  If so, I think we can mark this resolved!

    -Jon

     

    #70002
    scrambler
    Moderator

    It seems to be working, but there are more than one CSS file in the theme and many JS files, if these are not all excluded from any optimization, you open yourself to a lot of potential problems that you may not notice, but customer will fall into depending on what device or browser they use.

    If you can’t exclude ALL the Theme CSS and JS files from the optimization plugin, I would deactivate the plugin.

    If you need optimization for other things, then you may want to look for a plugin that allows proper exclusions

Viewing 16 posts - 1 through 16 (of 17 total)
  • You must be logged in to reply to this topic.