Aprende a hacer tus skins para Taringa

Hola a todos, en este post les enseñare a crear un skin para Taringa! en Stylish.
Proximamente, sacare el tuto para hacerlo con Stylebot

Gracias a @Leptico, por darme la idea de postear esto





Aqui esta el primer Codigo, que es el Header




#header { 
background: url (Aquí el Link del Header que ustedes quieran poner) repeat-x top center #545454 !important; 
    border-bottom: 1px solid #545454!important; 
    width: 100% !important; 
    position: fixed !important; 
    z-index: 2000 !important; 
    top: -10px !important; 
}







En la parte "Background: url" obviamente, ahí pondrán la imagen que ira en el Header, con la siguiente medida:

935 x 82

Ahora, en la parte que dice "position:" si quieren el header fijo, solo dejen el código como esta, y si no lo quieres fijo solo borren toda la linea del codigo position






Código Body



body {
    background: url("Aqui el link de la imagen, no borrar las comillas") repeat fixed
}







Este code sirve para ponerle un Background al fondo de a pagina.
Aquí el ejemplo



↓↓↓↓↓↓ SIN EL CÓDIGO ↓↓↓↓↓↓







↓↓↓↓↓↓ CON EL CÓDIGO ↓↓↓↓↓↓








Código Notification/Notification Board


.notification-board > .notification a {
color: #ababab;
font-weight: normal;
}







Este Codigo es para cambiar el color del texto de las notificaciones, para cambiar el colo solo editen la parte que dice "color:" y pongan el código de color que ustedes quieran.

Ejemplo:


↓↓↓↓↓↓ SIN EL CÓDIGO ↓↓↓↓↓↓







↓↓↓↓↓↓ SIN EL CÓDIGO ↓↓↓↓↓↓







Este codigo, es para poder cambiar el cuadro que rodea la notificacion,

.notification-board > .notification {
background: url("Aqui el Link de la imagen, no borrar las comillas") repeat;
border-radius: 5px;
color: white;
padding: 8px;
font-size: 11px;
line-height: 16px;
position: relative;
cursor: pointer;
}





Si desean modificar el color del otro texto, solo cambien el código de color, y si desean cambiar el background de la notificacion tiene que ser de la siguiente medida:

1 x 1

Ejemplo

↓↓↓↓↓↓ SIN EL CÓDIGO ↓↓↓↓↓↓







↓↓↓↓↓↓ CON EL CÓDIGO ↓↓↓↓↓↓










Código Iconos Rangos/Categorias

Solo copien y peguen, si quieren poner sus propios iconos, solo modifiquen los iconos que quieren cambiar.


li.user-Elite {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 10px -32px !important;
}

li.user-Silver {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 15px -72px !important;
}

li.user-Músico {
background: url(http://k42.kn3.net/B71186D7A.png)no-repeat !important;
background-position: 15px !important;
}

li.user-Gold {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 20px 12px !important;
}

li.user-Avanzado {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 5px -120px !important;
}

li.user-Experto {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 5px -495px !important;
}

li.user-Regular {
background: url(http://6600.es/images/8jebig34bzqrorvnm1v.png)no-repeat !important;
background-position: 13px -83px !important;
}

li.user-Amateur {
background: url(http://6600.es/images/8jebig34bzqrorvnm1v.png)no-repeat !important;
background-position: 13px -132px !important;
}

li.user-Aprendiz {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 5px -650px !important;
}

li.user-Troll {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 15px -442px !important;
}

li.user-Platinum {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 5px -278px !important;
}

li.user-Diamond {
background: url(http://6600.es/images/8jebig34bzqrorvnm1v.png)no-repeat !important;
background-position: 9px -340px !important;
}

li.user-Inexperto {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 5px -332px !important;
}

li.user-Iniciado {
background: url(http://6600.es/images/pv7jdx8h6gn8l3t508.png)no-repeat !important;
background-position: 9px -170px !important;
}

li.user-Oficial {
background: url(http://6600.es/images/8jebig34bzqrorvnm1v.png)no-repeat !important;
background-position: 16px -38px !important;
}

li.user-Moderador {
background: url(http://6600.es/images/7h5nnps3mli1wulmao1t.png)no-repeat !important;
background-position: 5px 12px !important;
}

span.role strong {
margin-left: 10px !important;
color: #325252 !important;
}

li.user-Elite span {
margin-left: 10px !important;
}

ul.tabs.clearfix li a {
color: #3d3d3d !important;
}

a.hovercard {
color: #000000 !important;
}

div.link-data h2 a {
color: #454545 !important;
}

div.activity-content p a {
color: #3d3d3d !important;
}

i.icon.mac {
background: url(http://k39.kn3.net/5B4AECB43.png) !important;
}

i.icon.imagenes {
background: url(http://k38.kn3.net/41189113D.png) !important;
}

i.icon.downloads {
background: url(http://k43.kn3.net/6D6365ADD.png) !important;
}

i.icon.offtopic {
background: url(http://k38.kn3.net/CEE8143C9.png) !important;
}

i.icon.taringa {
background: url(http://k41.kn3.net/043269437.png) !important;
}

i.icon.videos {
background: url(http://k41.kn3.net/BB7211266.png) !important;
}

i.icon.musica {
background: url(http://k41.kn3.net/A4F575AB7.png) !important;
}

i.icon.noticias {
background: url(http://k45.kn3.net/84FE4732A.png) !important;
}

i.icon.autos-motos {
background: url(http://k43.kn3.net/7465748A4.png) !important;
}

i.icon.arte {
background: url(http://k40.kn3.net/11B184334.png) !important;
}

i.icon.info {
background: url(http://k45.kn3.net/3C2FC2293.png) !important;
}

i.icon.celulares {
background: url(http://k43.kn3.net/6CE18301D.png) !important;
}

i.icon.solidaridad {
background: url(http://k44.kn3.net/F3A7A23EF.png) !important;
}

i.icon.femme {
background: url(http://k41.kn3.net/0CDA6352F.png) !important;
}

i.icon.deportes {
background: url(http://k42.kn3.net/43BC66D69.png) !important;
}

i.icon.ciencia-educacion {
background: url(http://k41.kn3.net/DBA67B3C9.png) !important;
}

i.icon.mascotas {
background: url(http://k38.kn3.net/AFC6C7626.png) !important;
}

i.icon.salud-bienestar {
background: url(http://k43.kn3.net/C7EA6D2EF.png) !important;
}

i.icon.juegos {
background: url(http://k37.kn3.net/29B0422BC.png) !important;
}

i.icon.hazlo-tu-mismo {
background: url(http://k45.kn3.net/749EF509C.png) !important;
}

i.icon.humor {
background: url(http://k44.kn3.net/0A01051C9.png) !important;
}

i.icon.turismo {
background: url(http://k44.kn3.net/CE00BA50C.png) !important;
}

i.icon.apuntes-y-monografias {
background: url(http://k37.kn3.net/3DC1AE582.png) !important;
}

i.icon.juegos-online {
background: url(http://k39.kn3.net/08A93D1A0.png) !important;
}

i.icon.recetas-y-cocina {
background: url(http://k39.kn3.net/B99C0F224.png) !important;
}

i.icon.ecologia {
background: url(http://k40.kn3.net/34EBD751E.png) !important;
}

i.icon.tv-peliculas-series {
background: url(http://k43.kn3.net/B47BC8075.png) !important;
}

i.icon.sticky {
background: url(http://k45.kn3.net/29418B121.png) !important;
}

span.nickname {
font-weight: bold !important;
color: #6d6d6e !important;
}

div.perfil-data.clearfix {
}

i.icon.male {
background: url(http://k42.kn3.net/2C6CCF989.png) !important;
}

i.icon.info-p {
background: url(http://k44.kn3.net/FE7412C63.png) !important;
}

i.icon.sprite-follow {
background: url(http://k38.kn3.net/0A05A895B.png) !important;
}

i.icon.followers {
background: url(http://k42.kn3.net/D3F300626.png) !important;
padding: 0;
}

i.icon.comunidades-p {
background: url(http://k41.kn3.net/A672546DD.png) !important;
}

i.icon.actividad {
background: url(http://k45.kn3.net/58D5FC605.png) !important;
}

i.icon.sprite-block {
background: url(http://k39.kn3.net/CBA5B79DF.png) !important;
}

i.icon.sprite-document-text-image {
background: url(http://k39.kn3.net/F0F02F88A.png) !important;
}

i.icon.mi {
background: url(http://k41.kn3.net/ECD9CFBE2.png) !important;
}

i.icon.sprite-balloon-left-blue {
background: url(http://k42.kn3.net/41EC9A133.png) !important;
}

i.icon.sprite-balloon-left {
background: url(http://k42.kn3.net/C08DD4265.png) !important;
}

i.icon.comentarios-n {
background: url(http://k42.kn3.net/C08DD4265.png) !important;
}

i.icon.comentarios-n-g {
background: url(http://k37.kn3.net/A01423525.png) !important;
}

a.tw-shout.hastipsy {
background: url(http://k37.kn3.net/9E803CFC1.png) !important;
}

a.face-shout.hastipsy {
background: url(http://k42.kn3.net/5C2CA3DC1.png) !important;
}

i.icon.sprite-balloon-left-green {
background: url(http://k37.kn3.net/A01423525.png) !important;
}

i.icon.music {
background: url(http://k38.kn3.net/F2FBCDD8B.png) !important;
}
[/color]







Codigo Logo


Este código es para cambiar el logo por uno que ustedes hayan hecho

#logo {
width: 210px !important;
height: 50px !important;
display: block !important;
float: left !important;
background: url(Aqui el link de la imagen) no-repeat top left transparent !important;
margin-left: 20px !important;
}








y si quieren este efecto



solo copien y peguen lo siguiente


#logo {
width: 210px !important;
height: 50px !important;
display: block !important;
float: left !important;
background: url(http://k44.kn3.net/23E408BEE.png) no-repeat top left transparent !important;
margin-left: 20px !important;
-webkit-transition-duration: 0.5s !important;
transition-duration: .05s !important;
}

#logo:hover {
background-position: 0px -53px !important;
margin-left: 20px !important;
-moz-transition-duration: .5s !important;
-webkit-transition-duration: .5s !important;
transition-duration: .5s !important;
}








Codigo Ribbon


Este código es para cambiar el listón, donde están los botones para compartir los post y temas

.post-share-bottom {
padding: 5px 35px 10px 1px;
margin-bottom: 10px;
background: url(Aquí va el link de la imagen) no-repeat bottom right;
}





↓↓↓↓↓↓ SIN EL CÓDIGO ↓↓↓↓↓↓

Pueden tomar esta imagen y cambiarle el color, para ponerla en sus skins, así como yo le hice con mis skins







↓↓↓↓↓↓ CON EL CÓDIGO ↓↓↓↓↓↓















Bueno, aqui termina mi post, estos codigos son los mas basicos, luego actualizare el post, y pondre mas cosas.








Si quieren códigos de colores, aquí les dejo paginas donde podrán sacarlos fácilmente





CSS COLOR CHART




HTML COLOR PICKER