Uncategorized

Ícones personalizados na Sidebar Default Sublime Text

sidebar-sublime

A muito tempo sem colocar nada de post resolvi vir postar alguma coisa pequena.

Pra quem usa o Sublime, experimenta os inúmeros temas mas sempre acaba voltando
pro Tema original porque no final ele é mesmo o mais bacana de todos os temas
que existem ai vai uma pequena alteração mais muito legal no Tema Original dele.

O tema original tem como único problema pra mim a “Treeview” original ou “sidebar” como
muitos chamam (inclusive no programa). Quando se trata de projetos e estamos mexendo com
ela fica muito ruim identificar os milhares de documentos referentes ao projeto. Existe
uma solução de UI pra isso que já é usada em muitos outros programas (IDE’s, no caso) que
é iconizar os inúmeros arquivos por tipos (.php, .html, .png, .css, etc).

Com isso, fica mais fácil identificar os arquivos dentro das pastas e sub-pastas do
projeto em que está trabalhando (e por que não projeto(s) aninhados).

A dica aqui é simples. O arquivo zipado em anexo (clique aqui para download) contém um pacote de ícones que eu mesmo
criei mantendo o mesmo estilo original do sublime dos poucos ícones que ele tem. Com
isso você deve apenas descompactar a pasta dentro da sua “Browse Package” de usuário.

O tema original do Sublime, assim como qualquer tema que você instala possui um padrão
de pastas que podem ser subscritas se você colocar no local certo e com isso obter o
resultado desejado. Existem arquivos padrões com nomes padrões e nesta pasta que
estou anexando zipada pra você eles já estão com os devidos nomes aplicados.

A notícias é que esta pasta, dependendo da instalação do Sublime pode mudar de endereço.

Algumas ficam dentro da pasta “packages” e outras simplesmente ficam soltas, dentro da pasta
“Browse packages” mesmo do Usuário.

Para fazer isso, basta ir no menu superior em “Preferences…” -> “Browse Packages” (por isso
chamo a pasta com esse nome, por referência). Então você pode começar tentando diretamente
nesta pasta, se não funcionar ‘e’ se tiver dentro dela outra pasta chamada simplesmente “packages”, você pode (se não funcionar), jogar dentro dela depois.

1 – Crie uma pasta nova chamada “Theme – Default” e pegue os arquivos dentro da pasta descompactada e cole todos lá dentro (ou descompacte o arquivo compactado daqui da matéria diretamente dentro dela).

2 – Abra seu Sublime text que já vai estar funcionando.

Lembre-se, se não funcionar tente recortar esta pasta e colar dentro da pasta “packages” (se existir) e ai vai funcionar.
Conhecimento Adicional 🙂
O Sublime possui ainda uma forma de estilizar a Sidebar do tema original. Pra mim bastou pouca
coisa pra ficar satisfeito. As vezes tenho dificuldade de ler os arquivos por causa do espaçamento original e o tamanho das letras usadas nele. Então bastou mexer um pouquinho no afastamento entre linhas e aumentar um pouco o tamanho da fonte pra poder deixar do jeito que me agradasse. Então é o seguinte.

No mesmo menu superior – “Preferences…” -> “Browse Packages” do seu Sublime, ao abrir a pasta entre na pasta “User”. Dentro dela, se não existir, crie um arquivo chamado “Default.sublime-theme” (caso existe abra ele com um editor de texto ou editor de código como o próprio sublime text por exemplo).

Se ele existir, repare nos códigos que ali existem. Vai perceber um padrão (porque não vou te ensinar a programar aqui né…). De qualquer forma, no meu pessoal deixei apenas…

[
//Sidebar Label
{
“class”: “sidebar_label”,
“color”: [9, 9, 9],
“font.size”: 12.5
},
// Sidebar container
{
“class”: “sidebar_container”,
“layer0.opacity”: 1,
“content_margin”: [0,0,0,0]
},
// Sidebar tree || entries
{
“class”: “sidebar_tree”,
“indent_offset”: 12.5,
“indent”: 15,
“row_padding”: [6,6],
“layer0.opacity”: 1.0,
“indent_top_level”: true
},
]

Se reparar vai ver que estou tratando de forma separada cada padrão de funcionamento da sidebar. Primeiro tratei a label, depois tratei o container (contenedor da sidebar e seu conteúdo) e depois os detalhes da Tree-view. Os comandos são basicamente declarar o local a ser implementado as alterações logo abaixo…

– declaro a class que vai ser afetada (classe css de estilo): “class”: “sidebar_label”,
– declaro qual item da classe deve ser alterado e o valor : “font.size”: 12.5
Para conhecer melhor estes códigos e como eles trabalham no Sublime Text, basta pesquisar pela internet um pouco mais. Uma dica legal é você instalar um tema (SETI_UI por exemplo) e inspecionar este mesmo arquivo de configuração e ver como ele declara o arquivo e como ele funciona. Indico este tema porque é de um dos desenvolvedores do Sublime Text mesmo que criou, então é um bom tema pra estudar e conhecer melhor o Sublime.

Pra quem como eu gosta do Tema Default mas gostaria de fazer os “acertos detalhados das arestas” vai gostar de estudar um pouco sobre isso, o pouco que se estuda trás grande satisfação na hora de usar o programa.

É isso ai pessoal, espero ter ajudado com a foforização do seu Sublime.
Vlw !

Anúncios
Padrão

7 comentários sobre “Ícones personalizados na Sidebar Default Sublime Text

    • Fala ai Marcelo. Blz?
      Então, isso acontece porque o arquivo que eu disponibilizei está sem o ícone do php acredito. Então ele substitui pelo default do Sublime Text. O que eu fiz pra resolver este seu problema foi jogar a minha pasta zipada de novo, atualizada agora. Basta você baixar novamente a subtituir pela atual que colocou lá no seu Sublime que deverá solicionar o problema. A única coisa porém é que agora os ícones estão coloridos. Dai vai do seu gosto. O que você pode fazer também é baixar este zip da pasta na nova versão que está agora no mesmo link e pegar os ícones do PHP e editar eles pra cor escura, ou preta (acho que a cor que usei neles doi #222222; ou #333333; teste ai) e jogar diretamente na sua pasta local. Olhe sua pasta local antes e procure pelo nome do ícone php para seu sublime, ele pode ter renomeado ele por algum motivo (caso seja algo diferenciado, o que acho difícil). Se quiser pode retornar aqui pra gente ir solucionando juntos esse problema. Pode contar comigo pra te ajudar. No mais é esperar o que vier a me dizer.
      Grande abraço.

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s