[tutorial] criar tema para chrome

Postagem de conteúdo sobre outras linguagem web
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 680
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] criar tema para chrome

Post by Kodo no Kami » Mon Mar 16, 2015 9:29 am

e ae galera ano passado fiz um tutorial ensinando criar extensao do chrome nesse tutorial vou ensinar como criar um tema para ele, para começar fazemos o mesmo esquema da extensao criamos um pasta e dentro dela criamos um arquivo com o nome manifest.json, dentro desse arquivo colocamos manifest_version seguido da versao que é 2, isso indica que a versao do arquivo manifest é a 2

Code: Select all

{
 "manifest_version" : 2
}
depois usamos o name seguido do nome do tema (eu chamei de kodo koneko)

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko"
}
depois a versao do tema que seria o version

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0"
}
agora usamos theme e abrimos um novo bloco de chaves

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : { 
 }
}
dentro do bloco tema podemos usar outros atributos entre eles imagem e cores e atraves deles que vai modificar o tema do chrome, primeiro vamos brincar com imagens, usamos o atributo images e abrimos um novo bloco

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 }
 }
}
a primeira alteraçao que vamos fazer vai ser o fundo da nova aba, para isso usamos o atributo theme_ntp_background e passamos para ele o nome da imagem (a imagem deve estar dentro da pasta e deve ser no formato png e ela é estatica ou seja quando for desenhada no chrome vai continuar com o mesmo tamanho entao use uma imagem do tamanho certo no caso a imagem que eu usei tem tamanho 1920x1080)

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png"
 }
 }
}
agora vamos instalar o tema para ver como fico, para isso aperte no botao opçao que fica perto da url aquele com tres riscos, depois configuraçao e extensoes, habilite o modo desenvolvedor depois aperte em carregar extensao expandida e localize a pasta

Image

pronto agora so testar para ver se tem uma imagem de fundo la na nova aba

Image

tipo agora vamos colocar uma imagem do autor (nao precisa ser uma foto so uma imagem escrito um texto ou slogan basta tambem nao precisa ser muito grande), para colocar a imagem do autor usamos o atributo theme_ntp_attribution (no caso usei apenas uma imagem que fiz no paint mesmo)

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png"
 }
 }
}
Image

podemos colocar uma imagem na parte que fica aba atual url e favorito com o atributo theme_toolbar (no caso coloquei uma imagem toda azul)

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png"
 }
 }
}
Image

podemos colocar uma imagem na parte inferior da aba com o atributo theme_frame (no caso coloquei uma imagem toda vermelha)

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png"
 }
 }
}
Image

podemos colocar uma imagem nas outras abas com o atributo theme_tab_background (no caso coloquei uma imagem toda verde)

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png",
 "theme_tab_background" : "kodoverde.png"
 }
 }
}
Image

existe outros atributos alem dos citados porem vamos nos limitar apenas nesses, para mudar a cor do texto criamos um atributo colors dentro do atributo theme e passamos um bloco para ele tambem

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png",
 "theme_tab_background" : "kodoverde.png"
 },
 "colors" : {
 }
 }
}
para mudar a cor do texto na nova aba usamos o atributo ntp_text passamos para ele um conjunto com 3 valores que sao equivalente ao rgb (no caso eu coloque a cor azul para o texto 0,0,255)

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png",
 "theme_tab_background" : "kodoverde.png"
 },
 "colors" : {
 "ntp_text" : [0,0,255]
 }
 }
}
Image

para mudar a cor do texto da aba atual usamos o atributo tab_text (no caso coloquei amarelo 255,255,0)

Code: Select all

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png",
 "theme_tab_background" : "kodoverde.png"
 },
 "colors" : {
 "ntp_text" : [0,0,255],
 "tab_text" : [255,255,0]
 }
 }
}
Image

bom galera esse é so alguns de muitos outros atributos que existe para customizar seu tema, embora esse tutorial so vou mostrar esses ainda sim da para criar alguns temas legais ai ^^

by kõdo no kami
Image

Conheça o sistema e manipule ele, se limite ao sistema e seja manipulado por ele ~kodo no kami

meu perfil yahoo

User avatar
51M0N
Admin
Admin
Posts: 865
Joined: Fri Jan 02, 2015 2:06 pm

Re: [tutorial] criar tema para chrome

Post by 51M0N » Mon Mar 16, 2015 10:06 am

Muito legal mano,vou testar aqui =)
"Você, eu, nem ninguém vai bater tão duro como a vida. Mas não se trata de bater duro. Se trata de quanto você aguenta apanhar e seguir em frente (...). É assim que se consegue vencer." by Rocky Balboa

User avatar
FranciscoRamonsp
Admin
Admin
Posts: 8
Joined: Sat Mar 07, 2015 7:14 pm

Re: [tutorial] criar tema para chrome

Post by FranciscoRamonsp » Sun Mar 22, 2015 8:47 pm

vou cobrar direito de imagens da minha foto ai :D kkkk, e só lembrando que o firefox OS usa esquema bem parecido para criação de Aplicativo :D
Salaam Aleikum

Post Reply

Return to “Outros”