As skins são uma especie de temas ou visual que mudam a aparência de algo que esteja relacionado aos computadores. As skins inicialmente eram famosas por serem criadas para o Windows Live Messenger, Emesene e outros programas de mensageiros instantâneos do Windows ou Linux. Sendo assim, os temas que alteram o visual padrão de um sistema operacional, software, site ou qualquer outra coisa que tenha o seu visual original alterado.
Assim, como as skins são famosas por alterarem o visual padrão de um programa computacional ou outra coisa, também são famosas no Tumblr por alterarem o visual do player do bem popular player de música SCM Player que dá a opção dos usuários dos blogs e sites a criarem uma lista de música a serem tocadas e em seguida, é gerado um código com uma playlist com as músicas pré-escolhidas, as quais são somente músicas vindas do Youtube.
Com isso, hoje o Tumblr Dicas traz um tutorial que ensinará passo a passo a como fazer uma skin customizada para gerenciarem as suas músicas favoritas.
Antes de mais nada, abra o bloco de notas do Windows (que pode ser acessado, através do menu Iniciar, executar e digitando notepad), depois de aberto o bloco de notas cole o código abaixo e siga as instruções abaixo.
#player,#player a{ color:#COR DO TEXTO; font-size: px; font-family: A FONTE QUE VOCÊ QUER EX: VERDANA, GEORGIA…;}
#player{ background:url(IMAGEM DA PLAY); background-position:bottom; background-color: #COR DO BG DO PLAYER;}
#player .mainImage{ background:url(IMAGEM DA SUA SKIN); }
#player #baseLeft{ width:93px; }
#player #baseRight{ width:145px;}
#player .button{ width:26px; }
#player #play{ background:url(); }
#player #play,#player #pause{ left:26px; }
#player #previous{ left:0px; }
#player #next{ left:52px; }
#player #title{ left:90px; font-size: 9px; }
#player #tooltip{ right:196px; }
#player #timer{ right:120px; }
#player #list{ right:0px; }
#player #seeker{ right:320px; }
#player #seekerBase{ border-color:#COR DA BORDA; }
#player #seekerBuffered{ background-color:#COR DO FUNDO DO CARREGAMENTO DA MUSICA; }
#player #seekerSliderBase{ background-color:#COR DO QUADRADO QUE ACOMPANHA A MUSICA; }
#player #volume{ width:65px; right:39px; }
#player #volumeSlider{ width:8px; background:url(http://static.tumblr.com/kwaqeuc/eb7lze93x/sizerandvolj_copy.png); }
#playlist,#playlist .module,#playlist h3{ border-color:#BORDA DA PLAYLIST;}
#playlist .module{ color:#COR DA FONT DA PLAY; background-color:#COR DO BG; }
#playlist h3{ background:url(http://dl.dropbox.com/u/58708531/bar2.jpg); color:#COR DA FONTE; background-color:#COR DO BG; }
#playlist .even{background-color:#fff;}
#playlist .odd{ background-color:#fff;}
#playlist .focus{ background-color:#fff; color:#aaa;}
Agora vamos editar ele através do bloco de notas.
#COR DO TEXTO: aqui você irá por a cor preta ou branca, se sua skin for com o fundo branco, você irá por o código da cor preto e se for branco você irá por a cor preta.
A FONTE QUE VOCÊ QUER EX: VERDANA, GEORGIA: Eu particularmente só uso a fonte verdana, mas você pode usar qualquer uma.
IMAGEM DA PLAY: Aqui você vai no PhotoScape e vai no “Menu” e escolhe a opção “Nova foto” e escolhe o tamanho 9×16 a cor vai ser da cor que quiser que o quadradinho da playlist seja, depois de salva a imagem, você vai no site http://www.tumblr.com/themes/upload_static_file e hospeda ela lá, copia a url que gerar e cola onde está “IMAGEM DA PLAY”.
#COR DO BG DO PLAYER: Aqui você vai definir a cor do bg (background) de sua skin, ou seja, a cor de fundo.
IMAGEM DE SUA SKIN: Aqui você vai por a imagem que você quer que seja a sua skin, novamente você vai em seu PhotoScape, menu, nova imagem e coloca no tamanho 299×25, a cor vai ser a cor de sua skin. Edite ela como de acordo com o seu gosto. Depois de salva a imagem de sua skin você vai novamente no site http://www.tumblr.com/themes/upload_static_file e hospeda a imagem, copiando e colando a URL da imagem que gerar no lugar de “IMAGEM DE SUA SKIN”.
#COR DA BORDA: A cor da borda vai ser a cor de seu bg, a que você colocou lá no #COR DO BG DO PLAYER, cole a mesma cor para não ficar feia a sua skin.
:#COR DE FUNDO DO CARREGAMENTO DA MUSICA: Aqui você vai colocar a cor que deseja aparecer quando a musica estiver carregando.
#COR DO QUADRADO QUE ACOMPANHA A MUSICA: Aqui é aquele quadradinho que fica mostrando em que parte da musica está, ou seja, você vai por a cor que deseja aquele quadradinho.
#BORDA DA PLAYLIST: Para não ficar feia a sua skin, aqui você vai por a mesma cor que colocou no fundo de seu background.
#COR DA FONT DA PLAY: Aqui é a cor das letras de sua play, a cor que mostra o tempo de carregamento de sua skin, é bom por sempre o preto.
#COR DO BG: Aqui você vai colocar novamente a cor do bg de sua skin.
#COR DA FONTE: Novamente é a cor da fonte de sua skin, eu indico por preto.
#COR DO BG: Novamente é a cor do bg de sua skin.
Feito e editado a sua skin você salva ela pelo bloco de notas em .css, exemplo: skin.css
Depois de salvar a sua skin você vai no site http://www.tumblr.com/themes/upload_static_file e vai hospedar a sua skin, copie a url que gerar e cole no site http://scmplayer.net/ para ver se ela ficou do jeito que você queria.
