Como personalizar Taringa a tu estilo + como ponerlo

1. Empezaremos con lo mas básico el logo y header. #header #header { background: url(aqui el link de la imagen puede ser cualquier formato mientras sea formato imagen si es una imagen gif se movera); } #logo #logo { background: url(aqui el link del logo que quieren si puede ser .png les quedara mejor) no-repeat top 2.bueno aquí a cambiar el color de fondo el básico si lo quieres mas dedicado a cada esquina un color búscate la vida. dijo:dijo:en la parte que dice: dijo:dijo:background: white url(mainbg.gif) 331px 0 repeat-y; (donde pone white allí ponen el color que quieren y ese sera el de fondo pero de donde sacan los codigos para el color http://html-color-codes.info/codigos-de-colores-hexadecimales/ cuando tengan el codigo ejemplo #ccc tienen que substituirlo por lo que pone white) Este es el del mi y el del perfil #main { width: 1000px; margin: 0 auto; border-right: 1px solid #CCC; border-left: 1px solid #CCC; background: white url(mainbg.gif) 331px 0 repeat-y; overflow: hidden; }[ Este es el de Inicio , Novatos , Destacados , Crear post , Historial. dijo:como arriba solo cambiar el white por el que quieras #main.homes { background: white url(mainbg.gif) 10px 0 repeat-y!important; } 3.Color del nav y los botones #nav { background: url(aqui link de la imagen que quieres) repeat-x top left; } En este caso a cambiar el color de de los botones de incio y todo eso... dijo:dijo:donde pone : dijo:dijo:color: white;dijo:dijo:es el color de la letra simple cambian el white por el color que quieran dijo:dijo:donde pone : dijo:dijo:background: black; dijo:dijo:es alrededor ese color azul mas fuerte i lo cambian por el color que quieran si escribe transparent desaparecera el color de fondo azul fuerte #nav ul li a { color: white; background: black; dijo:dijo:este es cuando el boton esta clikado importante tienen que ponerlo inverso ejemplo si arriba esta puesto #nav ul li.active a { background: white; } /quote]dijo:tendran que cambiar le la combinacion emes de white black sera white así #nav ul li.active a { background: white; } dijo:dijo:quedara algo asi #nav ul li a { background: black; color: white ; } #nav ul li.active a { background: white; } 4.En este caso a como cambiar el color del menu. dijo:dijo:dijo:Tienen que cambiar donde pone: dijo:dijo:dijo:background: #012343 url(menubg.gif) repeat-x bottom left; en la parte que ponedijo:dijo:#012343 dijo:dijo:lo cambian por el color que quieran #menu { padding: 8px; background: #012343 url(menubg.gif) repeat-x bottom left; border-bottom: 1px solid red; } 5.imagen en la barra de notificaciones. si se dan cuenta esta redondeado. dijo:dijo:dijo:el código ya viene con el redondeo pero si quieren modificarlo vayan cambiando los números y verán los cambios de redondeo y sombra. img.avatar { border-radius: 190px; box-shadow: 0px 4px 12px rgba(1,1,1,1.5); width: 30px; height: 30px; margin-top: -4px; } 5. redondeo de imagen de perfil dijo:dijo:dijo:El código os lo dejo ya con el redondeo para modificar solo cambien los números. div.perfil-avatar a img { border-radius: 30px; } --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- De momento ya les enseño lo mas básico y sencillo de modificar en taringa ahora viene algo que necesita mucha mas dedicación y sobretodo photoshop o imágenes google depende si lo quieres crear tu o simplemente una imagen google.(recomiendo simplemente modificarlo y sobretodo que la imagen sea .png) os preguntáis que es lo que os enseño ahora pues ahora les enseña a cambiar los iconos de taringa por modificaciones que hicierais vosotros o iconos vuestros. 1.iconos vereis los cambios en la imagenes (los iconos los podreis modificar a vuestro gusto mejor photoshop) dijo:dijo:dijo:icono 1 i.icon.compose.hastipsy { background: url(http://k22.kn3.net/17B440B6A.png); } dijo:dijo:dijo:icono 2 i.icon.quote:hover { background: url(http://k17.kn3.net/A98126362.png) ; } dijo:dijo:dijo:icono3 i.icon.block:hover { background: url(http://k19.kn3.net/8D826AEB0.png); } dijo:dijo:icono4 i.icon.delete:hover { background: url(http://k23.kn3.net/D6B9360D1.png); } dijo:dijo:dijo:icono5 i.icon.refresh:hover { background: url(http://k25.kn3.net/EC4C1662A.png) ; } i.icon.refresh { background: url(http://k07.kn3.net/817388019.png); } dijo:dijo:dijo:icono6 i.icon.mi { background: url(http://k04.kn3.net/701775573.png); } dijo:dijo:icono7 i.icon.info-p { background: url(http://pimg.cixx6.com/v6/information-balloon.png); } dijo:dijo:icono8 #scroll-up { background: url(http://k12.kn3.net/9ADD74265.png); opacity: 0.75; border-radius: 32px; box-shadow: 0px -6px 5px rgba(0,0,0,0.2); } dijo:dijo:icono9 dijo:dijo:esto se añade tambien a favoritos i mensages div.modal-wrapper.rounded h3 { background: url(http://k05.kn3.net/DEBED439E.png); border: 0px solid transparent; padding-left: 64px; font-weight: bold; text-transform: uppercase; color: #8a8a8a; font-size: 13px; border-radius: 5px; } dijo:icono10 div.number-share-t { background: url(http://k19.kn3.net/8DD1C1AFA.png) no-repeat center; margin-top: -4px; line-height: 30px; } a.require-login.share-t { background: url(http://k04.kn3.net/5A607778B.png) no-repeat center; height: 24px; margin-left: 1px; } ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Como ponerlo. 1.Primero instalar esta extensión para google chrome. https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha Para firefox. https://addons.mozilla.org/en-US/firefox/addon/stylish/ 2.Una vez instalado ban a taringa le clikan al botón derecho del ratón y les saldrá algo así. 3.Se les desplegara y le dan a la opción que dice Style element. 4.una vez clikado se les abre una ventana y le clikan donde indikan las flechas 5.copian los códigos los pegan en lo que esta en blanco y lo modifican a su gusto.