Tutorial: Cómo crear un skin para obra FAQ

Archive FAQ > Tutorial: Cómo crear un skin para obra

Introducción

Este tutorial es una guía paso a paso para crear un skin para obra en Archive of Our Own – AO3 (Un Archivo Propio). Para cuando hayas terminado este tutorial, podrás crear tu propio skin para obra, usar CSS para diseñar estilos personalizados y aplicar el skin para obra a una obra de tu elección.

Este tutorial asume lo siguiente:

Que ya sabes cómo publicar obras en el AO3. Si aún no has publicado una obra en el AO3, sugerimos que visites las FAQ (preguntas frecuentes) sobre publicación y edición o que sigas paso a paso el Tutorial: Publicar una obra en el AO3.
Que tienes conocimientos básicos de CSS. Si necesitas una guía general de CSS, Tutorial de CSS de W3Schools ofrece un curso básico gratis.
Que accedes al sitio en su skin predeterminado (Archive 2.0). Si usas un skin personalizado, por favor ten en cuenta que la diagramación de tu diseño puede diferir de la de las instrucciones.

Si no estás segurx de qué es un skin para obra o si prefieres utilizar un skin preexistente, por favor visita las FAQ (preguntas frecuentes) de la interfaz del Archivo.

Cómo navegar el sitio para llegar al formulario Create New Skin (crear un nuevo skin)

Para comenzar, ve a tu página de Skins:

Inicia sesión y ve a tu panel de control mediante el saludo "Hi, (usuarix)!" y eligiendo "My Dashboard" (mi panel de control) en el menú, o mediante tu imagen de perfil.
Elige "Skins" en el menú al costado de la página o en el margen superior en un dispositivo móvil.

Esto te lleva a tu página My Site Skins (mis skins del sitio), la cual te ofrece una lista de tus skins de sitio personalizados y botones de acceso a tus skins para obra y skins públicos personalizados. Si deseas repasar la diferencia entre skins de sitio y skins para obra, visita ¿Qué es un skin?

Para este tutorial, queremos crear un nuevo skin para obra, así que debes seleccionar "My Work Skins" (mis skins para obra) y luego "Create Work Skin" (crear un skin para obra) para acceder al formulario Create New Skin.

Cómo configurar un nuevo skin para obra

Los únicos campos obligatorios para crear un nuevo skin con CSS personalizado son Type (Tipo), Title (Title) y CSS. El resto son opcionales, pero mencionaremos todos los campos en este tutorial .

Podrás volver y editar cualquiera de estos campos después de haber ingresado los datos (para más instrucciones, visita Cómo editar tu skin para obra).

Type (obligatorio): Si elegiste el botón "Create Work Skin" (Crear skin para obra) en la página de Skins, debería ser "Work Skin" (skin para obra) de manera predeterminada.
Title (obligatorio): Asígnale un título descriptivo a tu skin para poder distinguirlo del resto de los skins que crees en el futuro. Los títulos de skin deben ser únicos, así que recomendamos que incluyas tu nombre de usuarix en el título (p.ej. "Homestuck Skin (usuarix)").
Description: ¿Qué hará tu skin? ¿Tendrá un tema específico? Puedes ver algunos ejemplos de descripciones de skin en las páginas Public Site Skins o Public Work Skins.
Sube una vista previa: Aquí puedes subir una captura de pantalla de tus estilos de CSS en acción como una vista previa. Puedes regresar a este punto una vez que hayas aplicado tu skin para obra.
Aplicar para hacer público: Esta función es obsoleta. Los skins personalizados ya no pueden hacerse públicos, por lo que marcar esta casilla no afectará la privacidad de tu skin.
CSS: El último campo en el formulario Create New Skin es en el que ingresas tu CSS personalizado. En las próximas secciones te explicaremos cómo ingresar el CSS que conformará el nuevo diseño de tu obra.

Tal vez notaste arriba el botón "Use Wizard" (usar asistente fácil). Este te lleva al Site Skin Wizard (asistente fácil para skin de sitio), el cual desgraciadamente solo puede usarse para crear skins de sitio y no skins para obras (¿Qué es el Skin Wizard?)

Pero no te preocupes, ¡con este tutorial serás tú quien ofrezca asistencia en un dos por tres!

Cómo usar CSS

Por razones de seguridad, el AO3 solo es compatible con una serie limitada de propiedades CSS y sus valores. Todo código incompatible se eliminará una vez que guardes los cambios.

Puedes revisar la lista completa de propiedades CSS compatibles seleccionando el signo de interrogación azul ? en la parte superior del campo de CSS. Puedes también dirigirte a ¿Qué propiedades y valores CSS puedo usar en skins personalizados? para más información sobre fuentes, colores, URLs, etc.

Cómo ingresar el CSS

En esta sección podrás ingresar el CSS que determinará qué estilo podrá ser aplicado a tu(s) obra(s). Eres libre de usar tu propio CSS o seguir el ejemplo de aquí abajo.

Digamos que tienes una obra con el siguiente código HTML:

  
Querido Billy:
Aquí hay una carta que te he escrito. Espero que estés muy impresionado.
Sinceramente,
Adelaide

Sin aplicar skins, este texto se mostraría con el estilo predeterminado de obra del AO3.

Texto de obra del ejemplo anterior con estilo de Archivo predeterminado: fuente sans serif, color negro

Si deseas que el texto parezca una carta escrita a mano, como en el caso de la imagen de abajo, necesitarás usar CSS para crear algunos estilos personalizados.

Texto de obra en fuente 'Comic Sans MS', rodeado de un fino borde negro con espacio entre el borde y el texto. 'Adelaide' es ligeramente más grande y en rojo. La palabra

Primero, creemos un delgado borde negro para el texto, cambiemos la fuente y aumentemos el tamaño de la fuente. Para hacerlo, agreguemos lo siguiente en el campo CSS de tu skin para obra:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}

Luego, agreguemos algo al campo CSS para crear un estilo especial a la firma ("Adelaide"). Ingresa el siguiente CSS para aumentar el tamaño de la fuente aún más y agregar el color rojo:

  
#workskin .signature {
font-size: 1.2em;
color: red;
}

Finalmente, para subrayar el texto destacado ("muy"), agrega el último CSS:

  
#workskin em {
border-bottom: 3px double;
}

Tu campo CSS ahora debería contener CSS para tres diferentes estilos:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#workskin .signature {
font-size: 1.2em;
color: red;
}
#workskin em {
border-bottom: 3px double;
}

Lareferencia de CSS de W3Schools ofrece una práctica lista de propiedades CSS que puedes agregar a tus obras.

También recomendamos que visites Public Work Skins (skins públicos para obra) para ver ejemplos de estilos.

Nota: Es necesario anidar los selectores CSS (p.ej. Los elementos .letter, .signature y em) bajo el id #workskin para que los estilos se apliquen únicamente al contenido de tu obra elegida: todo bajo el blurb y sobre el botón "Top" (ir arriba) en la página de tu obra. De todas maneras, si olvidas anidar tu CSS bajo el id #workskin, automáticamente lo haremos por ti cuando hayas validado el código.

Cómo guardar tu nuevo skin de obra

Una vez que hayas revisado tu CSS y encuentres satisfactorio el código, elige el botón "Submit" (enviar) para guardar tu nuevo skin de obra. Tu estilo no se aplicará a ninguna obra hasta que hayas incluido el skin manualmente en cada obra (lo repasaremos en Cómo aplicar tu skin para obra).

Una vez que hayas seleccionado "Submit", eliminaremos cualquier código incompatible y nos aseguraremos de que los selectores se hayan anidado bajo el id #workskin.

Cómo editar tu skin de obra

Inmediatamente después de enviar tu nuevo skin de obra, puedes revisar tu código y seleccionar el botón "Edit" (editar) para realizar cambios.

Cómo aplicar tu skin de obra

Has creado un skin de obra; ahora puedes aplicarlo a cualquier obra que tengas en el AO3. Algunos detalles que debes tener presentes:

Una obra solo puede usar un skin.
Un skin puede usarse en varias obras.
Si eliminas un skin, toda obra que use ese skin perderá su estilo.
Si has co-creado una obra, tu(s) co-creadorx(s) también podrá(n) aplicar tu skin de obra a las obras compartidas.

Cuando sepas a qué obra quieres aplicar el nuevo formato, visita la página Edit Work (editar obra) de tu obra. Visita ¿Cómo edito una obra? si necesitas instrucciones.

Selecciona el título de tu skin de obra de la lista "Select Work Skin" (elige un skin de obra) en la sección Associations (Asociaciones).

Si los selectores CSS en tu skin de obra corresponden a elementos ya presentes en el código HTML de tu obra (tal como toda etiqueta

o ), entonces puedes saltarte la próxima sección e ir directamente a Cómo guardar y hacer una vista previa de tu obra. Por ejemplo, si quieres darle un subrayado doble a todo texto en itálica, al aplicar el siguiente CSS automáticamente agregaría una doble raya a todo texto que esté marcado con la etiqueta :

  
#workskin em {
border-bottom: 3px double;
}

Cómo usar los selectores de CSS en el código HTML de tu obra

Si tus selectores de CSS no tienen correspondencia aún en el HTML de tu obra, este es el momento de añadir tu

y etiquetas, clases e ids al marcado de tu obra. Puedes editar tu obra accediendo a la sección Work Text (texto de obra) de tu página Edit Work (Editar obra). Asegúrate de que el botón "HTML" está seleccionado.

Si has ingresado tu propio CSS en Inputting Your CSS, ahora puedes agregar los selectores de CSS correspondientes para el marcado de tu obra. Si no es así, retomaremos el ejemplo anterior.

En este ejemplo ves una obra que contiene el siguiente marcado:


Querido Billy:
Aquí hay una carta que te he escrito. Espero que estés muy impresionado.
Con cariño,
Adelaide

Para aplicar los tres estilos del ejemplo de skin para obra, tendrás que insertar los elementos y atributos HTML que correspondan con los selectores de tu CSS:


Para aplicar el estilo de letra, encierra el bloque de texto completo en un  con la clase .letter referenciada en tu skin para obra.
Para aplicar la fuente de la firma, agrega la clase .signature de tu skin para obra en el párrafo final.

Para aplicar la fuente subrayada, no es necesario agregar marcado adicional, pues el selector em que usaste en el CSS de tu skin para obra ya corresponde con la etiqueta  en el  marcado existente.


Tu nuevo marcado debería verse así:


Querido Billy:
Aquí hay una carta que te he escrito. Espero que estés muy impresionado.
Con cariño,
Adelaide

Cómo guardar y realizar una vista previa de tu obra

Puedes realizar una vista previa del nuevo estilo de tu obra al seleccionar el botón "Preview" (vista previa) o guardar directamente los cambios al seleccionar "Post Without Preview" (publicar sin vista previa).

¡Felicidades, ahora tu obra se ve espectacular!

Si has seguido este ejemplo desde Cómo ingresar el CSS y Cómo usar los selectores de CSS en el código HTML de tu obra, el texto de tu obra ahora debería parecer una carta escrita a mano.

Texto de obra en fuente 'Comic Sans MS', rodeado de un delgado borde negro con espacio entre el borde y el texto. 'Adelaide' es ligeramente más grande y en rojo. La palabra

Si deseas aplicar tu skin para obra a varias obras simultáneamente, visita ¿Cómo edito múltiples obras al mismo tiempo?. Por favor ten en cuenta que aún así debes insertar los selectores CSS de tu skin al HTML de cada obra individualmente si no lo has hecho.

Si deseas más información sobre cómo publicar y editar obras, por favor visita las FAQ (preguntas frecuentes) de publicación y edición. Puede ser que también quieras visitar Tutorial: publicar una obra para una guía paso a paso.

¿Dónde puedo encontrar más información si mi pregunta no fue respondida aquí?

Para más información sobre skins en Archive of Our Own - AO3 (Un Archivo Propio), incluyendo skins de sitio y skins públicos, visita las Preguntas frecuentes de skins y la interfaz del Archivo. Algunas preguntas frecuentes sobre AO3 se responden más ampliamente en Preguntas frecuentes del AO3. Puedes encontrar preguntas y respuestas sobre nuestros Términos y condiciones de servicio en Preguntas frecuentes de los Términos de servicio del AO3. Quizás quieras leer también sobre nuestros Problemas conocidos. Si necesitas más ayuda, por favor contacta con Soporte técnico.

Archive of Our Own^beta