Tutorial: Criar um Estilo de Obra FAQ

Archive FAQ > Tutorial: Criar um Estilo de Obra

Introdução

Este tutorial irá guiar-te passo-a-passo pelo processo de criação de um estilo de obra no Archive of Our Own – AO3 (O Nosso Próprio Arquivo). Quando terminares este tutorial, terás criado o teu próprio estilo de obra, utilizado CSS para criar estilos personalizados e aplicado o estilo de obra à obra que escolheste.

Este tutorial pressupõe o seguinte:

Tens conhecimento prévio sobre como publicar obras no AO3. Se nunca publicaste uma obra no AO3, considera consultar as Perguntas Frequentes (FAQs) sobre Publicação e Edição ou segue passo-a-passo o Tutorial: Publicar uma Obra.
Tens conhecimento básico de CSS. Se precisares de uma ideia geral de CCS, o W3Schools CSS Tutorial disponibiliza um curso básico grátis.
Estás a aceder ao site com o estilo de obra predefinido (Archive 2.0). Se estás a utilizar um estilo personalizado, por favor tem em conta que o layout do teu site pode diferir das instruções dadas.

Se não tens a certeza do que é um estilo de obra ou se preferes utilizar um estilo já existente na tua obra, por favor consulta as FAQs de Estilos e Arquivos .

Navegação até ao formulário Create New Skin (Criar Novo Estilo)

Para começar, vai primeiro à tua página de Skins (Estilos):

Inicia sessão e vai ao teu Painel, selecionando a saudação "Olá, (nome de utilizador)!" e escolhendo "My Dashboard" (O Meu Painel) no menu ou selecionando a tua imagem de perfil.
Seleciona "Skins" no menu no lado da página, ou no topo se num dispositivo móvel.

Este passo leva-te à página My Site Skins (Os Meus Estilos), onde estão listados os teus estilos de site personalizados e fornece botões para aceder aos teus Estilos de Obra e Estilos Públicos personalizados. Para rever a diferença entre estilos de site e estilos de obra, consulta O que é um estilo?

Para este tutorial, queremos criar um novo estilo de obra, por isso seleciona "My Work Skins" (Os Meus Estilos de Obra) e, depois, "Create Work Skin" (Criar Estilo de Obra) para chegares ao formulário Criar Novo Estilo.

Configurar um Novo Estilo de Obra

Os únicos campos obrigatórios para criar um novo estilo com CSS personalizado são o Type (Tipo), Title (Título) e CSS. Os restantes campos são opcionais, mas vamos falar de cada um deles neste tutorial.

Poderás voltar atrás e editar qualquer um destes campos após a submissão (consulta Editar o Teu Estilo de Obra para instruções).

Tipo (obrigatório): Se selecionaste "Create Work Skin" (Criar Estilo de Obra) na página de Estilos, este campo deve dizer "Work Skin" (Estilo de Obra).
Título (obrigatório): Dá ao teu estilo um título descritivo para o diferenciar de outros estilos de obra que venhas a criar. Os títulos de estilos devem ser únicos, por isso recomendamos que incluas o teu nome de utilizador no título (ex: "Estilo Homestuck (nome de utilizador)").
Descrição: O que fará o teu estilo? Terá um tema específico? Podes consultar alguns exemplos de descrições de estilos nas páginas de Estilos de Site Públicos ou de Estilos de Obra Públicos.
Fazer upload de uma pré-visualização: Aqui podes fazer upload de uma captura de ecrã dos teus estilos CSS como pré-visualização. Podes voltar aqui e fazer o upload depois de começares a utilizar o teu estilo de obra.
Tornar público: Esta função foi descontinuada. Os estilos personalizados já não podem ser tornados públicos e clicar nesta caixa de seleção não irá afetar a privacidade do teu estilo.
CSS: O último campo no formulário Criar Novo Estilo é onde colocas o teu CSS personalizado. Nas secções seguintes, vamos explicar como introduzir o CSS que fará parte do novo estilo da tua obra.

Poderás reparar num botão no topo com o título "Use Wizard" (Utilizar Assistente). Este botão leva ao Site Skin Wizard (Assistente de Estilo do Site), que, infelizmente, só pode ser utilizado para criar estilos do site e não estilos da obra (O que é o Assistente de Estilo?)

Mas não te preocupes - com este tutorial não precisarás de um assistente!

Utilizar CSS

Por razões de segurança, o AO3 apenas consegue suportar um conjunto limitado de propriedades e valores CSS. Qualquer código que não seja suportado irá ser removido após as tuas alterações serem guardadas.

Podes consultar a lista completa de propriedades CSS suportadas clicando no símbolo azul com o ponto de interrogação ? no topo do campo CSS. Podes consultar ainda Que propriedades e valores CSS posso utilizar em estilos personalizados? para informação adicional sobre tipos de letra, cores, URLs, etc.

Introduzir o Teu CSS

Nesta secção, irás introduzir o CSS que determinará que estilo pode ser aplicado à(s) tua(s) obra(s). Podes colocar o teu próprio CSS ou seguir o exemplo que se segue.

Digamos que tens uma obra com o seguinte código HTML:

  
Caro Billy,
Aqui está uma carta que te escrevi. Espero que te deixe muito impressionado.
Atenciosamente,
Adelaide

Sem nenhum estilo de obra aplicado, este texto seria exibido com o estilo de obra pré-definido do AO3.

Texto da obra do exemplo acima com o estilo pré-definido do Arquivo: tipo de letra sans serif, a preto

Se quisermos que o texto pareça ter sido escrito à mão, como na imagem seguinte, vamos precisar de criar alguns estilos personalizados através de CSS.

Texto da obra em Comic Sans MS, delimitado por um fino rebordo negro, com espaço entre o rebordo e o texto. 'Adelaide' está ligeiramente maior e a vermelho. A palavra 'muito' está duplamente sublinhada.

Primeiro, vamos delimitar este texto com um fino rebordo negro, mudar o tipo de letra e aumentar o tamanho. Para tal, coloca o seguinte no campo CSS do teu estilo de obra:

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

A seguir, vamos acrescentar no campo CSS algo que estilize a assinatura ("Adelaide"). Introduz o CSS seguinte para aumentar ainda mais o tamanho de letra e colocar a assinatura a vermelho:

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

Por fim, para sublinhar o texto destacado ("muito"), coloca o CSS final:

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

O teu campo CSS deve conter agora CSS para três estilos diferentes:

  
#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;
}

O site de Referência CSS W3Schools fornece uma lista útil de propriedades CSS que podes adicionar à tua obra.

Recomendamos também que consultes os Estilos da Obra Públicos para exemplos de estilo.

Nota: É necessário encaixar os teus seletores CSS (ex:. os elementos.letter, .signature e em) dentro do id #workskin para que os teus estilos sejam aplicados apenas ao conteúdo da obra que escolheste: tudo o que esteja abaixo das informações da obra e acima do botão "Top" (Topo) na tua página da obra. No entanto, se te esqueceres de encaixar o teu CSS dentro do id #workskin, acrescentá-lo-emos automaticamente por ti depois de submeteres o código.

Guardar o Teu Novo Estilo de Obra

Depois de teres revisto o teu CSS e estiveres contente com o código, carrega no botão "Submit" (Submeter) para guardares o teu novo estilo de obra. O teu estilo não irá ser aplicado a qualquer obra até o aplicares manualmente a cada uma delas (iremos tratar disso em Aplicar o Teu Estilo de Obra).

Assim que carregares em "Submeter", removeremos qualquer código que não seja suportado e certificar-nos-emos de que todos os selectores estão encaixados dentro de um id #workskin.

Editar o Teu Estilo de Obra

Imediatamente após a submissão do teu novo estilo de obra, podes verificar o teu código e carregar no botão "Edit" (Editar) para fazer quaisquer alterações.

Aplicar o Teu Estilo de Obra

Já criaste o estilo de obra — agora podes aplicá-lo a qualquer obra que tenhas no AO3. Algumas notas a ter em conta:

Uma obra só pode ter um estilo.
Um estilo pode ser aplicado a diversas obras.
Se apagares o estilo, quaisquer obras que tenham esse estilo irão ficar sem o mesmo.
Se fores uma pessoa cocriadora de uma obra, a(s) outra(s) pessoa(s) cocriadora(s) também podem aplicar o teu estilo de obra à vossa obra em comum.

Quando souberes a qual das obras queres aplicar a nova formatação, vai até à página Edit Work (Editar Obra) da tua obra. Consulta Como posso editar uma obra? se precisares de instruções.

Na secção Associations (Associações) na página Editar Obra, seleciona o título do teu estilo de obra da lista "Select Work Skin" (Selecionar Estilo de Obra).

Se os seletores do teu estilo de obra já corresponderem a elementos que estão no HTML da tua obra (tais como todas as tags

ou ), podes saltar a próxima secção e ir diretamente paraGuardar e Pré-Visualizar a tua Obra. Por exemplo, se quisesses acrescentar a todo o texto em itálico na tua obra um sublinhado duplo, aplicar um estilo de obra com o CSS seguinte adicionaria automaticamente um sublinhado duplo a todo o texto marcado com as tags :

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

Utilizar os Seletores CSS no HTML da tua Obra

Se os teus seletores CSS não correspondem ainda ao HTML da tua obra, é altura de adicionares as tags, classes e ids

e à marcação da tua obra. Podes editar a marcação da tua obra na secção Work Text (Texto da Obra) na página Edit Work (Editar Obra). Certifica-te de que o botão "HTML" está selecionado.

Se introduziste o teu próprio CSS em Introduzir o teu CSS, prossegue e introduz agora os teus seletores CSS correspondentes à marcação da tua obra. Caso contrário, vamos continuar a partir do último exemplo.

Neste exemplo, tens uma obra que contém a seguinte marcação:


Caro Billy,
Aqui está uma carta que te escrevi. Espero que estejas muito impressionado.
Atenciosamente,
Adelaide

Para aplicar os três estilos do exemplo de estilo de obra, precisas de inserir os elementos e atributos HTML que correspondem aos seletores no teu CSS:


Para aplicar o estilo de letra, rodeia todo o bloco de texto numa tag  com a classe .letter referida no teu estilo de obra.
Para aplicar o estilo da assinatura, adiciona a classe .signature do teu estilo de obra ao parágrafo final.

Para aplicar o estilo sublinhado, não é necessário qualquer código adicional porque o seletor em que utilizaste no CSS do teu estilo de obra já corresponde à tag  da marcação anterior.


A tua nova marcação deve corresponder ao seguinte:


Caro Billy,
Aqui está uma carta que te escrevi. Espero que estejas muito impressionado.
Atenciosamente,
Adelaide

Guardar e Pré-Visualizar a tua Obra

Podes pré-visualizar a tua obra acabada de estilizar selecionando o botão "Preview" (Pré-Visualizar) ou guardar as alterações diretamente ao selecionar "Post Without Preview" (Publicar Sem Pré-Visualizar).

Parabéns, a tua obra agora está extravagante!

Se seguiste o exemplo de Introduzir o Teu CSS e Utilizar os Seletores CSS no HTML da Tua Obra, o texto da tua obra deverá agora assemelhar-se a uma carta escrita à mão.

Texto da obra em Comic Sans MS, delimitado por um fino rebordo negro, com espaço entre o rebordo e o texto. 'Adelaide' está com texto maior e a vermelho. A palavra 'muito' está duplamente sublinhada.

Se gostavas de aplicar o teu estilo de obra a várias obras ao mesmo tempo, consulta Como posso editar várias obras ao mesmo tempo? Por favor, tem em conta que precisarás de introduzir os seletores CSS do teu estilo individualmente no HTML de cada obra, se ainda não o fizeste.

Para mais informação sobre publicar e editar obras, por favor consulta as FAQs sobre Publicação e Edição. Podes ainda consultar o Tutorial: Publicar Uma Obra para um guia passo-a-passo.

Onde posso encontrar mais informação se a resposta que procuro não está aqui?

Para mais informação sobre estilos para o Archive of Our Own - AO3 (O Nosso Próprio Arquivo), incluindo estilos do site e estilos públicos, consulta as FAQs sobre Estilos e Interface do Arquivo. Algumas perguntas frequentes (FAQs) sobre o AO3 têm resposta nas outras secções das FAQs sobre o AO3. Perguntas e respostas sobre os nossos Termos de Serviço podem ser consultadas nas FAQs sobre os Termos de Serviço. Podes também consultar a nossa secção sobre Problemas Conhecidos. Se precisares de mais ajuda, por favor contacta a equipa de Suporte.

Archive of Our Own^beta