O processo descrito pode ser aplicado a todas as opções de "Barra Clima Tempo + Finance" disponíveis na plataforma. Como exemplo, editaremos o modelo "Barra Clima 3 Dias + Finance HTML5".
Primeiro passo
- Entre na sua conta 4 yousee manager e vá até o menu notícias, depois clique em Templates de RSS.
- Pesquise pelo template RSS que vai ser modificado e depois clique em alterar.
- Clique na imagem com o rótulo "HTML5" para fazer o download do template para o seu computador.
Um arquivo ZIP será baixado para o seu computador.
- Descompactado ele irá gerar esses dois arquivos. (OBS: É importante ter o Visual Studio Code instalado em sua máquina.
- Link para download: Download Visual Studio Code - Mac, Linux, Windows.
- Abrindo o Visual Studio Code, clique em "File > Open Folder", e procure pela pasta onde o arquivo foi descompactado.
- Com isso, o ambiente estará pronto para o próximo passo.
Segundo Passo
- Entre no manager e vá até o menu notícias, e depois clique em fonte RSS.
- Pesquise pelo nome da fonte que quer alterar e logo em seguida clique no ícone de preview.
- Clique com o botão direito sobre o preview da notícia e selecione a opção "Inspecionar".
- Nessa etapa, localizaremos uma tag chamada "iframe", conforme mostrado na imagem. Para facilitar a busca, use o atalho Ctrl+F e digite "iframe" na barra de pesquisa. Geralmente, ele será o primeiro resultado encontrado.
- Se a tag "iframe" não aparecer, feche a ferramenta de inspeção, reabra-a e realize a pesquisa novamente.
- Para garantir que está correto, clique duas vezes sobre o código do iframe. Em seguida, copie o trecho que começa no "?" e termina antes do fechamento das aspas:
- Com esses parâmetros encontrados, vamos voltar ao Visual Studio Code e abrir o nosso arquivo no navegador.
- Para agilizar sua edição, podemos instalar no Visual Studio Code uma extensão que atualiza automaticamente as alterações feitas no código, eliminando a necessidade de atualizar a página manualmente ou pressionar "F5". A seguir, veja como proceder:
- Para melhorar a visualização, clique em Inspecionar. Na opção "Dimensões: Respondendo", ajuste para a dimensão desejada. No exemplo, foi configurado como 1076 x 100. Dessa forma, você trabalhará com o template nas mesmas proporções em que ele aparecerá no player.
Pegue o código encontrado nas etapas anteriores, dentro da tag "iframe", e cole-o após "index.html" na barra de endereços do navegador, dessa forma:
Terceiro passo
- Vamos ajustar o tamanho do primeiro ícone abaixo de "hoje". Para isso, clique no ícone de Inspecionar Elemento para identificar o nome do elemento que será alterado, conforme mostrado na imagem.
- O nome do elemento que procuramos está no 3° passo, "icone1".
- Com o nome do elemento localizado, vamos iniciar as edições. Para isso, volte ao Visual Studio Code e procure por esse nome no código. Siga os passos abaixo para encontrá-lo:
- Para localizar rapidamente o nome "icone1" no código, utilize a tecla de atalho "Ctrl+F". Isso abrirá uma caixa de busca onde você pode digitar o nome e o editor irá encontrá-lo automaticamente.
- Um detalhe importante é que todos os elementos a serem alterados seguem esta estrutura:
- O que precisamos focar aqui são as propriedades "top", "left", "width" e "height", pois são nessas propriedades que vamos realizar as edições.
OBS: Esse processo é aplicável a todos os ícones que precisam ser editados. Basta repetir os mesmos passos. A única diferença ocorre quando for necessário editar texto, mas isso veremos em outro momento.
Edição "icone1":
Esse processo pode ser repetido para todos os demais ícones. Quanto à edição de texto, há um pequeno detalhe. Ao procurar o nome do elemento, encontramos "nomedia1". Segue o passo a passo para editar o texto:
- Dentro do código, ao localizar o "nomedia1", você encontrará o parâmetro "font-size". É com esse parâmetro que ajustamos o tamanho da fonte. Assim, vamos alterar o segundo valor de "font-size" para o tamanho desejado.
Edição "nomedia1":
- Essa edição pode ser aplicada a qualquer texto presente na Barra Clima + Finance, bastando localizar o nome do elemento correspondente e alterar o parâmetro "font-size" conforme necessário.
- Caso queira adicionar sua logo na barra, siga os passos abaixo:
- Para facilitar, nomeie o arquivo da logo como "logo.png". Em seguida, no código, use o comando "Ctrl + F" para procurar por "logo" e encontrar a estrutura correspondente.
Passo 4
- Após realizar as alterações, você pode fazer o upload do novo template para a plataforma do Manager.
- Antes de fazer o upload, é necessário realizar algumas alterações adicionais. Uma delas é alterar o nome da pasta e atualizar essa alteração no código.
- Agora, compacte a pasta e faça o upload para o Manager.
- Agora, compacte o arquivo em formato ZIP antes de fazer o upload para o Manager.
- Dentro da plataforma vá em notícias > Templates de RSS > Adicionar e encontre a pasta que o arquivo está compactado. Segue o passo a passo:
Após seguir todos os passos, o template com suas edições estará pronto para ser utilizado. Basta agora associá-lo ao player.