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

#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