Ícones personalizados na Sidebar Default Sublime Text

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 !