#dohtml template

El JS debe estar marcado para Todas las páginas. Puedes tener el CSS directamente en tu panel o de forma externa en tu overall_header, antes de </head>.

Debes agregar una caja de texto ([role="text"]) por cada columna; si una tab no tiene una caja de reglas, simplemente mostrará las normas generales (que siempre irán marcadas por [data-tab="general"]). Las data-tab deben de ser únicas para cada columna, como puedes ver en el ejemplo, y las comparten en las cajas de texto ([role="text"], en las tabs (<span> dentro de [role="tabs"]) y las diferentes columnas dentro de [role="table-head"] y [role="user"].

IMPORTANTE: Si un usuario no aplica para una columna (supongamos, siguiendo el ejemplo, que uno de ellos no tiene vivienda), incluye igualmente el <b> en su sitio correspondiente. Puedes poner - o N/A o algo similar, pero no borres el <b> o se te descuadrará toda la tabla. También recomiendo mantener cierta 'gramática' en las columnas del mismo tipo, para que la alfabetización sea más útil (por ejemplo, no pongas 6º curso y luego pongas en otro Sexto curso).

PARA AGREGAR NUEVAS PESTAÑAS: Como se explica en el primer punto, cada pestaña debe tener sus columnas, su botón y su caja de reglas. Por lo que tendrás que agregar una caja de texto:

<div role="text" data-tab="sangre">Normas de pureza de sangre.</div>

Una pestaña:

<span data-tab="sangre">Sangre</span>

Y columnas:

Si quieres retirar pestañas: Quita los inputs, labels y [role=“box”] que no te hagan falta.

Si quieres agregar pestañas: Añade un input con un id nuevo (recomiendo usar numerados), label nuevo con for igual al id del input y un [role=“box”] con number igual al id del input.

A continuación agrega este CSS en tu <style>:

.cd23-seasons input#cd23s-XX:checked ~ * { –tab:YY; }

El XX sería el número que has puesto en tu input, y en tab vas a poner ese número menos 1. Por ejemplo, si es tu pestaña 5, sería #cd23-c5, y –tab sería igual a 4. A continuación, añadirás esto:

.cd23-seasons input#cd23s-XX:checked ~ [role="tabs"] label[for="cd23s-XX"] { background: var(--_tabs-color); border-color: var(--_tabs-color); }