Guía de personalización

Tu canal, con identidad propia.

Empieza con colores y secciones. Después usa CSS para dar forma al cristal, la tipografía y los detalles. Aquí tienes los pasos y un diseño completo para probar.

Personalizar mi canal Ver el ejemplo con CSS

Prueba este estilo en tu perfil

Una cabecera con tu nombre, una ficha lateral y paneles en azul y marfil: un estilo inspirado en los canales clásicos de YouTube. Compara el resultado con el diseño base y copia el CSS para adaptarlo a tu gusto.

voom.tv/@tu_usuario En vivo

Tu canal

@tu_usuario ·Canal desde 2026

Cintas nocturnas, mundos digitales y música desde mi cuarto. Sube el volumen y quédate un rato.

chat_bubble share

Suscriptores 1280
Vídeos 3
Visualizaciones 24.600
Danmaku 340
Apoyos 72

Portada Vídeos 3 Favoritos Pasados Listas Muro Ficha

play_arrow

push_pin En portada · lo más visto Una noche entre luces y agua 12.600 visualizaciones

local_fire_departmentLo más visto

Una noche entre luces y agua

Construyendo nuestro refugio digital

Sonidos para mirar las estrellas

scheduleSubidas recientes

Una noche entre luces y agua

Construyendo nuestro refugio digital

Sonidos para mirar las estrellas

01 · Tu nombre en el banner02 · Identidad y cifras03 · Paneles para tu contenido

Revisa el estilo en Escritorio, Tablet y Móvil y explora las pestañas del canal. Si tienes sesión iniciada, la vista usa los datos de tu perfil; sin sesión, muestra una identidad de ejemplo. Los vídeos y las ilustraciones son muestras: al aplicar el CSS se mantienen tus contenidos. Los formularios y botones del visor solo muestran su apariencia.

Del perfil al canal publicado

La identidad, la apariencia y el contenido se editan en sus áreas correspondientes.

Prepara tu identidad

En Perfil, cambia tu avatar y biografía. El banner y el nombre del canal se editan en Voom! Studio.
Elige la base visual

Abre Apariencia → Mi canal → Temas y colores. Elige un tema y ajusta colores, cristal y esquinas. «Aplicación» cambia tu experiencia de Voom!; «Mi canal» cambia lo que ven tus visitantes.
Organiza fondo y contenido

En Fondo, elige un preset o sube tu imagen. En Módulos, ordena u oculta las secciones de portada y elige Estanterías o Mosaico Aero. El CSS cambia la presentación; los vídeos y textos proceden de tu contenido.
Prueba el CSS como borrador

En CSS avanzado, pulsa «Abrir editor» y pega el código. Activa «Vista previa del borrador» y compara Escritorio, Tablet y Móvil. Los efectos :hover se prueban pasando el cursor sobre su elemento.
Aplica y publica

«Aplicar al canal» incorpora el CSS al borrador del canal. Pulsa después «Publicar» para guardarlo y mostrarlo a tus visitantes. «Descartar borrador» cancela la edición de CSS abierta; revisa también los demás cambios pendientes antes de publicar.

Lleva este estilo a tu canal

El bloque siguiente es el mismo CSS que aplica el ejemplo. Empieza cambiando sus colores; después ajusta el tamaño del nombre, las esquinas y las sombras.

Para acercarte a este ejemplo, usa la base predeterminada en Temas y colores, deja el fondo y el banner sin imagen y mantén visibles Subidas recientes y Lo más visto. Las imágenes y los colores personalizados existentes pueden cambiar el resultado. El banner lee tus datos automáticamente: attr(data-channel-name) muestra el nombre, attr(data-channel-user) el usuario y attr(data-channel-since) el año de creación del canal.

Ver y editar el CSS completo

/* TU CANAL — inspirado en el YouTube clásico.
   El banner toma automáticamente el nombre, usuario y año de creación del canal.
   Usa la base predeterminada, sin imagen de fondo ni banner.
   Repetir .ch refuerza estas reglas frente a los presets, siempre dentro del canal. */
.ch.ch.ch.ch {
  --bg-surface: #eee9dc;
  --bg-surface-solid: #eee9dc;
  --bg-surface-hover: #e1dbc9;
  --bg-surface-elevated: #fffaf0;
  --bg-surface2: #e4dece;
  --bg-input: #fffaf0;
  --bg-input-tint: #235f8b10;
  --bg-icon-btn: #eee9dc;
  --bg-overlay: #eee9dc;
  --glass-bg: #eee9dc;
  --border-glass: #a6b6bb;
  --glass-border-t: #fffaf0;
  --text-link: #235f8b;
  --text-tertiary: #496576;
  --icon-muted: #496576;
  --accent-blue-light: #235f8b;
  --accent-blue-dark: #183247;
  --channel-accent: #235f8b;
  --channel-accent-rgb: 35, 95, 139;
  --channel-accent-text: #235f8b;
  --channel-accent-ink: #fffaf0;
  --btn-primary-text-shadow: none;
  --shadow-btn-primary: 0 2px 5px #30220c33;
  --aero-rose: #a52645;
  --aero-amber: #805000;
  --text-primary: #183247;
  --text-main: #183247;
  --text-secondary: #385568;
  --text-muted: #496576;
  --ch-heading: #183247;
  --ch-a: #235f8b;
  --border-subtle: #a6b6bb;
  --glass-border: #a6b6bb;
  --accent-blue-base: #235f8b;
  --accent-blue-rgb: 35, 95, 139;
  --grad-primary: linear-gradient(#ffe8a2, #e7b84f);
  --text-on-accent: #30220c;
  container: channel-shell / inline-size;
  padding: 18px 18px 30px;
  background:
    repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at top, #315a76, #101f30 70%);
}

/* El marco: cabecera ancha, perfil lateral y contenido a la derecha. */
.ch.ch.ch.ch .ch-page {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-rows: auto max-content minmax(0, 1fr);
  gap: 12px 16px;
  max-width: 1060px;
  margin: auto;
  padding: 12px;
  border: 1px solid #7098b0;
  border-radius: 8px;
  background: linear-gradient(135deg, #28455c, #152b3e);
  box-shadow: inset 0 1px 0 #ffffff44, 0 15px 45px #00000066;
}
.ch.ch.ch.ch .ch-hero { display: contents; }
.ch.ch.ch.ch .ch-profile {
  grid-column: 1;
  grid-row: 2 / span 2;
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  gap: 12px;
}
.ch.ch.ch.ch .ch-banner {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 170px;
  border-radius: 5px;
  border: 1px solid #7bbac5;
  mask-image: none;
  -webkit-mask-image: none;
  background:
    radial-gradient(circle at 82% 30%, #e7f1cf 0 24px, #a4c6c766 25px, transparent 56px),
    repeating-linear-gradient(175deg, transparent 0 17px, #78c8d015 18px 19px),
    linear-gradient(165deg, #12263d, #286278 62%, #0c263c);
  box-shadow: inset 0 1px 0 #ffffff66, inset 0 -30px 60px #03122188;
}
/* Tags nativos: attr() lee los datos del canal, también en la vista previa. */
.ch.ch.ch.ch .ch-banner::before {
  content: attr(data-channel-name);
  position: absolute;
  inset: 32px auto auto 28px;
  max-width: 70%;
  background: none;
  color: #fff1cd;
  font: 900 clamp(1.5rem, 3cqi, 2.4rem) / 1.1 var(--font-display);
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 #051727, 0 5px 14px #00000099;
}
.ch.ch.ch.ch .ch-banner::after {
  content: attr(data-channel-user) " · " attr(data-channel-since);
  position: absolute;
  inset: auto 28px 25px;
  padding-top: 12px;
  border-top: 1px solid #b4e5e344;
  color: #c8e4e5;
  font: 600 0.65rem / 1.5 var(--font-mono);
  letter-spacing: 0.12em;
  pointer-events: none;
}

/* Identidad lateral: avatar enmarcado, biografía y cifras compactas. */
.ch.ch.ch.ch .ch-identity {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px;
  border: 1px solid #6b91a7;
  border-radius: 5px;
  background: linear-gradient(#375c75, #1b354b);
  box-shadow: inset 0 1px 0 #ffffff33;
}
.ch.ch.ch.ch .ch-avatar {
  align-self: center;
  width: 104px;
  height: 104px;
  margin: 0;
  padding: 5px;
  border: 1px solid #d1e4de;
  border-radius: 4px;
  corner-shape: round;
  background: linear-gradient(#f4f0db, #809caf);
  box-shadow: 0 3px 8px #00000066;
}
.ch.ch.ch.ch .ch-avatar > img, .ch.ch.ch.ch .ch-avatar__initial {
  border-radius: 2px;
  corner-shape: round;
}
.ch.ch.ch.ch .ch-avatar::after { display: none; }
.ch.ch.ch.ch .ch-id.glass-panel {
  --bg-surface: #1b354b;
  --bg-surface-solid: #1b354b;
  --text-primary: #f5f0df;
  --ch-heading: #f5f0df;
  --text-secondary: #c9dde5;
  --text-link: #ffe3a0;
  --ch-a: #ffe3a0;
  margin: 0;
  padding: 12px;
  border: 1px solid #7098b0;
  background: linear-gradient(#26485f, #1b354b);
  box-shadow: inset 0 1px 0 #ffffff22, 0 2px 5px #00000022;
  backdrop-filter: none;
}
.ch.ch.ch.ch .ch-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-shadow: 0 2px 1px #071b2c;
}
.ch.ch.ch.ch .ch-bio { display: block; font-size: 0.8rem; line-height: 1.6; }
.ch.ch.ch.ch .ch-pill { border-radius: 3px; font-size: 0.65rem; }
.ch.ch.ch.ch .ch-pill.glass-panel {
  --bg-surface-solid: #263f52;
  color: #ffe3a0;
  border-color: #78919d;
  background: #263f52;
  padding: 3px 7px;
  box-shadow: inset 0 1px 0 #ffffff22;
}
.ch.ch.ch.ch .ch-handle { margin-top: 10px; gap: 4px; }
.ch.ch.ch.ch .ch-bio { margin-top: 10px; }
.ch.ch.ch.ch .ch-cta, .ch.ch.ch.ch .pv-cta { flex-wrap: wrap; padding-top: 0; }
.ch.ch.ch.ch .ch-subscribe { border-radius: 4px; }
.ch.ch.ch.ch .ch-metrics {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #6b91a7;
  border-radius: 5px;
}
.ch.ch.ch.ch .ch-metric.glass-panel {
  min-width: 0;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label value";
  padding: 10px;
  border: 0;
  border-bottom: 1px solid #b6c2c7;
  border-radius: 0;
  background: #d7e2e7;
  box-shadow: inset 0 1px 0 #ffffff;
}
.ch.ch.ch.ch .ch-metric__icon { display: none; }
.ch.ch.ch.ch .ch-metric__label { color: #385568; font-size: 0.7rem; }
.ch.ch.ch.ch .ch-metric__value { color: #183247; font-size: 0.85rem; }

/* Pestañas y módulos: títulos azules y contenido en papel marfil. */
.ch.ch.ch.ch .ch-dock, .ch.ch.ch.ch .pv-dock {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  padding: 0;
  position: static;
}
.ch.ch.ch.ch .ch-dock__inner { padding: 0; }
.ch.ch.ch.ch .ch-dock--docked {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ch.ch.ch.ch .ch-dock--docked .ch-dock__inner { max-width: none; padding: 0; }
.ch.ch.ch.ch .ch-dock--docked .ch-tabs {
  padding: 4px;
  border: 1px solid #8da8b8;
  border-radius: 5px;
}
.ch.ch.ch.ch .ch-sentinel { display: none; }
.ch.ch.ch.ch .ch-tabs.glass-panel {
  border-radius: 5px;
  padding: 4px;
  background: linear-gradient(#e7edf0, #b9c9d3);
  border-color: #8da8b8;
}
.ch.ch.ch.ch .ch-tab { border-radius: 3px; font-size: 0.8rem; }
.ch.ch.ch.ch .ch-tabs { background: linear-gradient(#e7edf0, #b9c9d3); border-radius: 5px; }
.ch.ch.ch.ch .ch-tab { color: #183247; }
.ch.ch.ch.ch .ch-tab .material-icons-round { color: inherit; }
.ch.ch.ch.ch .ch-tab--on {
  color: #fff5df;
  background: linear-gradient(#497b9e, #224b69);
  border-color: #153b56;
  box-shadow: inset 0 1px 0 #ffffff44;
}
.ch.ch.ch.ch .ch-tab:hover, .ch.ch.ch.ch .ch-tab:focus-visible { color: #173b55; background: #fff1ca; }
.ch.ch.ch.ch .ch-tab--on:hover, .ch.ch.ch.ch .ch-tab--on:focus-visible {
  color: #fff5df;
  background: linear-gradient(#3c6785, #173b55);
}
.ch.ch.ch.ch .ch-tab:focus-visible { outline: 2px solid #173b55; outline-offset: -3px; }
.ch.ch.ch.ch .ch-tab--on::after { background: #ffe3a0; box-shadow: 0 0 6px #ffe3a066; }
.ch.ch.ch.ch .ch-body, .ch.ch.ch.ch .pv-body {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  padding: 0;
  min-width: 0;
  align-self: start;
  align-content: start;
  gap: 14px;
  container: profile-content / inline-size;
}
.ch.ch.ch.ch .glass-panel {
  border-radius: 5px;
  border-color: #a6b6bb;
  background: #eee9dc;
  box-shadow: inset 0 1px 0 #fffaf0, 0 2px 5px #00000033;
}
.ch.ch.ch.ch .ch-front, .ch.ch.ch.ch .pv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ch.ch.ch.ch .ch-section, .ch.ch.ch.ch .pv-shelf { padding: 12px; }
.ch.ch.ch.ch .ch-section:has(> .shelf__head), .ch.ch.ch.ch .pv-shelf:has(> .pv-shelf__title) { padding-top: 0; }
.ch.ch.ch.ch .shelf__head, .ch.ch.ch.ch .pv-shelf__title {
  margin: 0 -12px;
  padding: 8px 12px;
  border-bottom: 1px solid #102d43;
  border-radius: 4px 4px 0 0;
  color: #fff5df;
  background: linear-gradient(#4a7692, #254b67);
  font-size: 0.85rem;
  box-shadow: inset 0 1px 0 #ffffff44;
}
.ch.ch.ch.ch .shelf__title, .ch.ch.ch.ch .shelf__title .material-icons-round,
.ch.ch.ch.ch .pv-shelf__title .material-icons-round, .ch.ch.ch.ch .shelf__link { color: #fff5df; }
.ch.ch.ch.ch .shelf__title { font-size: 0.85rem; }
.ch.ch.ch.ch .pv-trailer, .ch.ch.ch.ch .trailer { padding: 12px; gap: 14px; }
.ch.ch.ch.ch .trailer__actions > *, .ch.ch.ch.ch .ch-cta > *, .ch.ch.ch.ch .pv-cta > * { max-width: 100%; white-space: normal; }
.ch.ch.ch.ch .ch-tab__count { color: inherit; }
.ch.ch.ch.ch .ch-handle, .ch.ch.ch.ch .ch-metric__value { overflow-wrap: anywhere; }
.ch.ch.ch.ch .pv-trailer__title, .ch.ch.ch.ch .trailer__title { font-size: 1.35rem; }
.ch.ch.ch.ch .pv-pill { border-radius: 3px; font-size: 0.6rem; }
.ch.ch.ch.ch .vc { border-radius: 3px; padding: 0; transition: transform 0.2s ease; }
.ch.ch.ch.ch .vc__title { color: #183247; font-size: 0.82rem; font-weight: 700; }
.ch.ch.ch.ch .vc__thumb { border-radius: 3px; outline: 1px solid #94a8b3; box-shadow: 0 2px 4px #00000022; }
.ch.ch.ch.ch .vc:hover, .ch.ch.ch.ch .vc:focus-within { transform: translateY(-2px); }
.ch.ch.ch.ch .vc:hover .vc__thumb { outline-color: #235f8b; }

/* Controles, formularios y menús: paleta completa dentro del canal. */
.ch.ch.ch.ch .btn-aero-primary, .ch.ch.ch.ch .sub-btn, .ch.ch.ch.ch .tp__toggle--on, .ch.ch.ch.ch .seg__opt--on {
  color: #30220c;
  background: linear-gradient(#ffe8a2, #e7b84f);
  border-color: #ad8735;
  text-shadow: none;
}
.ch.ch.ch.ch .btn-aero-primary.following { color: #183247; background: #d7e2e7; }
.ch.ch.ch.ch .sub-btn.is-sub { color: #183247; background: #d7e2e7; }
.ch.ch.ch.ch .btn-aero-secondary, .ch.ch.ch.ch .aero-icon-btn, .ch.ch.ch.ch .aero-pill-btn, .ch.ch.ch.ch .seg,
.ch.ch.ch.ch .vc__dropdown, .ch.ch.ch.ch .sub-menu {
  color: #183247;
  background: #eee9dc;
  border-color: #a6b6bb;
  box-shadow: inset 0 1px 0 #fffaf0, 0 2px 5px #00000022;
}
.ch.ch.ch.ch .btn-aero-primary .material-icons-round, .ch.ch.ch.ch .btn-aero-secondary .material-icons-round,
.ch.ch.ch.ch .aero-icon-btn .material-icons-round, .ch.ch.ch.ch .seg__opt .material-icons-round,
.ch.ch.ch.ch .tp__composer .material-icons-round, .ch.ch.ch.ch .sub-btn .material-icons-round { color: inherit; }
.ch.ch.ch.ch .seg__opt { color: #385568; }
.ch.ch.ch.ch .seg__opt--on { color: #30220c; }
.ch.ch.ch.ch .seg__opt:not(.seg__opt--on):hover, .ch.ch.ch.ch .vc__drop-item:hover,
.ch.ch.ch.ch .btn-aero-secondary:hover, .ch.ch.ch.ch .aero-icon-btn:not(.tp__toggle--on):hover { color: #183247; background: #fff1ca; }
.ch.ch.ch.ch .aero-input, .ch.ch.ch.ch .aero-textarea, .ch.ch.ch.ch .aero-select, .ch.ch.ch.ch .tp__input, .ch.ch.ch.ch .wall__input {
  color: #183247;
  background: #fffaf0;
  border-color: #94a8b3;
  caret-color: #235f8b;
}
.ch.ch.ch.ch input::placeholder, .ch.ch.ch.ch textarea::placeholder { color: #496576; opacity: 1; }
.ch.ch.ch.ch .tp__composer, .ch.ch.ch.ch .tp__composer--float { background: #eee9dc; color: #183247; border-color: #a6b6bb; }
.ch.ch.ch.ch .trailer__actions .btn-aero-primary { color: #30220c; background: linear-gradient(#ffe8a2, #e7b84f); }
.ch.ch.ch.ch .trailer__stats, .ch.ch.ch.ch .trailer__desc, .ch.ch.ch.ch .vc__meta, .ch.ch.ch.ch .pl-card__meta,
.ch.ch.ch.ch .wall__time, .ch.ch.ch.ch .wall__guest, .ch.ch.ch.ch .ch-muted, .ch.ch.ch.ch .cvl-count { color: #385568; }
.ch.ch.ch.ch .trailer__badge, .ch.ch.ch.ch .trailer__more, .ch.ch.ch.ch .wall__name, .ch.ch.ch.ch .ch-tl__video { color: #235f8b; }
.ch.ch.ch.ch .trailer::before, .ch.ch.ch.ch .trailer::after { opacity: 0.12; }
.ch.ch.ch.ch .shelf__head .aero-icon-btn { color: #183247; background: #eee9dc; }
.ch.ch.ch.ch .wall__badge, .ch.ch.ch.ch .wall__pin { color: #30220c; background: #ffe8a2; border-color: #ad8735; }
.ch.ch.ch.ch .wall__act, .ch.ch.ch.ch .wall__count, .ch.ch.ch.ch .wall__total { color: #385568; }
.ch.ch.ch.ch .wall__act--danger, .ch.ch.ch.ch .wall__error, .ch.ch.ch.ch .tp__error { color: #a52645; }
.ch.ch.ch.ch .wall__sticker:hover { color: #183247; background: #e1dbc9; border-color: #235f8b; }
.ch.ch.ch.ch .pl-card__title, .ch.ch.ch.ch .ch-about__text, .ch.ch.ch.ch .ch-tl__date { color: #183247; }
.ch.ch.ch.ch button:focus-visible, .ch.ch.ch.ch a:focus-visible, .ch.ch.ch.ch input:focus-visible, .ch.ch.ch.ch textarea:focus-visible {
  outline: 2px solid #235f8b;
  outline-offset: 2px;
}
.ch.ch.ch.ch .ch-id a:focus-visible { outline-color: #ffe3a0; }
.ch.ch.ch.ch button:disabled { opacity: 0.6; cursor: not-allowed; }

/* El marco y sus piezas cambian juntos, sin columnas implícitas. */
@container channel-shell (max-width: 700px) {
  .ch.ch.ch.ch .ch-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 8px; }
  .ch.ch.ch.ch .ch-profile { grid-column: 1; grid-row: 2; }
  .ch.ch.ch.ch .ch-banner { grid-column: 1; height: 145px; }
  .ch.ch.ch.ch .ch-banner::before { inset: 25px 16px auto; max-width: none; font-size: 1.5rem; }
  .ch.ch.ch.ch .ch-banner::after { inset: auto 16px 20px; letter-spacing: 0.04em; }
  .ch.ch.ch.ch .ch-identity { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
  .ch.ch.ch.ch .ch-avatar { width: 72px; height: 72px; flex-shrink: 0; }
  .ch.ch.ch.ch .ch-id { flex: 1; min-width: 160px; }
  .ch.ch.ch.ch .ch-metrics { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch.ch.ch.ch .ch-metric:last-child { grid-column: 1 / -1; }
  .ch.ch.ch.ch .ch-dock, .ch.ch.ch.ch .pv-dock { grid-column: 1; grid-row: 3; }
  .ch.ch.ch.ch .ch-body, .ch.ch.ch.ch .pv-body { grid-column: 1; grid-row: 4; margin: 0; }
}
/* El vídeo responde al espacio de contenido, descontando la barra lateral. */
@container profile-content (max-width: 660px) {
  .ch.ch.ch.ch .trailer, .ch.ch.ch.ch .pv-trailer { grid-template-columns: minmax(0, 1fr); }
  .ch.ch.ch.ch .ch-about { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ch.ch.ch.ch .ch-about__stats .ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ch.ch.ch.ch .vc { transition: none; }
  .ch.ch.ch.ch .vc:hover, .ch.ch.ch.ch .vc:focus-within { transform: none; }
}

Referencia técnica

Escribe reglas CSS normales. Voom! las limita automáticamente al contenedor de tu perfil.

Elementos que puedes personalizar
Selector	Qué cambia
`.ch`	Lienzo del canal: fondo y variables de color.
`.ch-page`	Contenedor de la cabecera, perfil lateral, pestañas y contenido.
`.ch-banner`	Banner de la cabecera; una imagen subida puede cubrir su fondo CSS.
`.ch-banner::before / ::after`	Textos y adornos del banner; content: attr(...) permite mostrar datos del canal.
`.ch-profile`	Agrupa la identidad y las métricas; el ejemplo lo convierte en una columna lateral.
`.ch-id`	Panel con el nombre, las insignias, el usuario y la biografía.
`.ch-avatar`	Marco del avatar.
`.ch-name`	Nombre del canal en la cabecera.
`.ch-bio`	Biografía del canal.
`.ch-tab`	Pestañas como Portada, Vídeos y Muro.
`.ch-dock / .ch-dock--docked`	Barra de pestañas y su estado al quedar fijada durante el desplazamiento.
`.ch-body`	Contenido de la pestaña activa.
`.ch-metrics / .ch-metric`	Contenedor de las cifras y cada celda de métrica.
`.ch-section`	Paneles de Vídeos, Favoritos, Pasados, Listas y Ficha.
`.wall__head / .wall__composer / .wall__post`	Cabecera, formulario y mensajes del muro.
`.pl-grid / .pl-card`	Rejilla y tarjetas de listas de reproducción.
`.ch-about / .ch-about__bio / .ch-about__timeline`	Distribución de la ficha, biografía e hitos.
`.glass-panel`	Superficies de cristal: identidad, cifras y paneles.
`.vc`	Tarjeta de vídeo; :hover actúa al pasar el cursor.
`.vc__thumb`	Miniatura de la tarjeta.
`.vc__title`	Título de la tarjeta de vídeo.

Ámbito: Las reglas se restringen a .profile-custom-wrapper. html, body y :root se remapean a ese contenedor: no cambian toda la plataforma. Cada vista aplica sus estilos únicamente a su propia instancia. Usa clases estables de esta referencia; los sufijos svelte-… se generan al compilar y pueden cambiar.
Datos dinámicos del banner: Los tags son atributos del elemento .ch-banner y se leen mediante attr() en la propiedad content de sus pseudoelementos. attr(data-channel-name) devuelve el nombre del canal; attr(data-channel-user), el usuario con @; y attr(data-channel-since), «Canal desde» seguido de su año de creación. Si no existe fecha de creación, este último queda vacío. Son datos del propietario del canal, también cuando quien lo visita no tiene sesión.
Ejemplo de tags: .ch-banner::before { content: attr(data-channel-name); }
.ch-banner::after { content: attr(data-channel-user) " · " attr(data-channel-since); } Estos textos se actualizan con la identidad del canal, sin editar el CSS. Los atributos están en el banner: attr() no los busca en elementos padres o hermanos.
Fuentes: --font-display es la fuente de títulos; --font-sans, la de lectura. Reutilizarlas puede no producir un cambio si el texto ya usa esa fuente. Combina peso, tamaño o espaciado. Sube tus fuentes desde los controles del canal.
Imágenes: url() solo admite rutas de archivos subidos bajo /uploads/. Copia la ruta de tu propio archivo; las URLs externas se bloquean. Los degradados CSS no necesitan archivos.
Reglas y límites: Se permiten @media, @supports, @container y @keyframes, además de @font-face y @property. @import se elimina. El máximo de CSS es 1 MiB; position: fixed se convierte en absolute y el z-index numérico se limita de 0 a 999.
Responsive y accesibilidad: Usa @container channel (max-width: 640px) para adaptar el canal a su ancho. El ejemplo añade channel-shell a .ch para cambiar el marco y sus columnas juntos a 700 px, y profile-content al cuerpo para adaptar los módulos al espacio disponible a 660 px, descontando la columna lateral. Estos dos contenedores los define el CSS del ejemplo; no existen por defecto. Conserva el contraste, el foco del teclado y prefers-reduced-motion. Los controles de rendimiento del visitante pueden desactivar transparencias y desenfoque.

Si un cambio no se ve

Inserté un fragmento, pero no veo diferencia.

Comprueba que el editor esté abierto, la vista previa del borrador esté activa y el elemento exista. Desplázate hasta las tarjetas para ver estilos de vídeos. Algunos cambios tipográficos son sutiles y los efectos :hover necesitan el cursor.

El banner sigue mostrando mi imagen.

El fondo CSS está detrás de la imagen del banner. Para ver el banner de degradados del ejemplo, retira esa imagen desde Studio; si quieres conservarla, personaliza su marco o añade reflejos con un pseudoelemento.

Un color del tema gana a mi regla.

Los presets y componentes tienen reglas propias. Usa un selector más concreto, como .ch .ch-name, o cambia ese color en Temas y colores. Reserva !important para una propiedad concreta después de comprobar qué regla la está reemplazando. El ejemplo repite .ch.ch.ch.ch para aumentar la especificidad frente a los presets; todas las clases siguen apuntando al mismo lienzo del canal.

Ya apliqué el CSS, pero otros no lo ven.

Aplicar actualiza el borrador. Falta pulsar «Publicar» y esperar a que aparezca el estado «Publicado». Después abre tu canal público para revisar el resultado.

Quiero volver al diseño anterior.

Antes de publicar, usa Deshacer. Para quitar CSS ya publicado, abre el editor, vacía el código, aplica al canal y publica. Guarda una copia del CSS anterior si quieres recuperarlo más adelante.

Tu canal, con identidad propia.

Tu canal Lv 12

Prepara tu identidad

Elige la base visual

Organiza fondo y contenido

Prueba el CSS como borrador

Aplica y publica

Tu canal