Como criar temas css3 themeroller personalizadas

Os 24 temas CSS3 predefinidos fornecem uma ampla gama de cores, texto e outras opções. No entanto, é possível criar um número significativamente maior de temas usando a abordagem personalizada. Você poderia começar com a configuração do tema padrão e trabalhar a partir daí, mas a melhor abordagem é encontrar um tema pré-definido que parece perto do que você quer e modificá-lo em seu lugar.

Não só você vai fazer menos trabalho dessa maneira, mas você pode achar que não há que muitos recursos para mudar uma vez que você tem um tema pré-definido em mente. Este artigo ajuda a criar um tema personalizado usando ThemeRoller.

Cada tema é composto por um número de configurações. Alterando uma configuração particular, você controla a aparência de todos os recursos jQuery UI, incluindo todos os widgets. Cada uma dessas configurações tem um número de subsettings você pode usar para controlar a aparência geral do seu tema. A lista a seguir fornece uma visão geral dessas configurações.

• Configurações de fonte: Determina a aparência geral do texto no tema. Você pode escolher o tipo de letra, peso e tamanho da fonte.

  Video: Como Mudar os Temas Recalbox

• Raio de canto: Determina o tamanho dos cantos arredondados utilizados para os vários elementos. Esta definição não afetará um navegador que não suporta cantos arredondados, como o Internet Explorer 7.

• Cabeçalho / Barra de Ferramentas: Especifica as configurações para o fundo e borda usado para todos os cabeçalhos e barras de ferramentas.

  Ao trabalhar com o fundo, você pode escolher a cor de fundo, textura, e percentual de cobertura. UMA textura especifica como o fundo é modelado, tais como o uso de diagonais ou diamantes. Clicando no campo textura exibe automaticamente uma lista pictórica aceitável - basta escolher a textura que você quer tentar. Selecionando a textura certa pode adicionar um toque especial ao seu site.

  

  As configurações de fronteira controlar as cores fronteira, texto e ícone. Quando você clica em um desses campos, você verá uma caixa de diálogo de seleção de cores. No entanto, você também pode digitar um valor de cor específico, usando a notação hexadecimal.

  

  Video: Criando um tema do zero - Tumblr [ Part 01.1 ]

• Conteúdo: Fornece as mesmas seleções fundo e da beira como os fornecidos pelas configurações cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam o conteúdo da página, em vez de títulos e barras de ferramentas.

• 
  
  
  

  Clicável: estado padrão: Fornece as mesmas seleções fundo e da beira como os fornecidos pelas configurações cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam controles que estão no estado padrão, ao invés de títulos e barras de ferramentas.

• Clicável: hover estado: Fornece as mesmas seleções fundo e da beira como os fornecidos pelas configurações cabeçalho / barra de ferramentas. A diferença é que essas configurações afectar controlos que se encontram no estado de foco (quando o cursor do rato é colocado sobre a parte superior do controlo), em vez de posições e barras de ferramentas.

• Clicável: estado ativo: Fornece as mesmas seleções fundo e da beira como os fornecidos pelas configurações cabeçalho / barra de ferramentas. A diferença é que essas configurações afectar controlos que estão no estado activo (seleccionado), em vez de posições e barras de ferramentas.

• Realçar: Fornece as mesmas seleções fundo e da beira como os fornecidos pelas configurações cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam qualquer coisa que o usuário tenha realçado na tela, em vez de títulos e barras de ferramentas.

  Video: Criando Temas para wordpress - Aula 2 Aplicando um tema padrão

• Erro: Fornece as mesmas seleções fundo e da beira como os fornecidos pelas configurações cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam mensagens de erro (incluindo conteúdo), ao invés de títulos e barras de ferramentas.

• Tela modal para sobreposições: Define a maneira pela qual as sobreposições aparecem na tela. A sobreposição é a informação que é apresentada por cima do conteúdo existente em grande parte da forma como uma caixa de diálogo exibe sobre a parte superior de um aplicativo. As configurações controlam o fundo e aparência sobreposição.

  Video: Como criar temas wordpress facilmente

  As configurações de fundo definir a cor, textura e percentual de cobertura do fundo. As texturas utilizadas para uma sobreposição são completamente diferentes das utilizadas para outros elementos, então você precisa verificá-los cuidadosamente. Em todos os outros aspectos, as configurações de fundo funcionam da mesma forma como aqueles usados ​​para as configurações de cabeçalho / barra de ferramentas.

  O Overlay Opacidade controla quão bem você pode ver o conteúdo subjacente. Na maioria dos casos, ThemeRoller fornece um mínimo de indícios de transparência para dar a página de uma aparência vítrea (encontrado em alguns sistemas operacionais de hoje). No entanto, você pode alterar essa configuração para fornecer vários efeitos especiais. Definir esse valor muito baixo tende a revelar uma distração para o leitor porque o conteúdo original é visto com muita facilidade.

• Sombras: Modifica a aparência de sombras, que tendem a dar alguns elementos da página um efeito 3D. Você pode controlar o fundo ea aparência geral da sombra projetada. Os controles de fundo são precisamente os mesmos que aqueles utilizados com sobreposições tela modal.

  A aparência geral da sombra é definida pela opacidade sombra, espessura, e deslocamento do elemento sombreado. Você também pode controlar o arredondamento dos cantos de sombra (quando o recurso é suportado pelo navegador).