Taringa 2021 BETA 3 [Firefox | Chrome]
Taringa 2021 es un theme para Taringa que hice yo mismo. Funciona en Chrome y en Firefox con la extensión Stylebot en Chrome y Stylish en Firefox.
Cambios en esta versión
Reparado el bug en donde el botón TOPs estaba abajo.
Se redondearon los avatares, se les puso un borde transparente, y se les dió una sombra.
Al estar desactualizada tu versión de Taringa 2021, cambiará el header avisándote.
Solucionados otros bugs menores.
Capturas (Click para ver más grande)
La barra es más chica y le da vida a Taringa con su fondo.
El menú del usuario está sobre la barra.
Nuevos bordes en los avatares en toda Taringa.
Cada día, con sólo recargar la página (F5) en Taringa, tendremos un nuevo fondo en el header. Puede ser un paisaje, una textura, o un diseño.
Si nuestra versión de Taringa 2021 está desactualizada, el header nos avisará.
¡Muy bueno! ¿Cómo lo instalo?
Chrome:
1) Instalar Stylebot. Desde este
2) Vamos a Taringa y apretamos el botón 'css'
3) Apretamos el botón 'Edit CSS' y pegamos esto:
#compose-navitem {
display: none;
}
#favorites-box {
left: 96px;
top: 44px;
}
#footer {
position: relative;
top: 12px;
}
#header {
background: url(http://brianvalente.com.ar/taringa2021/taringa-beta3.jpg) top center;
border: none;
height: 50px;
left: 0;
margin: auto;
position: fixed;
right: 0;
z-index: 10000;
}
#logo {
-webkit-transform: scale(.5);
background: url(http://k41.kn3.net/D166A3D54.png)
;
left: -40px;
position: relative;
width: 186px;
}
#main {
position: relative;
top: 50px;
}
#mensajes-box {
left: 91px;
top: 44px;
}
#nav {
background: none;
left: -340px;
margin: auto;
position: fixed;
right: 0;
top: 5px;
width: 420px;
z-index: 10000;
}
#nav .floatR {
display: none;
}
ul.floatL {
width: 472px;
}
ul.floatL a {
-webkit-transition: background .1s, border-radius .1s;
background: none;
color: rgb(230,230,230);
}
ul.floatL a:hover, ul.floatL .active a {
background: rgba(200,200,200,.4);
border-radius: 40px;
text-decoration: none;
}
#nav .wrapper {
width: 470px;
}
#notifications-box {
left: 86px;
top: 44px;
}
#search {
display: none;
}
.active#menu-section-mi .home {
background-position: -152px -119px;
}
.avatar img {
border: solid 5px rgba(200,200,200,.1);
border-radius: 100px;
box-shadow: black 0 0 5px;
height: 40px;
position: relative;
width: 40px;
}
.avatar-32 {
border: solid 5px rgba(255,255,255,.8);
border-radius: 100px;
box-shadow: black 0 0 5px;
height: 27px;
position: relative;
width: 27px;
}
.avatar-48 {
border: solid 5px rgba(255,255,255,.8);
border-radius: 100px;
box-shadow: black 0 0 5px;
height: 43px;
position: relative;
width: 43px;
}
.min-avatar, .comment-data {
background: rgba(0,0,0,.0);
border: none;
border-radius: none;
box-shadow: none;
height: 43px;
width: 43px;
position: relative;
bottom: 3px;
left: -3px
;
}
.navbar {
left: 370px;
position: relative;
top: 10px;
z-index: 10000;
}
.navbar .navitem.active, .navbar .navitem.active:hover {
background: rgba(180,180,180,.4);
border-radius: 40px;
cursor: pointer;
}
.navbar .navitem.nohide:hover {
background: rgba(200,200,200,.4);
border-radius: 40px;
cursor: pointer;
}
.navbar .navitem:hover {
background: rgba(200,200,200,.4) ;
border-radius: 40px;
cursor: pointer;
}
.navitem {
-webkit-transition: background .1s, border-radius .1s;
margin-left: 5px;
}
.navitem .nick {
display: none;
}
.navitem, .navbar, .navitem:hover, .navitem.active, .navitem.active:hover, .useritem.hover {
background: none;
border: none;
border-radius: none;
}
.navitem.useritem div a {
margin: none;
padding: none;
}
.navitem.useritem div a img.avatar {
border-radius: 100px;
}
.navitem.useritem ul {
background: none;
border-radius: 3px;
left: -245px;
list-style-type: none;
position: absolute;
top: 0px;
width: 250px;
}
.navitem.useritem ul li {
-webkit-transition: background .1s, border-radius .1s;
background: none;
border: none;
border-radius: 40px;
float: left;
margin-left: 10px;
padding: 6px 12px 6px 12px;
}
.navitem.useritem ul li:hover {
background: rgba(200,200,200,.4);
border-radius: 40px;
text-decoration: none;
}
.navitem.useritem ul:hover ~ .navbar {
background: red;
}
.navitem.useritem.hover div {
background: rgba(200,200,200,.4);
border: none;
border-radius: 40px;
}
.photo, .big-avatar {
border: solid 5px rgba(200,200,200,.1);
border-radius: 100px;
box-shadow: black 0 0 5px;
height: 100px;
position: relative;
width: 100px;
}
.useritem {
left: 230px;
position: relative;
}
.useritem ul {
position: absolute;
width: 152px;
}
Nos quedará algo así:
4) Apretamos 'Save' ¡Y listo!
Ya podemos disfrutar de Taringa 2021 en nuestro Chrome.
Firefox:
1) Instalamos Stylish, vamos al Administrador de Complementos, y a la pestaña Estilos de Usuario:
2) Apretamos Añadir nuevo estilo y nos aparecerá esto:
Ponemos:
Nombre: Taringa 2021 BETA 3 by electrocrookers
En el código:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("taringa.net")
{
#compose-navitem {
display: none !important;
}
#favorites-box {
left: 96px !important;
top: 44px !important;
}
#footer {
position: relative !important;
top: 12px !important;
}
#header {
background: url(http://brianvalente.com.ar/taringa2021/taringa-beta3.jpg) top center !important;
border: none !important;
height: 50px !important;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
z-index: 10000 !important;
}
#logo {
-moz-transform: scale(.5) !important;
background: url(http://k41.kn3.net/D166A3D54.png) !important;
left: -40px !important;
position: relative !important;
width: 186px !important;
}
#main {
position: relative !important;
top: 50px !important;
}
#mensajes-box {
left: 91px !important;
top: 44px !important;
}
#nav {
background: none !important;
left: -340px !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 5px !important;
width: 420px !important;
z-index: 10000 !important;
}
#nav .floatR {
display: none !important;
}
ul.floatL {
width: 472px !important;
}
ul.floatL a {
-moz-transition: background .1s, border-radius .1s !important;
background: none !important;
color: rgb(230,230,230) !important;
}
ul.floatL a:hover, ul.floatL .active a {
background: rgba(200,200,200,.4) !important;
border-radius: 40px !important;
text-decoration: none !important;
}
#nav .wrapper {
width: 470px !important;
}
#notifications-box {
left: 86px !important;
top: 44px !important;
}
#search {
display: none !important;
}
.active#menu-section-mi .home {
background-position: -152px -119px !important;
}
.avatar img {
border: solid 5px rgba(200,200,200,.1) !important;
border-radius: 100px !important;
box-shadow: black 0 0 5px !important;
height: 40px !important;
position: relative !important;
width: 40px !important;
}
.avatar-32 {
border: solid 5px rgba(255,255,255,.8) !important;
border-radius: 100px !important;
box-shadow: black 0 0 5px !important;
height: 27px !important;
position: relative !important;
width: 27px !important;
}
.avatar-48 {
border: solid 5px rgba(255,255,255,.8) !important;
border-radius: 100px !important;
box-shadow: black 0 0 5px !important;
height: 43px !important;
position: relative !important;
width: 43px !important;
}
.min-avatar, .comment-data {
background: rgba(0,0,0,.0) !important;
border: none !important;
border-radius: none !important;
box-shadow: none !important;
height: 43px !important;
width: 43px !important;
position: relative !important;
bottom: 3px !important;
left: -3px !important;
}
.navbar {
left: 370px !important;
position: relative !important;
top: 10px !important;
z-index: 10000 !important;
}
.navbar .navitem.active, .navbar .navitem.active:hover {
background: rgba(180,180,180,.4) !important;
border-radius: 40px !important;
cursor: pointer !important;
}
.navbar .navitem.nohide:hover {
background: rgba(200,200,200,.4) !important;
border-radius: 40px !important;
cursor: pointer !important;
}
.navbar .navitem:hover {
background: rgba(200,200,200,.4) !important;
border-radius: 40px !important;
cursor: pointer !important;
}
.navitem {
-moz-transition: background .1s, border-radius .1s !important;
margin-left: 5px !important;
}
.navitem .nick {
display: none !important;
}
.navitem, .navbar, .navitem:hover, .navitem.active, .navitem.active:hover, .useritem.hover {
background: none !important;
border: none !important;
border-radius: none !important;
}
.navitem.useritem div a {
margin: none !important;
padding: none !important;
}
.navitem.useritem div a img.avatar {
border-radius: 100px !important;
}
.navitem.useritem ul {
background: none !important;
border-radius: 3px !important;
left: -245px !important;
list-style-type: none !important;
position: absolute !important;
top: 0px !important;
width: 250px !important;
}
.navitem.useritem ul li {
-moz-transition: background .1s, border-radius .1s !important;
background: none !important;
border: none !important;
border-radius: 40px !important;
float: left !important;
margin-left: 10px !important;
padding: 6px 12px 6px 12px !important;
}
.navitem.useritem ul li:hover {
background: rgba(200,200,200,.4) !important;
border-radius: 40px !important;
text-decoration: none !important;
}
.navitem.useritem ul:hover ~ .navbar {
background: red !important;
}
.navitem.useritem.hover div {
background: rgba(200,200,200,.4) !important;
border: none !important;
border-radius: 40px !important;
}
.photo, .big-avatar {
border: solid 5px rgba(200,200,200,.1) !important;
border-radius: 100px !important;
box-shadow: black 0 0 5px !important;
height: 100px !important;
position: relative !important;
width: 100px !important;
}
.useritem {
left: 230px !important;
position: relative !important;
}
.useritem ul {
position: absolute !important;
width: 152px !important;
}
}
3) Guardamos, vamos a Taringa, y ¡A disfrutar!
¡Y eso es todo! ¿Te gustó el theme? ¡Compartilo en Taringa! Seguro que a muchos más les gustará el tema y lo pondrán en su PC.
Si encontrás algún bug o querés sugerir algo comentalo o mandame un MP, se los voy a agradecer
¡Para estar al tanto de las actualizaciones de Taringa 2021 seguime!
¡Adiós!