O TSH Style Studio agora tem uma versão online no brunochross.net. Você pode abrir o editor pelo menu superior do site, escolher a pasta do Tournament Stream Helper no seu computador e personalizar as cores, as fontes, os tamanhos dos textos e os elementos que aparecem no placar.
Esta edição foi adaptada da v0.2.4 para concentrar os ajustes mais usados na preparação de uma transmissão. A ideia é facilitar mudanças como combinar o placar com a identidade de um torneio, aumentar os nomes dos jogadores e esconder informações que não serão utilizadas, sem precisar procurar cada configuração no CSS.
Abra aqui: TSH Style Studio Online. O editor é exclusivo para desktop. Use Google Chrome ou Microsoft Edge no computador em que está a pasta do TSH.
O que você pode personalizar na versão online
O painel reúne as opções de aparência em uma única área de trabalho, ao lado da prévia. Os controles disponíveis incluem:
- Cores: fundo, texto, destaque de cada jogador, números do placar e cor dos nomes.
- Fontes: escolha da família tipográfica e importação de uma fonte pelo botão Importar .TTF/.OTF.
- Tamanhos: nomes dos jogadores, números do placar, rodada, torneio e fase.
- Visibilidade: mostrar ou ocultar elementos como logo, avatar, bandeiras, patrocinador, Twitter/X, pronomes e seed, quando presentes no layout.
- Ajustes individuais: selecionar um elemento na prévia para alterar sua cor, fundo, tamanho de fonte ou visibilidade.
Também permanecem disponíveis o histórico de desfazer/refazer, a comparação com o original, o download do CSS e o salvamento no placar com backup.
Quem acompanhou a apresentação do TSH Style Studio completo viu recursos adicionais. A edição online apresentada neste tutorial não oferece movimentação de elementos, efeitos 3D, imagens de fundo, transições ou edição livre de CSS. O foco aqui é a personalização básica do visual. Trata-se de um projeto independente de BrunoChrosS, e não de uma ferramenta oficial do Tournament Stream Helper.
Antes de começar
Tenha a pasta do TSH disponível no computador e saiba qual HTML é usado pelo placar da sua cena. Se você tem várias cópias do programa, confira qual delas está ligada ao OBS: editar uma cópia e exibir outra é uma causa comum de o resultado não aparecer.
Não é necessário instalar um novo editor para abrir a página. Porém, o site não substitui a instalação do TSH nem hospeda seus placares. Ele abre os arquivos que você autorizar e grava as alterações na pasta escolhida. O TSH e a fonte de navegador do OBS continuam responsáveis pelo funcionamento da overlay na transmissão.
As capturas deste guia foram feitas no modo de demonstração, com dados ilustrativos. Ele permite conhecer os controles antes de selecionar uma pasta. Por isso, o botão de salvar aparece desabilitado nas imagens: o salvamento fica disponível depois da escolha de uma pasta e de um placar.
1. Abra o editor pelo menu do site
No computador, entre no brunochross.net e clique em TSH Style Studio, no menu superior. Você também pode acessar diretamente a página do editor.
Na parte de cima ficam a seleção da pasta, a pesquisa de placares e o botão de salvar. À esquerda estão os controles de aparência; à direita, a prévia. Se aparecer o aviso de uso exclusivo no computador, abra a página em um desktop e amplie a janela. O editor não foi projetado para celular.
2. Selecione a pasta principal do TSH
Clique em Selecionar pasta e escolha a pasta principal da instalação que você utiliza. É nela que ficam as pastas de layouts e os arquivos de saída do TSH. Evite selecionar somente a pasta de um placar específico.
O navegador solicitará autorização para acessar e editar os arquivos. Essa permissão permite listar os HTMLs, carregar os recursos da prévia e salvar o resultado. Os arquivos da sua pasta são processados no navegador e não são enviados ao site.
Se a autorização tiver expirado em um acesso posterior, use novamente Selecionar pasta para reconectar. Se o navegador não oferecer esse recurso, abra a página no Chrome ou Edge de um computador.
3. Escolha o placar correto
Depois de autorizar a pasta, use a pesquisa do campo Placar para localizar o HTML pelo nome ou caminho. Selecione o mesmo arquivo utilizado na transmissão. Confira o caminho apresentado acima da prévia antes de editar.
Quando disponíveis, o editor lê os dados locais do TSH para preencher a visualização. Caso não encontre informações suficientes, utiliza dados de amostra. O botão circular de atualizar relê a prévia; ela não deve ser tratada como um monitor contínuo dos resultados da partida.
Se você ainda está organizando essa integração, consulte também o guia sobre a pasta OUT do TSH e o placar no OBS.
4. Ajuste as cores e a fonte
Comece pelas cores de Jogador 1 e Jogador 2. Depois confira o fundo e o contraste dos textos. A mudança aparece na prévia, permitindo comparar alternativas antes de salvar.
No campo Família tipográfica, escolha a fonte. Para utilizar um arquivo próprio, selecione primeiro a pasta e o placar e clique em Importar .TTF/.OTF. O editor copia a fonte para a pasta do placar; salve ao terminar para registrar essa configuração no perfil.
Uma boa sequência é escolher a fonte antes de definir os tamanhos. Duas famílias no mesmo tamanho podem ocupar larguras diferentes. Teste nomes longos e a presença de patrocinadores para verificar se a leitura continua confortável.
5. Acerte os tamanhos dos textos
Role o painel de controles para encontrar Nomes dos jogadores, Números do placar e Informações da partida. Você pode usar os controles deslizantes ou digitar um valor no campo numérico.
Na demonstração acima, os nomes foram ajustados para 48 px, com fonte Arial e cores diferentes para os dois lados. Esse valor é apenas um exemplo, não uma recomendação universal: o espaço disponível depende do layout. Aumente aos poucos e confira se o nome não invade o placar, a bandeira ou outro elemento.
Os botões de zoom e Ajustar ajudam a visualizar a prévia. Eles alteram a forma como você enxerga o placar no editor; não substituem a configuração do tamanho da fonte.
6. Oculte o que não será usado — e saiba como recuperar
Nos interruptores de visibilidade, desative as informações que não fazem parte da sua transmissão. Por exemplo, se você não usa pronomes ou seed, pode ocultar esses elementos sem editar o HTML manualmente. Os controles terão efeito quando o elemento correspondente existir no layout selecionado.
Para um ajuste específico, clique em Selecionar elemento na prévia e depois no elemento desejado. O painel exibirá os controles individuais. Desmarque Mostrar elemento para escondê-lo.
O elemento oculto permanece na lista Elementos editados. Clique em Mostrar para recuperá-lo, mesmo que ele já não esteja visível na prévia. Se você o ocultou por um interruptor geral, basta reativar esse mesmo interruptor.
7. Revise, compare e desfaça
Use Ctrl+Z para desfazer e Ctrl+Shift+Z ou Ctrl+Y para refazer. Os botões com setas na barra da prévia oferecem o mesmo acesso ao histórico.
A opção Ver original permite comparar o resultado com a aparência original. Desative-a para voltar à visualização das alterações. Já Descartar alterações pede confirmação antes de retornar ao estado salvo. Antes de trocar de placar ou fechar a página, salve o trabalho que deseja manter.
8. Salve no placar e atualize a fonte no OBS
Clique em Salvar no placar ou Salvar alterações. O editor cria um backup e grava a camada de estilo e o perfil de edição ao lado do HTML escolhido. Quando necessário, também adiciona ao HTML a integração que carrega o estilo. O CSS original do layout não é reescrito pelo gerador.
Baixar CSS tem outra finalidade: exporta a folha de estilos. Esse download, sozinho, não faz a mesma integração que o botão de salvar na pasta.
Após salvar, vá ao OBS e atualize a fonte de navegador que exibe aquele placar. Nas propriedades dessa fonte, o comando de atualização do cache recarrega seu conteúdo, conforme a documentação oficial da fonte de navegador do OBS. Faça a conferência em uma cena de teste antes de exibir a mudança ao público.
Não coloque a URL do editor como fonte do placar no OBS. Continue utilizando o endereço ou arquivo da overlay do TSH que sua cena já usa. Nesta edição online, não há um controle exposto de sincronização automática do OBS: salvar e atualizar a fonte são etapas distintas.
Se algo não aparecer como esperado
- Não encontrei o HTML: confirme que selecionou a pasta principal do TSH e que o arquivo está dentro de uma pasta de layouts. Limpe a pesquisa para visualizar a lista completa.
- Salvar está desabilitado: autorize a pasta e selecione um placar. No modo de demonstração, não há arquivo local associado para gravar.
- A cor mudou na prévia, mas não no OBS: salve, atualize a fonte de navegador e confira se o OBS está usando o mesmo HTML e a mesma instalação.
- Um controle não mudou nada: layouts personalizados podem usar nomes e estruturas diferentes. Tente selecionar o elemento diretamente na prévia.
- A fonte não apareceu: confirme a importação, salve o placar e recarregue a fonte no OBS. Ao transferir o layout para outro computador, leve também os arquivos de fonte utilizados.
- Os dados estão diferentes da partida atual: atualize a prévia. Nomes e resultados continuam sendo administrados no TSH; o Studio cuida da aparência.
Um primeiro teste simples
Para conhecer a ferramenta, abra o modo de demonstração, escolha duas cores para os jogadores, mude a fonte, aumente os nomes e oculte a logo. Depois restaure a logo e experimente desfazer uma alteração. Esse pequeno exercício mostra o fluxo antes de você trabalhar no layout usado em produção.
Quando estiver familiarizado, selecione sua pasta e aplique os ajustes ao placar desejado. O objetivo é chegar à transmissão com uma aparência legível, coerente com seu evento e conferida no OBS.