@Matthew, can a SVG be replaced with phplugins without having to replicate all SVGs?
hope 
Nope. And anyway, the SVG here is bundled into the JS. It’s replaceable, but how to do it via Backlight’s UI without making a mess of things, I don’t know.
IMO, not worth it.
Hi Matt,
if this is too complicated, you could at least make the handle background white and round it off, e.g:
.handle {
position: absolute;
top: var(--handle-position-start);
pointer-events: none;
box-sizing: border-box;
margin-left: 1px;
transform: translate(calc(-50% - 0.5px), -50%);
line-height: 0;
background: white !important;
border: 1px solid #c6c6c6 !important;
padding: 10px !important;
border-radius: 50px !important;
}
but this only works temporarily for me, because the code is not applied to kookaburra.css
Not something I can do, because the stylesheet can’t reach element in the shadowDOM.
But you can do this in PHPlugins.
function scripts() {
echo <<<HTML
<script>
const comparisons = document.querySelectorAll('img-comparison-slider');
const stylesheet = new CSSStyleSheet;
stylesheet.replaceSync(`
.handle {
background-color: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 8px;
padding: 6px;
}`
);
comparisons.forEach(instance => {
instance.shadowRoot.adoptedStyleSheets.push(stylesheet);
});
</script>
HTML;
// do not indent line above
return false;
} // END /**/
Hi Matt,
I copied and pasted the script in phplugins but for some reason the script does not work for me 
Initial things to check:
Did you select the right PHPlugins file?
Do you already have a scripts function declared elsewhere?
If you do already have a scripts function declared, just merge the contents so that its’ all in one function.
Oh, also, if you’re copying from here, then make sure the quotes and single-quotes aren’t the rich-text curly versions. Replace them with “straight” editor characters.
Hi,
- it is the correct phplugins file (works with custom css)
- only this script is active
- I have tried the following but it does not work:
function scripts() {
echo <<<HTML
<script>
const comparisons = document.querySelectorAll('img-comparison-slider');
const stylesheet = new CSSStyleSheet;
stylesheet.replaceSync(`
.handle {
background-color: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 8px;
padding: 6px;
}`
);
comparisons.forEach(instance => {
instance.shadowRoot.adoptedStyleSheets.push(stylesheet);
});
</script>
HTML;
// do not indent line above
return false;
} // END /**/
and
function scripts() {
echo <<<HTML
<script>
const comparisons = document.querySelectorAll("img-comparison-slider");
const stylesheet = new CSSStyleSheet;
stylesheet.replaceSync(`
.handle {
background-color: rgba(255, 255, 255, 1.0);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 8px;
padding: 6px;
}`
);
comparisons.forEach(instance => {
instance.shadowRoot.adoptedStyleSheets.push(stylesheet);
});
</script>
HTML;
// do not indent line above
return false;
} // END /**/
any ideas???
Thank you,
best regards,
Oliver
Try formatting it this way?
function scripts() {
echo "
<script>
const imgComparisonSliders = document.querySelectorAll('img-comparison-slider');
const stylesheet = new CSSStyleSheet;
stylesheet.replaceSync(`
.handle {
background-color: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 8px;
padding: 6px;
}`
);
imgComparisonSliders.forEach(instance => {
instance.shadowRoot.adoptedStyleSheets.push(stylesheet);
});
</script>
";
return false;
} // END /**/
Otherwise, can you share a link to a page where you’d expect this to be working?
the custom css file is different than the phplugins files. For Kookaburra, you should be starting with the phplugins-kookaburra-sample.php file
1 Like
Rod thank you!
I apologize for my confusion, of course I meant this:
/* DELETE THIS LINE
// Insert custom CSS into the document head
function style() {
echo <<<HTML
<style>
* { background-color: rgba(255, 0, 0, 0.25) !important; }
</style>
HTML;
// do not indent line above
return false;
} // END /**/
Matt, thanks a lot for this great update 
1 Like
Matt, another thing,
do you think it’s possible to use Multilanguage in Label 1 / Label 2 of Image Comparison like:
<div data-lang="de">unmöbliert</div><div data-lang="en">unfurnished</div><div data-lang="es">sin amueblar</div>
Best regards,
Oliver
I hadn’t considered that, but just tried it and it seems to work fine. Is it not working in your experience?
Hi Matt,
doesn’t work for me this way 
<div class="col_6 push_6">
<div data-albums="809443" data-presentation="img-comparison-slider" data-images="809443_34077,809443_68229" data-direction="horizontal" data-position="50" data-label1="<div data-lang="de">unmöbliert</div><div data-lang="en">unfurnished</div><div data-lang="es">sin amueblar</div>" data-label2="raumidee"></div>
Well, you can’t put HTML into the attribute values of an HTML element, so not sure why you would expect that to work.
Try it like this:
<div class="col_6 push_6">
<div data-lang="de" data-albums="809443" data-presentation="img-comparison-slider" data-images="809443_34077,809443_68229" data-direction="horizontal" data-position="50" data-label1="unmöbliert" data-label2="raumidee">
<div data-lang="en" data-albums="809443" data-presentation="img-comparison-slider" data-images="809443_34077,809443_68229" data-direction="horizontal" data-position="50" data-label1="unfurnished" data-label2="raumidee">
</div>
Or like this:
<div data-lang="de" class="col_6 push_6">
<div data-albums="809443" data-presentation="img-comparison-slider" data-images="809443_34077,809443_68229" data-direction="horizontal" data-position="50" data-label1="unmöbliert" data-label2="raumidee">
</div>
<div data-lang="de" class="col_6 push_6">
<div data-albums="809443" data-presentation="img-comparison-slider" data-images="809443_34077,809443_68229" data-direction="horizontal" data-position="50" data-label1="unfurnished" data-label2="raumidee">
</div>