Staff en línea

[CSS] Nuevo diseño de notificaciones y menu de la toolbar
Tema iniciado por y Añadir a favoritos

staff


Última edición por Chalo el Dom Feb 28, 2016 3:47 am, editado 1 vez
[codebox]
coloca el css y tendrás este aspecto:


[/codebox]

[hidecode]
Código:

#fa_welcome::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACs0lEQVQ4T6XTX0hTURwH8O/v3N1N3S21ldkfa+BAixDDyr+L0QjEl71kGUQWqdV066nIFQYFi3wIRC1nWJIPFQUVPewhDMy/9BD1srke/FOQRhsaONzWdm/csyVa9NSBw71c7vdzfufc3yX856A/8yaTSZeRnX1Gw8Tjm3JyNhMpmYsLC36APZa1wtN3g4Oh1Zk1QHFphc2wIavHYjbnmvLzIYoiiAjxeBwzs7MYn5gIhcNLttde7+hvZAUoM5sr8/J2vDlksWhFjQZE4GFiLHklgizLGBsfi81//3b01bPnL1WEA1ar1aDPzApUlJcbRFENJwPqZCmAcZBx5P3HD/Nz2i9Gb6c3yoHDNTXnCgsK7q6TJKiAwCsgMEquzlgSUxRAlhOIRiKY/TzT3N/Xf4cDttraoZ3btx2sqa5GOBzG2+ER6CU9L5+lgOXlCCrKyiDpJQyPjyAYDI52d3RVceBI3bE5jUaTW36gFE6HA1PT0+js6oSgEXgVatkt9mYYjUZ4PB74Aj61In/H7Y7dHDhx+qSPEdulKAr2l+yDo7kFsVgMnnu9/DCbGpqg1Wrh6e3BZGASolZU4flbN9u3cODM2cZhgbEq9cAURUbJ3hI0NjSuaZH7D/rgD/g5pL7HGBu6fu2GhQP2Cy12gbHu5H4ZFFlGcVEx6utPcWRg4CEmP60OEwSi862tbT0ccDgcujS9booxtjWlI5FIoGhPET99f8CHNJ2O46kRlONU6HK5QiuN1NZ2xUYCe8IY06mfLbkdBYIgrNynwlEZZHVdcvFuXNPK7nZ3JYPygog26vUSJElCRnoGwuElLP5YRDQa/QpS7JcvXuVd+BegPnC73QYS5FoQ1TGiAoAWFMghkpVH6enr+5xOZ/RfP5MWQNqqqQOgAaBuPAHgJ4AYgEhqLgOI/wJ/ueMRw5YhagAAAABJRU5ErkJggg==);
  margin-left: 5px;
  text-decoration: none;
vertical-align: sub;
}
#fa_menulist, #notif_list {
  background: -moz-linear-gradient(center top , #fff 0%, #f6f6f6 70%, #ededed 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
  border: medium none !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.58);
  line-height: inherit !important;
  overflow: hidden;
  padding: 10px !important;
  width: 340px !important;
}
#notif_list {
  min-height: 58px;
  width: 100%;
}
#fa_usermenu {
  float: left !important;
  padding: 0 !important;
  position: relative !important;
  text-align: left !important;
  width: auto !important;
}
#fa_usermenu img {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #d5d5d5;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 50px;
  max-height: 50px !important;
  max-width: 50px !important;
  padding: 1px;
  vertical-align: middle;
  width: 50px;
}
#fa_ranktitle {
  margin-left: -70px;
  margin-top: 60px;
  position: absolute;
}
#fa_menulist > li {
  float: left;
  margin: 3px 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
  width: 50%;
}
#fa_usermenu > table {
  float: right;
  margin-bottom: 28px;
  margin-left: 4px;
  margin-right: 8px;
}
#fa_toolbar #fa_right .fa_separator {
  width: 100%;
}

#fa_notifications::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACfElEQVQ4T6WTXUjTURjGf2cKOqVcTof0hR9L08TEQUQFESWkIWqJGYIa1E1iF5mkW0trTtKwm/Smm8LImUWJIBbWRdDHRTpSl2XOD6JkzfmRtk0q94//touu88C5+J1z3gfO8z6vYJ1LrLMeUWWx9rgVYfn6a/k0Gp8wJyUSyxQGUyFmmQmw3lRIU5A1Ygpj43FaGnrfiLwuj1S2X8mhDjM/aw302KAwHZRNJrx6o58LZDab8BgCfCIDFvTXqdPVIMq7bFL7yV20v12gVBfNyBxIgKQA4QMF4AuyfJEVA52DLor2xVD/8CNiPE0raU9X8LTUgHVkmqojCVidARHZIHn7BQXoYuHW82l0GQnsvWPGdf8uotwyKrWWpDPmgvlFL59mHFRnJzAUFJFNlkV0GmgdmGZnfBzqTUq2R0NDtw2R2+mWijIjSI0NPBybcTE7t4QhR8v7pUCPMlVg7rezOVZFWnyM/2zIAX2jHkR556jUfCqdLwsgJNCpof3VN9zeVS5lJ/kfNw9MEqkMp/LAFobm8RujUUH9AxtiPFUrbasoY/yckeRIaO23U3xQS8/rSax2h18gSxtHwf4kul/aqc7RMuGGxDYTjo6OgActJemESdD2zI56YziHd2/1FyqCMfPJLgIvhr8yv7xK5VEtXqCuS/bA4pGK9ygJ/eFkR1wUGnUYf+QCuYVSwH2fAkIkCBUwu/iLie8rrEWoefTOjThrGZZuO/tYPF9H72fITYaoGyaWaoz0jcOxlAAvBzkvBVQ3zaxeMHDx3iDiTPeH5dqrBRsaLz/GGYyxHNt/YyzHWo6xk0TkGPv5Si/K394V+ZeZQMh/DtXauqfxL95GAAwtysmIAAAAAElFTkSuQmCC);
vertical-align: sub;
margin-right:5px
}
#fa_notifications {
  float: left !important;
  letter-spacing: -999px;
  text-align: center;
  width: 50px;
}
#notif_unread {
  letter-spacing: normal;
  margin: 0 5px 0 0 !important;
  vertical-align: top;
margin-left:10px!important
}
#notif_list > li:nth-of-type(1):not(.see_all) {
  margin-top: 32px !important;
}
#notif_list li.see_all::before {
  color: #595959;
  content: "Notificaciones";
  font-size: 16px;
  position: absolute;
  top: 10px;
}
#notif_list li.see_all {
  background-color: transparent !important;
  border-bottom: 1px solid #ececec;
  position: absolute;
  top: 10px;
  width: 90% !important;
}
#notif_list li.see_all::after {
  color: #777;
  content: "No tienes notificaciones";
  left: 6px;
  position: absolute;
  top: 38px;
  z-index: 0;
}
#notif_list li:not(.see_all) + .see_all::after {
  display: none;
}
#notif_list li.see_all a {
  color: #595959 !important;
}
[/hidecode]
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6852


Puntos :

8948


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

A ver.. Que tal esta esto?
mrsrz
avatar

¿Que estoy pensando? :

... [table class=fecha_up][td]Se modifico:25/11/16 - 19:20 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/musical/cool_guitar_cover_9.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

424


Puntos :

597


Me gusta :

63


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


Ver perfil de usuario http://musicinstant.forumotion.com/

Volver arriba Ir abajo

staff
Sueena interesante haber cuando este listo...
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1585


Puntos :

2328


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

voy a ver como es este
Himnoshistoricos
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

https://c2.staticflickr.com/2/1445/25839638916_404acbe82c_b.jpg


Color de titulos :

#fff


Sombra titulo :

0 1px #000


Mensajes :

500


Puntos :

661


Me gusta :

95


ingreso :

04/02/2016


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

firefox


Ver perfil de usuario http://www.niunpasoatras.org/

Volver arriba Ir abajo

Otra gran obra maestra señor Chalo :3
YoshiGM
avatar

¿Que estoy pensando? :

El último esfuerzo del año C: [table class=fecha_up][td]Se modifico:28/11/18 - 18:20 hrs. [/td][/table]


Banner en temas :

https://i.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

1158


Puntos :

1555


Me gusta :

237


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://www.yoshifansclub.net

Volver arriba Ir abajo

staff
@Dosh pues siempre ha estado listo faltaba la imagen
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6852


Puntos :

8948


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Parece interesante este tema.
Ya probado, ire jugando con el css. gracias
J.sanchez
avatar

¿Que estoy pensando? :

El principio del fin más cerca que del fin del principio. [table class=fecha_up][td]Se modifico:12/10/16 - 18:41 hrs.[/td][/table]


Banner en temas :

http://i65.tinypic.com/dhg22e.png


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

32


Puntos :

37


Me gusta :

5


ingreso :

25/04/2016


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://Forocomercios.foroactivo.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.