Autor: Paulina Trojaike - The Neko | Publicado: 2012-10-18T00:32:00-03:00

Ohayou, minna-san! o/ Ogenki desuka? x3






Espero que esteja tudo ótimo, pois hoje irei ensinar a pôr playlist no Tumblr de suas pessoas! ^^



Estou com muito pouco tempo para preparar um bom post para vocês, mas vou deixar aqui um tutorial retirado do site "tumbletricks.com" para vocês! Espero que gostem e prometo que o post de amanhã será feito por mim! T.T'

Enfim, aqui está o tuto:








"Atualmente recebi alguns pedidos para que eu fizesse um tutorial ensinando a personalizar o SCM Music Player.Portanto neste tutorial ensinarei como fazer isso, porém, para este tutorial é necessário que se tenha umconhecimento, no mínimo, básico de CSS para conseguir personalizar como você quer =)Antes de usar alguma modificação no seu código, eu recomendo que você guarde uma cópia do código do seu theme no seu computador.Após isso isso, você deve editar o código CSS abaixo, personalizando as propriedades abaixo (as explicações do que faz cada seletor está ao lado, entre /* e */). Abaixo do código haverá um exemplo de cada imagem a ser usada neste player.

#player,#player a{ color:#5cd700; } /*Cor dos links*/#player{ background:url(URL_DA_IMAGEM); background-position:bottom; } /*Imagem do volume*/#player .mainImage{ background:url(URL_DA_IMAGEM); } /*Imagem de fundo*/#player #baseLeft{ width:TAMANHOpx; } /*Tamanho do lado esquerdo*/#player #baseRight{ width:TAMANHOpx;} /*Tamanho do lado direito*/#player .button{ width:TAMANHOpx; } /*Tamanho dos botões*/#player #play{ background:url(URL_DA_IMAGEM); } /*Botão de Play*/#player #play,#player #pause{ left:26px; }#player #previous{ left:0px; }#player #next{ left:52px; }#player #title{ left:90px; }#player #tooltip{ right:196px; }#player #timer{ right:120px; }#player #list{ right:0px; }#player #seeker{ right:320px; }#player #seekerBase{ border-color:#COR; } /*Cor da área que procura a parte da música*/#player #seekerBuffered{ background-color:#COR; } /*Cor da área da música que já carregou*/#player #seekerSliderBase{ background-color:#COR; } /*Cor do quadradinho de ir pra parte da música*/#player #volume{ width:65px; right:39px; }#player #volumeSlider{ width:8px; background:url(URL_DA_IMAGEM); } /*Controlador do volume*/#playlist,#playlist .module,#playlist h3{ border-color:#COR_DA_BORDA; color:#COR_DA_LETRA; } /*Itens da playlist*/#playlist h3{ background-color:#COR; } /*Cabeçalho da playlist*/#playlist .even{background-color:#COR;} /*Cor de fundo dos itens pares da playlist*/#playlist .odd{ background-color:#COR;}&nbsp;/*Cor de fundo dos itens ímpares da playlist*/#playlist .focus{ background-color:#COR_DE_FUNDO; color:#COR_DA_LETRA;} /*Cor do ítem em foco na playlist*/

Imagens de exemplo:Imagem do volume:http://scmplayer.net/skins/tunes/sizerAndVol.pngImagem de fundo:&nbsp;http://scmplayer.net/skins/tunes/main.pngBotão de play:&nbsp;http://scmplayer.net/skins/tunes/playBtn.pngControlador do volume:http://scmplayer.net/skins/tunes/sizerAndVol.pngDepois disso, você deve hospedar este arquivo com a extensão “.css” em algum&nbsp;site&nbsp;de hospedagem (recomendo o&nbsp;Webs&nbsp;&nbsp;e XPG&nbsp;), e usar o endereço que você hospedou ele quando for configurar o SCM lá no site, veja abaixo onde colar:O resto é normal, basta&nbsp;escolher&nbsp;sua playlist normalmente como já fazia no SCM mesmo sem ser personalizado com CSS =)Não se se ficou meio confuso para quem não entende (ou entende pouco) de CSS, mas este foi o modo mais simples que&nbsp;encontrei&nbsp;para explicar. Espero que tenha ajudado =)"



Certo! Está tudo aí para vocês! Qualquer dúvida, comentem! ^^


Beijos, Paulina.