← All examples

SoundCloud: outline key layout regions

Outlines the main SoundCloud containers with a dashed border to make writing custom CSS easier.

Code to copy

// Outline key SoundCloud layout regions to help write custom styles
const targets = ['.playControls', '.soundList', '.l-main', '.header', '.sidebarModule', '.playbackSoundBadge'];
targets.forEach(function (sel) {
  document.querySelectorAll(sel).forEach(function (el) {
    el.style.outline = '2px dashed #ff5500';
    el.style.outlineOffset = '-2px';
  });
});

How to use this example

1. Copy the code with the button above.
2. Install JustZix (2 minutes) and open the extension on the target page.
3. Add a new rule matching that page.
4. Paste the code into the rule's JavaScript panel and save — it runs on every page visit.