Publicar un tema
Cómo crearlo, qué se sube y qué reglas cumple la hoja de estilos.
Lo que necesitas
- Una cuenta de Rolea. Cualquiera puede publicar temas.
- Tu hoja de estilos minificada, en un archivo
.css. - Al menos una captura. Es obligatoria, tanto al crear el tema como al editarlo después.
Si aún no sabes qué es un tema ni de qué está hecho, empieza por Qué es un tema.
El formulario, paso a paso
Se crea desde Crear un tema, en cinco pasos. Puedes ir y volver entre ellos: nada se envía hasta el último.
1. El tema
El nombre y la descripción son lo que lee quien busca un tema en la galería. El nombre admite hasta 80 caracteres y la descripción hasta 500.
Cada tema tiene un nombre distinto de todos los demás. Si ya hay uno con el que has elegido, te lo decimos al enviarlo y puedes cambiarlo ahí mismo. Las mayúsculas y los espacios no cuentan: «Bosque de Cuervos» y «bosque de cuervos» son el mismo nombre.
Puedes poner hasta seis capturas, en el orden en que quieras que se vean. Se aceptan PNG, JPEG y WebP, hasta 8 MB por archivo; no se aceptan SVG. La medida que conviene es 1600 píxeles en el lado más largo: nada por encima de eso se llega a ver.
2. Estilos
Sube el archivo .css minificado, tal y como lo publicarías. Minificar es quitarle los espacios, los saltos de línea y los comentarios: el archivo pesa bastante menos y carga antes en cada visita a los sitios que instalen tu tema, y además es lo que hace que quepas de sobra en el límite de caracteres.
El formulario lo revisa en cuanto lo eliges y te señala la línea de cualquier problema, así que no tienes que enviarlo para saber si lo admitimos.
3. Ajustes
Aquí dices qué necesita tu tema del sitio: una disposición concreta, modo claro u oscuro, unas tarjetas en la barra lateral. Cada uno de esos ajustes tiene tres respuestas posibles, y la diferencia entre ellas es cuánto margen le dejas a quien instale el tema.
| Respuesta | Qué pasa en el sitio |
|---|---|
| «Da igual» | Tu tema no opina sobre ese ajuste. El sitio se queda con lo que ya tenía y puede cambiarlo cuando quiera. Es lo que viene marcado. |
| «Recomendado» | Se aplica al instalar, pero aparece como una casilla marcada que quien instala puede desmarcar en ese momento, y cambiar después desde su panel. |
| «Imprescindible» | Se aplica al instalar y queda bloqueado: mientras tu tema esté puesto, nadie del sitio puede tocarlo. Al quitar el tema recupera el valor que tenía antes. |
Deja en «Da igual» todo lo que tu diseño aguante con cualquier valor, y reserva «Imprescindible» para lo que de verdad rompe el tema: cada ajuste que fijas es un control que le quitas a la comunidad. Si tu tema se ve mucho mejor de una manera concreta pero no se rompe sin ella, «Recomendado» es la respuesta —y puedes explicarlo en la descripción.
4. Opciones
Los colores, medidas y tipografías que quieras dejar a elección de quien instale el tema. Cada opción que declares aparece como un control —un selector de color, una lista, un interruptor— en el panel de su sitio, en Administración → Sitio → Temas, así que puede afinar el aspecto de tu tema sin tocar una línea de CSS.
Lo que ajusten allí solo afecta a su sitio: el tema que publicas es el mismo para todos. Es opcional, y un tema sin ninguna opción es perfectamente válido; cómo se declaran está más abajo.
5. Revisión
Un resumen de lo que vas a enviar, tal y como lo verá el Equipo de Rolea. Al confirmar, el tema queda en la cola, pendiente de aprobación por el Equipo de Rolea.
Reglas de la hoja de estilos
Una hoja de estilos que incumpla cualquiera de las siguientes restricciones será rechazada al instante, sin llegar a la cola. El error te dice en qué línea está el problema.
| Regla | Detalle |
|---|---|
@import no permitido | Ni a otro servidor ni a otro archivo. Todo el CSS del tema va en el archivo que subes. |
url() absolutas y por https | Ni rutas relativas ni http. También valen los data: de hasta 8.192 caracteres, para un icono en línea. |
Nada de expression(, behavior: ni -moz-binding | Son propiedades de navegadores antiguos que hoy no funcionan en ninguno, y no se admiten escritas de ninguna forma. |
| Hasta 512.000 caracteres | Si te acercas al límite, casi siempre es que el archivo no está minificado. |
| No puede estar vacío | Ni contener solo comentarios. |
Tipografías de Google
Puedes usarlas, aunque no con el @import que Google te da por defecto, porque ningún @import está permitido. Haz esto en su lugar: abre en el navegador esa misma URL de fonts.googleapis.com. Lo que verás es un puñado de bloques @font-face corrientes. Cópialos en tu hoja de estilos y la tipografía se cargará igual.
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2)
format('woff2');
}
.site-header__title { font-family: 'Cinzel', Georgia, serif; }Declarar opciones ajustables
Cada opción que declaras se convierte en una variable CSS llamada --skin-nombre, y tu hoja de estilos la lee con su propio valor por defecto:
.site-header { background: var(--skin-accent, #8b0000); }Cada opción lleva un tipo, y el tipo decide el control que verá quien instale el tema: un selector de color, una lista, un interruptor.
| Tipo | Qué se admite como valor |
|---|---|
| Color | #rgb, #rrggbb, #rrggbbaa o rgb() / hsl() con argumentos numéricos |
| Medida | Un número con una de las unidades que declares, y dentro del mínimo y el máximo que pongas |
| Lista | Exactamente una de las opciones que declares |
| Sí / no | true o false |
| Dirección | Una URL absoluta por https |
| Tipografía | Un nombre de fuente, hasta 64 caracteres |
Un valor que no encaje con su tipo se descarta, y entonces tu var() usa el valor por defecto que hayas escrito ahí mismo. Cada opción necesita además un valor por defecto en el formulario, y tu CSS tiene que verse bien sin ninguna: así se muestra en la previsualización, antes de que nadie ajuste nada.
Qué pasa al enviar
- Se revisa la hoja de estilos y los ajustes. Si algo falla, vuelve con todos los problemas a la vez y el tema no se envía.
- Si pasa, la versión queda en revisión.
- Te avisamos con la decisión: en tus notificaciones de Rolea y por correo.
Mientras una versión de ese tema espera decisión no puedes enviar otra, y hasta que se apruebe la primera versión el tema no aparece en la galería. Lo que ocurre a partir de aquí está en Revisión y versiones.