Taringa 2021 BETA 5 [Firefox | Chrome] (Theme para T!)

Taringa 2021 BETA 5 [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 Código más ordenado El logo no usa CSS3, solucionando bugs con un zoom personalizado Solucionado Bug con logos en días festivos (San Valentín) Botones más visibles Quitados los botones Música y Juegos. (A debatir) Añadido el botón Crear Post al header. Quitado el fondo en el header de comentar. Nuevo orden de íconos Íconos con fondo 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 link: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?utm_source=chrome-ntp-icon 2) Vamos a Taringa y apretamos el botón 'css' 3) Apretamos el botón 'Edit CSS' y pegamos esto: /* INICIO TARINGA 2021 BETA 5*/ /* Cambios - Código más ordenado - El logo no usa CSS3, solucionando bugs con un zoom personalizado - Bug con logos en días festivos (San Valentín) - Botones más visibles - Quitados los botones Música y Juegos. - Añadido el botón Crear Post al header. - Quitado el fondo en el header de comentar. - Nuevo orden de íconos - Íconos con fondo */ /*Header: Fondo, ancho, etc.*/ #header { background: url(http://brianvalente.com.ar/taringa2021/taringa-beta5.jpg) top center; border: none; height: 50px; left: 0; margin: auto; position: fixed; right: 0; z-index: 10000; } /*Nuevo logo BETA 5*/ #logo { background: url(http://brianvalente.com.ar/taringa2021/logo-beta5.png) ; left: 0px; top: 16px; position: relative; width: 88px; height: 16px; } /*Navegacion en Taringa*/ #nav { background: none; left: -30px; margin: auto; position: fixed; right: 0; top: 3px; width: 420px; z-index: 10000; } #nav .floatR { display: none; } #nav .wrapper { width: 470px; } ul.floatL { width: 472px; } ul.floatL a, menu-section-musica a { -webkit-transition: background .1s; background: rgba(255,255,255,.2); color: rgb(230,230,230); border-radius: 40px; } ul.floatL a:hover { background: rgba(200,200,200,.4); border-radius: 40px; text-decoration: none; } #menu-section-juegos, #menu-section-musica { display: none; } /* Botón Crear Post */ ul.tabs li a { position: fixed; top: 8px; left: 258px; margin: auto; z-index: 10000; right: 0; padding-top: 6px; padding-bottom: 6px; background: rgba(255,255,255,.2); border-radius: 40px; color: rgb(230,230,230); -webkit-transition: background .1s; width: 80px; } ul.tabs li a:hover { background: rgba(200,200,200,.4); } /*Barra de notificaciones*/ .navbar { left: -00px; position: relative; top: 8px; z-index: 10000; } .navbar .navitem.active, .navbar .navitem.active:hover { background: rgba(180,180,180,.4); border-radius: 40px; cursor: pointer; } .navbar .navitem.nohide { background: rgba(200,200,200,.3); 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: -237px; list-style-type: none; position: absolute; top: 0px; width: 250px; } .navitem.useritem ul li { -webkit-transition: background .1s, border-radius .1s; background: rgba(250,250,250,.2); 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.hover div { background: rgba(200,200,200,.4); border: none; border-radius: 40px; } .useritem { left: 687px; position: relative; background: rgba(200,200,200,.3); border-radius: 40px; } /*Boxes de notis*/ #notifications-box { left: -12px; top: 44px; } #mensajes-box { left: -7px; top: 44px; } #favorites-box { left: -2px; top: 44px; } /*Botón de shout*/ #compose-navitem { display: none; } /*Quitar Búsqueda*/ #search { display: none; } /*Espacio del contenido para header*/ #main { padding-top: 50px; } /*Hace que al estar en el Mi no se vea la casa en negro*/ .active#menu-section-mi .home { background-position: -152px -119px; } /*Coloca en el header el login y registro al estar OFF*/ .anon-box { position: relative; top: -10px; } /*Avatares redondeados*/ .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; } .hovercard { margin-right: 10px; margin-bottom: 10px; } .hovercard a img { border: solid 5px rgba(255,255,255,.8); border-radius: 100px; box-shadow: black 0 0 5px; height: 27px; position: relative; width: 27px; } .list-element .avatar img { height: 20px; width: 20px; } .min-avatar, .comment-data { background: rgba(0,0,0,.0); border: none; border-radius: none; bottom: 3px; box-shadow: none; height: 43px; left: -3px ; position: relative; width: 43px; } .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; } /* FIN TARINGA 2021 */ 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 5 by electrocrookers En el código: @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("taringa.net") { /* INICIO TARINGA 2021 BETA 5*/ /* Cambios - Código más ordenado - El logo no usa CSS3, solucionando bugs con un zoom personalizado - Bug con logos en días festivos (San Valentín) - Botones más visibles - Quitados los botones Música y Juegos. - Añadido el botón Crear Post al header. - Quitado el fondo en el header de comentar. - Nuevo orden de íconos - Íconos con fondo */ /*Header: Fondo, ancho, etc.*/ #header { background: url(http://brianvalente.com.ar/taringa2021/taringa-beta5.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; } /*Nuevo logo BETA 5*/ #logo { background: url(http://brianvalente.com.ar/taringa2021/logo-beta5.png) !important; left: 0px !important; top: 16px !important; position: relative !important; width: 88px !important; height: 16px !important; } /*Navegacion en Taringa*/ #nav { background: none !important; left: -30px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 3px !important; width: 420px !important; z-index: 10000 !important; } #nav .floatR { display: none !important; } #nav .wrapper { width: 470px !important; } ul.floatL { width: 472px !important; } ul.floatL a, menu-section-musica a { -webkit-transition: background .1s !important; background: rgba(255,255,255,.2) !important; color: rgb(230,230,230) !important; border-radius: 40px !important; } ul.floatL a:hover { background: rgba(200,200,200,.4) !important; border-radius: 40px !important; text-decoration: none !important; } #menu-section-juegos, #menu-section-musica { display: none !important; } /* Botón Crear Post */ ul.tabs li a { position: fixed !important; top: 8px !important; left: 258px !important; margin: auto !important; z-index: 10000 !important; right: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; background: rgba(255,255,255,.2) !important; border-radius: 40px !important; color: rgb(230,230,230) !important; -webkit-transition: background .1s !important; width: 80px !important; } ul.tabs li a:hover { background: rgba(200,200,200,.4) !important; } /*Barra de notificaciones*/ .navbar { left: -00px !important; position: relative !important; top: 8px !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 { background: rgba(200,200,200,.3) !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 { -webkit-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: -237px !important; list-style-type: none !important; position: absolute !important; top: 0px !important; width: 250px !important; } .navitem.useritem ul li { -webkit-transition: background .1s, border-radius .1s !important; background: rgba(250,250,250,.2) !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.hover div { background: rgba(200,200,200,.4) !important; border: none !important; border-radius: 40px !important; } .useritem { left: 687px !important; position: relative !important; background: rgba(200,200,200,.3) !important; border-radius: 40px !important; } /*Boxes de notis*/ #notifications-box { left: -12px !important; top: 44px !important; } #mensajes-box { left: -7px !important; top: 44px !important; } #favorites-box { left: -2px !important; top: 44px !important; } /*Botón de shout*/ #compose-navitem { display: none !important; } /*Quitar Búsqueda*/ #search { display: none !important; } /*Espacio del contenido para header*/ #main { padding-top: 50px !important; } /*Hace que al estar en el Mi no se vea la casa en negro*/ .active#menu-section-mi .home { background-position: -152px -119px !important; } /*Coloca en el header el login y registro al estar OFF*/ .anon-box { position: relative !important; top: -10px !important; } /*Avatares redondeados*/ .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; } .hovercard { margin-right: 10px !important; margin-bottom: 10px !important; } .hovercard a img { 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; } .list-element .avatar img { height: 20px !important; width: 20px !important; } .min-avatar, .comment-data { background: rgba(0,0,0,.0) !important; border: none !important; border-radius: none !important; bottom: 3px !important; box-shadow: none !important; height: 43px !important; left: -3px !important; position: relative !important; width: 43px !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; } /* FIN TARINGA 2021 */ } 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 Taringa 2021 seguime! ¡Adiós!