Ir para o conteúdo
TubePress — gratuito, auto-hospedado & ativamente mantido
Aparência e temas

Aparência e identidade visual

Logo, favicon, cores, modo escuro, planos de fundo e controles detalhados de cards e da página de exibição.

A tela Appearance em /admin/appearance é a sua central de controle sem código. Tudo aqui reestiliza o tema ativo — logotipos, cores, modo escuro, layout e os detalhes nos cards de vídeo e nas páginas de reprodução — sem tocar em nenhum arquivo. As alterações são salvas como configurações e lidas pelo tema no momento da renderização, então você pode experimentar livremente e reverter qualquer coisa.

A tela é dividida em sub-abas na parte superior. Esta página percorre cada grupo. Se preferir alterar o markup em si, esse é o trabalho dos temas; os valores abaixo são expostos ao código do template como variáveis com prefixo $_, documentadas completamente na referência da API de temas.

Identidade Visual

Abra Appearance → Branding para definir sua identidade. Você pode enviar um logotipo separado para os temas claro e escuro — deixe ambos vazios para exibir o nome do site como texto simples, e o logotipo escuro recai para uma versão invertida do claro se você fornecer apenas este último. Um favicon (quadrado, pelo menos 32×32px) é exibido na aba do navegador.

Todos os arquivos de identidade visual ficam em /uploads/branding/. Uma imagem de fundo do site também é suportada, com um modo de exibição de cover, contain ou repeat; seu tema os lê como $_siteBackground e $_siteBackgroundMode. Você também pode ajustar a altura do logotipo para desktop (padrão 36px) e mobile (padrão 28px) com uma visualização ao vivo.

Use um PNG ou SVG transparente. Um logotipo com fundo transparente fica bem tanto no cabeçalho claro quanto no escuro. Mantenha cada arquivo abaixo de 5 MB.

Cores & modo escuro

Em Appearance → Colors você define duas paletas — uma para o tema Claro e outra para o tema Escuro — usando um seletor de cores com opacidade opcional. Cada substituição é compilada em propriedades CSS personalizadas e injetada como o bloco $_colorOverrides <style>, então poucos valores cascateiam por todo o tema. Cada paleta expõe os mesmos oito papéis:

Primário
Cor de destaque para botões, links e estados ativos. Compartilhada entre os dois temas por padrão.
Plano de fundo
O plano de fundo da página.
Superfície
Barras laterais, fundos de seção e campos de entrada.
Card
Cards de vídeo, comentários e blocos de conteúdo.
Fundo escuro
Rodapé, sobreposições e marcadores de posição.
Texto / Texto silenciado
Texto do corpo e os metadados mais suaves, links e texto de marcador.
Borda
Divisores e contornos de cards.

A mesma tela contém os controles de modo escuro. Um botão de alternância do usuário principal decide se os visitantes têm uma opção claro/escuro no cabeçalho, e um Padrão de Light ou Dark define o que eles veem primeiro. Se você desativar o botão de alternância do usuário, o site sempre usará o padrão escolhido e a paleta não utilizada ficará desativada.

Layout

Appearance → Layout controla como as grades são dimensionadas. A opção principal é vídeos por linha — escolha 4, 5 ou 6 (padrão 5), exposto aos templates como $_videosPerRow. As seções com abas também permitem definir a contagem por página e a ordenação padrão para vídeos, categorias, pornstars e canais, e um bloco Dimensões do Site define a largura máxima geral (padrão 1800px) e o preenchimento da página.

A ordenação por Tendências requer o plugin CTR. A opção de ordenação padrão Tendências permanece bloqueada até você ativar o ranking de cliques. Veja CTR ranking.

Opções do card de vídeo

Em Appearance → Video Cards você ajusta cada miniatura em uma listagem, com uma visualização ao vivo fixa que é atualizada conforme você altera cada controle.

OpçãoVariávelO que faz
Mostrar badge de duração$_cardShowDurationO marcador de duração no canto inferior direito da miniatura.
Mostrar título$_cardShowTitleO título do vídeo abaixo da miniatura.
Linhas do título$_cardTitleLinesLimitar o título a 1 ou 2 linhas.
Meta esquerda / direita$_cardMetaLeft / $_cardMetaRightEscolha o que é exibido em cada lado: views, likes, time (tempo atrás) ou none.
Espaçamento da grade$_cardGridGapEspaçamento entre os cards, 0–30px.
Raio de borda$_cardBorderRadiusArredondamento dos cantos, 0–24px.
Zoom ao passar o mouse$_cardThumbnailHoverAmpliar a miniatura ao passar o mouse.

Essas opções respeitam as configurações da página de reprodução abaixo. Se você ocultar a duração ou um valor de meta na página de reprodução, a opção de card correspondente é desativada automaticamente para que os dois permaneçam consistentes.

Opções da página de reprodução

A sub-aba Watch Page decide o que aparece ao redor do player. Cada item é um botão de alternância independente; seções sem dados se ocultam independentemente.

  • Informações do vídeoVisualizações, Duração, Data de publicação, Curtir / Não curtir e o botão Favorito.
  • Detalhes do vídeoAtores, Canais, Categorias e Tags.
  • Comentários — ative ou desative o encadeamento de comentários em todo o site ($_commentsEnabled). Veja comentários.

A mesma tela também configura o player (qualidade padrão, velocidade de reprodução, botão de download, loop e tela cheia com clique duplo) e o número de vídeos relacionados na barra lateral. Estes mapeiam para as variáveis $_watchShow* na API de temas.

Navegação & pesquisa

A sub-aba Menu constrói a navegação do cabeçalho. Ative ou desative a barra de pesquisa ($_menuSearch), depois monte o menu a partir de destinos integrados ou seus próprios links personalizados. Cada item ($_menuItems) contém um label, url, um sinalizador enabled e uma lista templates opcional para que um link possa ser exibido apenas em determinados tipos de página. Quando você publica mais de um idioma, um seletor de idioma aparece automaticamente.

Para as páginas estáticas que alimentam seu menu e rodapé, veja páginas & menus.

Próximos passos

Ainda com dúvidas?

Abra um ticket pelo painel e nossa equipe vai ajudá-lo.

Experimente o demo ao vivo → Baixar TubePress →