Cambia Taringa

Hola soy @boca_97 y en este post les quiero enseñar a modificar taringa con stylish en firefox, bueno no le voy a dar un estilo completo si no lo que voy hacer es enseñarles a que modifiquen taringa por si solos y no tengan que andar buscando un estilo por todos lados,bueno antes de empezar quiero decirles que cualquier comentario fuera de lugar va a ser borrado y dependiendo la gravedad borrado...ok empecemos con el css y html Bueno antes de empezar se tienen que instalar el stylish Por lo que tengo entendido hay un stylish para chrome pero no se si tiene las mismas "opciones" o si se maneja igual no uso chrome,ok una vez instalado vamos a "Complementos-Stylish-escribir nuevo estilo" bueno en nombre ponen los que se les cante yo voy a poner "Boca_97 - Taringa" y en el código que es donde dice "1" y es para escribir ahí vamos a poner lo siguiente les dije que no borren eso porque después si no, no van a poder modificar la pagina el código css va adentro de esas dos llaves principales Para crear el header de taringa lo que vamos a hacer es ir a taringa obviamente y sacar una captura de pantalla apretando la tecla ImprPant que generalmente se encuentra al lado del F12 cuando apretamos la tecla nos vamos al photoshop y apretamos CTRL+N y nos sale este mensaje y/o ventana Bueno después en el documento vamos a apretar CTRL+V para que se nos pegue la captura no va a quedar así... Con la herramienta recortar (es la que esta primer fila 3 lugar) (si lo tienen totalmente estirado es la 4 herramienta) seleccionamos el header: Ok una vez terminado obtendríamos esto Y lo editan como quieran hice que sacaran la captura hacia se guían,yo ya edite uno así que de ejemplo les voy a poner el mio actual Para poner el header de taringa vamos a poner id header llaves background y la dirección así: Obviamente voy a poner el header que hice y bueno ahora le damos a previsualizacion o guardar y si nos vamos a taringa el resultado es el siguiente: pero ustedes dirán Pelotud* de mierd* no cambio un caraj* bueno antes de que me caguen a puteadas les voy a decir porque no anda bueno no anda porque ya hay un header que es el default y el navegador lee ese header por eso vamos a añadir eso !important La función !important le indica al navegador que no le preste importancia al header default y que lea el header que acabamos de poner ahora les voy a mostrar como quedaría Le damos a previsualizacion o guardar y vamos a taringa y el resultado es este: Como ven ya cambio bueno Para editar el logo de taringa necesitamos una herramienta llamada firebug Una vez instalado vamos a hacer lo siguiente clic derecho sobre el logo - inspeccionar elemento Ahora nos va aparecer esto y al costado vamos a ver el css y el url lo copiamos así: Para acortarles el trabajo les voy a dar la url del logo que es esta http://o1.t26.net/img/logo.png Lo abren con photoshop y van a editarlo a gusto el mio es este Para recrear el logo de taringa pueden ingresar a este tutorial creado por el usuario @Rem_la25 http://www.taringa.net/Rem_la25/mi/RjGV Y en el documento vamos a poner id logo llaves y el codigo background pero en este caso vamos a hacer un experimento vamos a poner mas funciones el el logo ejemplo: que cuando pase el mouse sobre el logo me haga un giro así: el código seria el siguiente Bueno así pueden ir cambiando todo taringa "ejemplos" .reg-sb { background: url("link de la imagen") no-repeat scroll center 20px transparent !important; } tamaño de la imagen es de 227 x 227px a.face-shout { background: url("http://k37.kn3.net/6358DE513.png")!important; } a.tw-shout { background: url("http://content.pimp-my-profile.com/i68/5/4/13/f_a6d29ea707ed.png") !important; } .privacy-shout {background: url("http://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/icon_padlock.gif")no-repeat scroll 0 0 transparent !important;} Este hover es el de taringa música se que hay un script por ahí dando vueltas para hacer esto pero a mi no me funciono así que lo hice yo .avatar img { -moz-border-bottom-colors: none !important; -moz-border-image: none !important; -moz-border-left-colors: none !important; -moz-border-right-colors: none !important; -moz-border-top-colors: none !important; border-color: #D2D5D9 #D2D5D9 #989CA4 !important; border-radius: 4px 4px 4px 4px !important; border-style: solid !important; border-width: 1px !important; box-shadow: 0 1px 0 rgba(113, 117, 129, 0.2) !important; margin-bottom: 6px !important; } .avatar img:hover { -moz-border-bottom-colors: none !important; -moz-border-image: none !important; -moz-border-left-colors: none !important; -moz-border-right-colors: none !important; -moz-border-top-colors: none !important; background: none repeat scroll 0 0 #44A5E8 !important; border-color: #177BC0 #177BC0 #0F4D78 !important; border-style: solid !important; border-width: 1px !important; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.29), 0 1px 4px rgba(23, 148, 232, 0.81), 0 1px 0 #BBECF3 inset !important; } .btn.a { background: -moz-linear-gradient(center top , #52A8E8 0%, #377AD0 100%) repeat scroll 0 0 transparent; border-color: #4081AF #2E69A3 #20559A; color: #FFFFFF; text-shadow: 0 -1px 1px #3275BC; border-radius: 0px 10px 10px 10px !important; } #scroll-up { background: url("http://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/arrow-up.png") no-repeat scroll left top transparent !important; display: none; height: 48px !important; opacity: 0.5; position: fixed; right: 10px; top: 10px; width: 48px !important; } Y as puedo seguir posteando y posteando códigos pero quiero que ustedes investiguen por eso soy por finalizado este post espero que les guste