El post que buscas se encuentra eliminado, pero este también te puede interesar

Cambia el aspecto de Taringa como quieras!

Cambia el aspecto de Taringa como quieras!

Hola gente de T!, hoy vengo con un post enseñandoles a modificar el estilo de taringa de la forma QUE QUIERAN!
Si si, como oyeron, podran cambiarle el fondo, los colores de los menus , y más.

Te gustaria tener Taringa asi?

diseño

O asi ?

Programacion

Sin mas que decir , comenzemos !

html


color


Esto de cambiarle los estilos a taringa puede utilizarse tanto en Mozilla Firefox como en Gooogle Chrome. NO funciona a partir de firefox 5 ni taringa v5

edicion

1. Primero que nada, deben descargarse el Stylish: Stylish es una aplicacion para cambiarle el estilo a las paginas que vos quieras, siempre y cuando halla un estilo disponible a instalar.

El Stylish pueden descargarlo de aca:

codigos Para Mozilla Firefox: https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=external-userstyleshome
cambiar Para Google Chrome: https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe

Simplemente entran a esos link segun el navegador que usen, y clickean en "Add to Firefox" (Firefox) o en "Instalar" (Chrome)
Una ves hecho eso ya tendran el Stylish instalado en su navegador.

aspecto

2. Ahora podran poner el estilo que les guste a la pagina que quieran. Para conseguir un estilo y aplicarlo, deben entrar aca:

http://userstyles.org/styles/browse

Dentro de esa pagina, a la izquierda hay un buscador, ahi ingresan el nombre de la pagina que les gustaria cambiar y luego les apareceran diversos estilos, (apareceran más segun sea la pagina mas conocida o no) eligen el que les gusta y clickean en "Install with Stylish"

[ Yo les recomiendo estos, para las paginas mas usadas ] :
Facebook: "Facebook - Dark Static, transparency" http://userstyles.org/styles/19620/facebook-dark-static-transparency

YouTube: "Youtube Dark (2011 Redesign)[Cosmic Panda Support]" http://userstyles.org/styles/26923/youtube-dark-2011-redesign-cosmic-panda-support

Google: "Perfect Dark Google (complete rework)" http://userstyles.org/styles/browse?search_terms=Perfect+Dark+Google+%28complete+rework%29

taringa

3. Ahora vamos a lo que nos interesa: Taringa!
El estilo que yo use para empezar a modificar Taringa, es este:

Taringa! Dark-Se7en : http://userstyles.org/styles/43352/taringa-dark-se7en

(obviamente hay muchos mas para elegir si quieren, pero yo me base en ese)
Pero, que paso?, lo instalo y se ve que las imagenes que usaron para hacer ese estilo, o las borraron o cayeron, entonces no se ve como como la imagen de ejemplo lo muestra.

Osea que si instalan ese se veria asi :

de

Y a mi mucho no me gusto xD

el

4. Para modificar ese mismo estilo:

En caso de Firefox: ir al menu > Herramientas > COMPLEMENTOS.
En las solapas de la izquierda, les tendra que aparecer "Estilos de usuario" con el icono de Stylish (si instalaron todo bien), entran ahi y tendra que aparecerles el estilo de Taringa! Dark-Se7en, y en sus opciones (a la derecha) clickean en EDITAR

la

Les aparecerá otra ventana con codigos HTML

photoshop

En el caso de Chrome, una ves instalado el Stylish les aparecera un icono con una "S" arriba al la derecha de la barra de navegacion. Entran a taringa, clickean en esa "S" y clickean en la opcion EDITAR .

Que

forma

Al igual que firefox les aparecerá otra ventana con codigos HTML

quiera En ambos es lo mismo, solo que tienen formas diferentes de llegar hasta ahi. Lo voy a mostrar en la ventana de firefox, pero esa ventana contiene lo mismo que la de chrome, los mismos colores, todo.

Cambia el aspecto de Taringa como quieras!

5. Ahora viene lo mas dificil, que es entender que modifica de la pagina cada codigo que dice ahi.

Para modificar el fondo:

diseño

Deben reemplazar el link que marque en la imagen por ell URL de la imagen que ustedes quieran poner de fondo [les recomiendo que para que se vea bien, sea una imagen segun el tamaño de tu monitor, osea que si tenes un monitor chico, una imagen que ocupe mas o menos las dimensiones de tu monitor, y si tenes monitor grande, una imagen bastaaante grande porque sino la imagen se repite y a menos que sea una imagen continua (las que el dibujo se continua a pesar de qe sean varias imagenes juntas) te va a quedar cortado y no queda muy bien].

Si no tienen URL de la imagen porque la tienen guardada en su PC, deberan subirla a algun host de imagenes.
(yo particularmente me cree un blog , subo las imagenes ahi y despues uso el link de esas imagenes, es la forma que mejor me sirvio hasta ahora)

Programacion

7. Para modificar el COLOR del fondo de la parte superior de T!

Tienen que guardar estas imagenes :

PRIMERA IMAGEN :

html
link : http://3.bp.blogspot.com/-lSFDIki1Nm0/TiJfAZlq3lI/AAAAAAAAAGI/q7VK8cWGPCU/s1600/T-skin-grey-2.png

SEGUNDA IMAGEN:

color
link: http://2.bp.blogspot.com/-nb3TOhBAWco/TiJc_6wVVRI/AAAAAAAAAF8/6XnSfgVQmfs/s1600/T-skin-grey-3.png

Pueden dejarlas como estan (les quedara T! en negro) o pueden editarlas con algun programa de edicion (recomiendio Photoshop) y ponerles el color que mas les guste.

edicion Notaran que la primer imagen tiene un degrade de gris a negro, bueno eso lo que hace es que la parte superior de T! tenga un brillo/reflejo que hara que parezca mas profesional o con relieve. Si la van a editar con otro color y QUIEREN TENER ese degrade, deben utilizar la herramienta "HERRAMIENTA DEGRADADO" (de PHOTOSHOP) y los dos colores que quieren que tenga el degrade.
En el caso de que no les importe el degrade, simplemente pueden usar Paint o cualquier programa de edicion y pintan todo del mismo color.(de esta manera no tendra el reflejo)

codigos La segunda lo que hace es darle los BORDES REDONDOS a la parte superior de taringa, para que no quede como un cuadrado. (esa imagen si quieren pueden no utilizarla, ya que no es esencial en los colores que le pongan a T! sino que solo agrega ese efecto de los bordes redondos).

cambiar

Deben reemplazar el LINK del cuadrado ROJO por el LINK de la PRIMERA IMAGEN (si editaron la imagen la tienen que subir ustedes a un host, sino pueden usar la del ejemplo que les di) y reemplazar el LINK del cuadrado AZUL por el LINK de la SEGUNDA IMAGEN.

Tiene que quedarles asi:
Segun el fondo y los colores que pusieron, si seguimos el ejemplo del principio:

aspecto

taringa

8. Bien, como hicimos recien, hay cosas que se modifican mediante links de imagenes, pero otras mediante codigos de color, (ej #000000= negro, #ffffff = blanco, etc)
Para saber el codigo de cada color entran aca: http://www.usuarios.sion.com/pauluk/coloreshtml.htm, o bien pueden buscar en google "tabla de codigos de colores" que hay muchisimas.

Para modificar el color de fondo de taringa (para que entiendan, las "lineas negras" a los costados de la pagina)

de

Deben reemplazar el codigo marcado en la imagen por el codigo del color que quieran.

el

9.

la

photoshop El codigo marcado con azul representa el color que tendra el fondo del submenu de taringa, el que dice inicio, novatos, destacados, etc.

Que El codigo marcado con rojo representa una minima linea de un color que hay debajo de cada titulo (Ultimos post, ultimos comentarios post destacados, etc.) que casi ni se ve, pero si la modifican por un color resaltante, notaran la diferencia.

forma El codigo marcado con verde representa el color de fondo que tienen los titulos (Ultimos post, ultimos comentarios post destacados, etc.)

quiera El codigo marcado con rosa representa el color de la letra de los titulos.

Cambia el aspecto de Taringa como quieras! El codigo marcado con celeste representa el color de la letra de "(ver mas) " en los titulos.

diseño

10. Para modificar el color del MENU de taringa (el que dice posts, comunidades, tops) deben guardar esta imagen:
Programacion
link : http://2.bp.blogspot.com/-cSn4XtEHKgk/TiPJLtBq03I/AAAAAAAAAHk/cuvGnQE8zeo/s1600/logueado.gif

y al igual que como hicimos antes, se le modifica el color utilizando la "herramienta degradado" de photoshop, o pintarla todo de un mismo color con cualqier programa de edicion.
Si la modifican, deben subirla a un host y colocar el link en reemplazo del marcado en la imagen :

html

color

11.

edicion

codigos El codigo marcado con rojo representa el color de los botones del submenu (inicio, novatos , destacados, etc.)

cambiar El codigo marcado con azul representa el color que tendran los botones del submenu, al pasar el mouse por encima.

aspecto El codigo marcado con verde representa el color que tiene el boton del submenu al estar posicionado en el. (es dificil de explicar, para saber cual es prueben cualquier color y se van a dar cuenta de que hablo )

taringa

12.

de

el El codigo marcado con rojo representa el color de la letra de "Categorias:"

la El codigo marcado con azul representa el color del recuadro del buscador.

photoshop El codigo marcado con verde representa el color de la solapa de web, posts, comunidades y empleos, del buscador.

Que El codigo marcado con rosa representa el color de una pequeña linea que hay debajo de las solapas mencionadas anteriormente.

forma


Bueno con esto termino de explicar para que sirve cada cosa, para asi lo pueden modificar a su gusto

Si no tienen ganas de leerse todo el post, y directamente quieren el ejemplo mostrado al principio deben directamente borrar TODO lo que aparece en la ventana donde modificaron los codigos, reemplazandolo por el estilo que cree yo :

1. Taringa negro


@-moz-document domain('taringa.net')

{

body {
background: url('http://3.bp.blogspot.com/-UgGGt6hClf4/TiJ7uD9jj3I/AAAAAAAAAG8/ZHYObzbY0EU/s1600/fondo+rayado2.jpg') !important;}


#maincontainer{background: url('http://3.bp.blogspot.com/-lSFDIki1Nm0/TiJfAZlq3lI/AAAAAAAAAGI/q7VK8cWGPCU/s1600/T-skin-grey-2.png') #000000 repeat-x !important;}
.rtop,.rbott {background: url('http://2.bp.blogspot.com/-nb3TOhBAWco/TiJc_6wVVRI/AAAAAAAAAF8/6XnSfgVQmfs/s1600/T-skin-grey-3.png') !important;}


.subMenu{background:#333333 url() !important;}
.box_title{background:#444444 url() !important;border-bottom:2px solid #333;;}
.box_txt,.box_rss{background: url() !important;color:#ffffff !important}
.box_txt a {background: url() !important;color:#999999 !important}

/****** Bordes Redondos ******/

.rtop,.rbott {
width:984px;
display:block;
margin:0 auto;
background: url('../rtopbg.gif') no-repeat left top;
height: 13px;
}

.rtop_content{
padding:0px 5px;
background:#0a67e6;
}

.rbott
{
background-position: bottom left!important;
}

.rbott *, .rbott * {
display:block;
height:1px;
overflow:hidden;
background:#0a67e6;
display:none;
}

.rbott_content{
padding:0px 5px;
background:#0a67e6;
}



#menu .clearBoth
{
background: url('http://o2.t26.net/images/bgLogged.gif')!important;}



.search-body
{

background:# url() !important;

}

.tabsMenu li {
background:#555555 url() !important;

}

.tabsMenu li:hover {
background: #999999 url() !important;

}

.tabsMenu li.here a {
background: #ffffff url() !important;

}


#tabbedPosts.here a {
background: url('http://www.skynetz.cz.cc/images/menu_left_corner_here.gif') no-repeat !important;

}

#tabbedPosts.here {
background: url('http://www.skynetz.cz.cc/images/bgTabbedHere.png') !important;

}

.filterCat span {

color:#cccccc !important;

}

.search-body {
background:#444444 url() !important;}

}

.posts-tab.selected a, .web-tab.selected a, .comunidades-tab.selected a, .empleos-tab.selected a {
background:#444444 url() !important;
border-bottom: 2px solid #444444!important;
}

.m-left {
background: url('http://***/images/movi-left.gif') !important;
}
.m-right {
background: url('http://***/images/movi-right.gif') !important;
}
.compartir-mov {
background: url('http://***/images/movistar-compartir.gif') bottom left repeat-x transparent !important;
padding-bottom:8px;
position: relative;
}


@-moz-document domain('buscar.taringa.net')
{

body {
background: url('') !important;}

}


2. Taringa para las chicas (rosa)

@-moz-document domain('taringa.net')

{

body {
background: url('http://4.bp.blogspot.com/-2tcEjGOyvuQ/TiJ0SQJfxsI/AAAAAAAAAGs/ZQHL7R_f4a0/s1600/fondo+rosa2.jpg') !important;}


#maincontainer{background: url('http://i197.photobucket.com/albums/aa70/gosht_/taringa/T-skin-grey-2.png') #4a4a4a repeat-x !important;}
.rtop,.rbott {background: url('http://i197.photobucket.com/albums/aa70/gosht_/taringa/T-skin-grey-3.png') !important;}

.subMenu{background:#333333() !important;}
.box_title{background:#663366 url() !important;border-bottom:2px solid #333 ;;}
.box_txt,.box_rss{background: url() !important;color:#ffffff !important}
.box_txt a {background: url() !important;color:#663366 !important}

/****** Bordes Redondos ******/

.rtop,.rbott {
width:984px;
display:block;
margin:0 auto;
background: url('../rtopbg.gif') no-repeat left top;
height: 13px;
}

.rtop_content{
padding:0px 5px;
background:#0a67e6;
}

.rbott
{
background-position: bottom left !important;
}

.rbott *, .rbott * {
display:block;
height:1px;
overflow:hidden;
background:#0a67e6;
display:none;
}

.rbott_content{
padding:0px 5px;
background:#0a67e6;
}

#menu .clearBoth
{
background: url('http://o2.t26.net/images/bgLogged.gif') !important;


}

.search-body
{

background:# url() !important;

}

.tabsMenu li {
background:#663366 url() !important;

}

.tabsMenu li:hover {
background: #999999 url() !important;

}

.tabsMenu li.here a {
background: #ffffff url() !important;
}

#tabbedPosts.here a {
background: background: url('http://www.skynetz.cz.cc/images/menu_left_corner_here.gif') no-repeat !important
}

#tabbedPosts.here {
background: url('http://www.skynetz.cz.cc/images/bgTabbedHere.png') !important;

}

.filterCat span {

color: #cccccc !important;

}

.search-body {
background: #663366 url() !important;}

}

.posts-tab.selected a, .web-tab.selected a, .comunidades-tab.selected a, .empleos-tab.selected a {
background:#663366 url() !important;
border-bottom: 2px solid #663366!important;
}

.m-left {
background: url('http://***/images/movi-left.gif') !important;
}
.m-right {
background: url('http://***/images/movi-right.gif') !important;
}
.compartir-mov {
background: url('http://***/images/movistar-compartir.gif') bottom left repeat-x transparent !important;
padding-bottom:8px;
position: relative;
}

@-moz-document domain('buscar.taringa.net')
{

body {
background: url('') !important;}

}


EN AMBOS CASOS, PARA CHROME, DEBEN SACAR DONDE DIGA "@-moz-document domain('taringa.net')" / "@-moz-document domain('buscar.taringa.net')" porque eso es para firefox, sino no les funcionara correctamente.

quiera

POSIBLES ERRORES:

Es probable que si copian y pegan el taringa rosa que les di, el fondo del submenu siga viendose azul, para arreglarlo simplemente deben

Cambia el aspecto de Taringa como quieras!

reemplazar lo seleccionado en la imagen por esto:



.subMenu{background:#333333 url() !important;}
.box_title{background:#444444 url() !important;border-bottom:2px solid #333;;}
.box_txt,.box_rss{background: url() !important;color:#ffffff !important}
.box_txt a {background: url() !important;color:#999999 !important}


y volver a reemplazar los codigos de colores por los que quieren ustedes.


diseño


Otros ejemplos son:

Programacion

html

color

Queda muy bien, les recomiendo que lo prueben, parece dificil, pero una ves que le agarran la mano lo hacen mas rapido.

PD: Quiero aclarar que yo no se NADA de programacion ni de diseño, esto lo descubri queriendo cambiar taringa y probando cada codigo, cada link, todo. Asique si notan que algo esta mal dicho, mal explicado, si hay una forma mas facil de modificar algo, me avisan asi mejoro el post.

edicion

Bueno espero que les haya gustado, si tienen algun problema me avisan y me fijo si puedo solucionarlo.

Tambien si quieren me piden algun estilo que quieran. y trato de hacerlo.

Esto es todo

Saludos.

codigos


cambiar


Visiten a @Wolfcanine y @what_the_fuck , ambos tienen muy buenos post !

Les gusta bajar peliculas? todas en BluRay Full HD aca --- > Compilacion de peliculas Bluray Full HD [Mas de 60]
http://www.taringa.net/posts/tv-peliculas-series/11379221/Compilacion-de-peliculas-Bluray-Full-HD-_Mas-de-60_.html


Te gusta jugar shooters? Bajate el Left4Dead de aca! --- > Left 4 Dead 2 [MU-ME] + Online
http://www.taringa.net/posts/juegos/11712526/_PC_-Left-4-Dead-2-_RIP_MU-ME_-_-Online.html

Comentarios Destacados

29 comentarios - Cambia el aspecto de Taringa como quieras!

Ryukoo
jaja..ta bueno xD
luisrare -12
asta que porfin a taringa se le ocurre poner esa opcion que ya hacia bastante falta
xderbes +3
Este va para top
Cicroman533 +2
copadisimo chee! reco! lastima que se me acabaron mis puntos
Poiiioo -2
Not available for Firefox 6.0
Wolfcanine +1
+10 mañana Maga no les hagas caso a los comentarios idiotas de arriba
lonxh -2
Para que si solo lo veras tu
ZellKiller
ME SENTI PARADO EN UNA ESQUINA Y VI ACERCANDOSE UN GUACHIN HACIA MI Q ME DECIA EEH AMEWO NO TENE 10 PUNTO ? DAA AMEWO Q NO VA A TENER, PERDONA Q MOLESTEE
bassgustavo +1
Maguiee dijo:
bassgustavo dijo:Que Excelente, +10
gracias pero, los 10 donde estan? ajajaja

Eso me pasa por disparar sin balas, a la madrugada los habia dado.

(Peeero como podras ver sigo tu post para darte los +10 mañana).
bassgustavo
Cumplido.

(fijate si te interesa leer alguno de mis post, son bastante "particulares", [nunca se sabe])
mcfsaires
muy bueno segui tu guia y me salio Bàrbaro a fav +2 points y llegas a los 100