Change the background color of a specific replicator set header

[svennesvensson]

Hello,

is there a way to change the background color of a specific replicator set header as shown in the attached screenshot.
What I want to achieve in my special case is highlighting the layout specific replicator sets (column, content section etc.), as a visual anchor for the editor.

Thank you for your help!

[pixelikone]

Hello,

the best way would certainly be to do the customization within the Vue-Components, here is a simple solution with JavaScript that does it.

In "app/Providers/AppServiceProvider.php" remove the comment for the script as described here: https://statamic.dev/extending/control-panel#adding-css-and-js-assets

Create the folder "public/vendor/app", create a subfolder "js" and create a file there named "cp.js". So the full path is "public/vendor/app/js/cp.js".

To format all set headers with the name "column", insert the following inside the "cp.js" file.

window.addEventListener("DOMContentLoaded", (event) => {
  // select all replicator labels on current page
  const replicatorLabels = document.querySelectorAll('.replicator-set-header-inner > label');
  
  replicatorLabels.forEach(colorRow);
  
  function colorRow(row) {
    // check if replicator label matches and add style
    if (row.innerText === "Spalte") {
      row.closest(".replicator-set-header").style.backgroundColor = "#fffb02";
    }
  }
});

[svennesvensson]

Hi @neon0r, that works :)
Thank you so much for your help!

[sptv2reg]

Hi @svennesvensson - Interesting lightweight pagebuilding concept. I suppose you could "hack" it even more like disabling drag'n'drop on the structural Spalte-components. Anyway, how are you rendering this Antler wise? Would it be necessary to calculate the overall grid structure beforehand or can you actually render this from top to bottom?