Archive of Our Own ^beta

Introdução

Este tutorial irá orientar passo a passo na criação de uma skin para sua obra no Archive of Our Own – AO3 (Um Arquivo Todo Nosso). Ao final deste tutorial, você terá criado sua própria skin de obra, utilizado CSS para definir estilos personalizados e aplicado a skin à sua obra escolhida.

Este tutorial pressupõe os seguintes pontos:

• Você possui conhecimento prévio a respeito da publicação de obras no AO3. Se você ainda não publicou uma obra no AO3, considere acessar a FAQ de Publicação e Edição ou siga o passo a passo disponível em Tutorial: Publicando uma Obra.
• Você tem conhecimento básico de CSS. Se precisar de um resumo a respeito de CSS, o Tutorial W3Schools CSS oferece um curso básico gratuito.
• O acesso do site através da skin padrão (Archive 2.0). Se você estiver usando uma skin personalizada, por favor, faça adaptações nas instruções quando o seu layout for diferente do indicado.

Se você não tem certeza do que é uma skin de obra, ou se você prefere utilizar uma skin já existente, por favor, acesse a FAQ de Skins e Interface do Arquivo.

Navegando até o formulário Create New Skin (Criar nova skin)

Para começar, acesse antes de tudo sua página Skins:

1. Faça o login e acesse o seu Painel selecionando a saudação "Hi, (nome de sua conta)!" e selecionando "My Dashboard" (Meu Painel) no menu, ou selecionando sua imagem de perfil.
2. Selecione "Skins" no menu localizado na lateral da página ou na parte superior em dispositivos móveis.

Isto te levará à página My Site Skins (Minhas Skins no Site), que lista todas as suas skins personalizadas e oferece botões de acesso para suas skins personalizadas de obras e as skins públicas. Para revisar as diferenças entre skins do site e skins de obras, acesse O que é uma skin?

Para este tutorial, nós queremos criar uma nova skin de obra, então selecione "My Work Skins" (Minhas Skins de Obras), e em seguida "Create Work Skin" (Criar Skin de Obra) para navegar até o formulário Criar Nova Skin.

Configurando uma nova skin de obra

Os únicos campos obrigatórios para criar uma nova skin usando CSS personalizado são os campos Type (Tipo), Title (Título), e CSS. Os demais campos são opcionais, mas utilizaremos todos os campos nesse tutorial.

Você poderá voltar e editar qualquer um dos campos após o envio (acesse Editando sua skin de obra para instruções).

Tipo (obrigatório)

Se você selecionou o botão "Create Work Skin" (Criar skin de obra) na página de skins, então deverá aparecer "Work Skin" (Skin de Obra) como padrão.

Título (obrigatório)

Dê um nome descritivo à sua skin para que você consiga diferenciá-la de outras skins de obras que você criará no futuro. Títulos de skins devem ser inéditos, então recomendamos incluir seu nome de sua conta no AO3 no título (ex. "Homestuck Skin (nome de sua conta)").

Descrição

O que a sua skin fará? Terá algum tema específico? Você pode conferir alguns exemplos de descrições de skin disponíveis nas páginas Skins públicas do site ou Skins públicas de obras.

Carregar uma prévia

Aqui você pode fazer o upload de uma screenshot dos seus estilos de CSS em ação no formato de prévia. Você pode voltar e fazer isso quando já estiver usando sua skin de obra.

Aplicar para tornar pública

Esta ferramenta foi descontinuada. Skins personalizadas não podem mais ser tornadas públicas no momento e marcar esta caixa de seleção não terá nenhum efeito na privacidade da sua skin.

CSS

O último campo no formulário Criar Nova Skin é onde você insere seu CSS personalizado. Nas próximas seções explicaremos como inserir o CSS responsável pelo novo estilo da sua obra.

Você poderá perceber um botão no topo da página com a identificação "Use Wizard" (Usar Assistente). Ele te levará para o Site Skin Wizard (Assistente de skin do site), que infelizmente só pode ser usado para criar skins do site, não de obras (O que é o Assistente de Skin?)

Mas não se preocupe—com este tutorial, você poderá criar suas próprias skins em pouco tempo!

Usando CSS

Por motivos de segurança, o AO3 só pode suportar um conjunto limitado de propriedades CSS e seus valores. Qualquer código não suportado será removido quando você salvar as mudanças.

Você pode conferir a lista completa de propriedades CSS suportadas selecionando o símbolo de ponto de interrogação azul ? no topo do campo de CSS. Você também pode acessar Quais propriedades e valores CSS posso usar em skins personalizadas? para conferir mais informações a respeito de fontes, cores, URLs, etc.

Inserindo seu CSS

Nesta seção você inserirá o CSS que determinará o estilo aplicado à(s) sua(s) obra(s). Sinta-se à vontade para inserir seu próprio CSS ou siga o exemplo abaixo.

Digamos que você tenha uma obra com o seguinte código HTML:

  
<p>Querido Billy,</p>
<p>Aqui está uma carta que escrevi para você. Espero que você esteja <em>muito</em> impressionado.</p>
<p>Atenciosamente,</p>
<p>Adelaide</p>

Sem nenhuma skin de obra aplicada, este texto apareceria com o estilo padrão do AO3.

Se quisermos que o texto simule a aparência de uma carta escrita à mão, como na imagem abaixo, será necessário criar alguns estilos personalizados usando CSS.

Primeiro, vamos criar a borda preta fina, mudar a fonte e aumentar o tamanho. Para fazer isso, insira isto ao campo CSS da sua skin 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 ao campo CSS um estilo especial para assinatura ("Adelaide"). Insira o seguinte CSS para aumentar ainda mais a fonte e alterar a cor para vermelho:

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

Finalmente, para sublinhar o texto enfatizado ("muito"), insira o CSS final:

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

Seu campo CSS deverá conter 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;
}

A W3Schools CSS Reference oferece uma lista bastante útil de propriedades CSS adicionais que você pode acrescentar à sua obra.

Também recomendamos acessar as Skins Públicas de Obras para observar exemplos de estilos.

Atenção: É necessário aninhar seus seletores CSS (por exemplos, os elementos .letter, .signature, e em) sob o id #workskin para garantir que seus estilos sejam aplicados apenas ao conteúdo da sua obra selecionada: tudo abaixo das informações da obra e acima do botão "Top" (topo) na página da sua obra. Entretanto, se você esquecer de aninhar seu CSS sob o id #workskin, faremos isso automaticamente para você uma vez que o código seja submetido.

Salvando sua nova skin de obra

Após revisar seu CSS e ficar feliz com seu código, selecione o botão "Submit" (Enviar) para salvar sua nova skin de obra. Seu estilo não será adicionado a nenhuma obra até que você adicione manualmente a skin em cada obra (veremos como fazer isso em Aplicando sua skin de obra).

Uma vez selecionado o botão "Enviar", removeremos todos os códigos não suportados e vamos garantir que os seletores estão aninhados sob a id #workskin.

Editando sua skin de obra

Imediatamente depois de enviar sua nova skin de obra você pode revisar o código e selecionar o botão "Edit" (Editar) para fazer qualquer mudança.

Aplicando sua skin de obra

Você criou sua skin — agora você pode aplicar esta skin a qualquer obra que você tiver no AO3. Algumas observações para se ter em mente:

• Uma obra só pode utilizar uma skin.
• Uma mesma skin pode ser aplicada a diversas obras.
• Se você apagar uma skin, toda obra que a estiver utilizando perderá o estilo.
• Se você cocriou uma obra, as outras pessoas envolvidas também poderão aplicar suas skins de obras nas obras que vocês compartilham.

Quando você decidir a qual obra deseja aplicar sua nova formatação, acesse a página Edit Work (Editar Obra). Acesse Como editar uma obra? se você precisar de instruções.

Na seção Associations (Associações) da página Editar Obra, selecione o título da sua skin de obra a partir da lista "Select Work Skin" (Selecionar skin de obra).

Se os seletores CSS na sua skin de obra corresponderem a elementos já presentes no HTML da sua obra (tais como todas as tags <p> ou <em>), então você pode pular a próxima seção e ir diretamente para Salvando e Visualizando sua Obra. Por exemplo, se você queria que todos os textos em itálico na sua obra recebessem dois sublinhados, aplicar uma skin de obra com o seguinte código CSS irá automaticamente adicionar um sublinhado duplo a todo texto marcado com as tags <em>:

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

Usando seletores CSS no HTML da sua obra

Se os seus seletores de CSS ainda não correspondem ao HTML da sua obra, agora é a hora de adicionar suas tags <div> e <span>, classes e ids à linguagem de marcação da sua obra. Você pode editar a marcação da sua obra navegando até a seção Work Text (Texto da Obra) na sua página Edit Work (Editar Obra). Verifique se o botão "HTML" está selecionado.

Se você inseriu seu próprio CSS em Inserir seu CSS, vá em frente e adicione seus seletores CSS equivalentes à linguagem de marcação da sua obra. Caso contrário, vamos retomar de onde paramos no nosso exemplo anterior.

Neste exemplo você tem uma obra com a seguinte marcação:

  
<p>Querido Billy,</p>
<p>Aqui está uma carta que escrevi para você. Espero que você esteja <em>muito</em> impressionado.</p>
<p>Atenciosamente,</p>
<p>Adelaide</p>

Para aplicar os três estilos da skin de obra do exemplo, você precisará inserir os elementos de HTML e atributos que correspondam aos seletores no seu CSS:

1. Para aplicar o estilo de carta, marque todo o bloco de texto com uma tag <div> com a classe .letter referenciada na sua skin de obra.
2. Para aplicar o estilo de assinatura, adicione a classe .signature da sua skin de obra ao parágrafo final.
3. Para aplicar o estilo sublinhado, não é preciso adicionar nenhum código, pois o seletor em que você usou no CSS da skin corresponde à tag <em> na marcação acima.

Sua nova marcação deverá aparecer da seguinte forma:

  
<div class="letter">
<p>Querido Billy,</p>
<p>Aqui está uma carta que escrevi para você. Espero que você esteja <em>muito</em> impressionado.</p>
<p>Atenciosamente,</p>
<p class="signature">Adelaide</p>
</div>

Salvando e Visualizando sua obra

Você pode visualizar sua obra com o novo estilo selecionando o botão "Preview" (Visualizar), ou salvar diretamente suas mudanças selecionando o botão "Post Without Preview" (Publicar sem Visualizar).

Parabéns, sua obra está toda chique agora!

Se você acompanhou o exemplo de Inserindo seu CSS e Usando Seletores de CSS no HTML de suas obras, o texto da sua obra deverá parecer uma carta escrita à mão.

Se você deseja aplicar sua skin de obra a várias obras simultaneamente, acesse Como posso editar várias obras ao mesmo tempo? Por favor, observe que você ainda precisará inserir os seletores CSS da sua skin individualmente no HTML de cada obra caso ainda não tenha feito isso.

Para mais informações a respeito de publicação e edição de obras, por favor, acesse a FAQ de Publicação e Edição. Você também pode se interessar pelo Tutorial: Publicando uma obra, para acompanhar um guia passo a passo.

Onde posso encontrar mais informações se não achei a resposta que procurava?

Para mais informações sobre skins no Archive of Our Own - AO3 (Um Arquivo Todo Nosso), inclusive skins do site e skins públicas, consulte a FAQ de Skins e Interface do Arquivo. Você pode encontrar respostas para outras perguntas frequentes sobre o AO3 nas demais seções da FAQ do AO3. Para perguntas e respostas sobre nossos Termos de Serviço, visite a FAQ dos Termos de Serviço. Você também pode checar nossa página de Known Issues (Problemas conhecidos). Se precisar de mais ajuda, por favor entre em contato com a equipe de Suporte.