Adornar las Notificaciones. [Sugerencia]

por **Max** Mar 31 Mayo 2016, 21:13

Recuerdo del primer mensaje :

Holas, hoy dando vueltas en el foro, me encontré con algo que me gustaría ver algo mas bonito (Cómo casi siempre XD), y es la pestañita de las notificaciones:

Spoiler:

Solo la abres y aparece un cosito blanco con las notificaciones, y debajo un ''Ver todas las notificaciones'', el cual quedaría bien con ''center'' (No se los demás, pero a mi me gusta así.)

También le quedaría algo así como una animación, no se si se podrá, pero noté que el chatbox lo hace:

Spoiler:

Tal vez, y solo tal vez, podrían hacer lo mismo con la barrita de las notificaciones.
Bueno, no se si esto se podrá también, pero, en las notificaciones hay una raya negra que separa las notificaciones, ¿vieron que habían cambiado el separador de las firmas a uno verde?
¿No se podrá aplicarle algo parecido a la barrita esta?

También redondear las esquinas no estaría mal. xD

por Wigazo Jue 20 Oct 2016, 18:06

Perdón por colgar que lo vi hace un rato recién. Ejem...

Puse el azul primero.

CSS:

Agregué esto:

Código:: /*==================ADORNAR NOTIFICACIONES==================*/ /*Hay que sacar el display none que le da "#fa_toolbar #fa_right #notif_list" */ /*Hay que desactivar el color que le da "#fa_toolbar #fa_right #notif_list li .contentText a" al texto, así se utiliza este.*/ /*Hay que agregarle la clase .arrow_box al #fa_notifications o tal vez el css se le puede agregar directamente al #fa_notifications, no lo probé. Pero probablemente funcione sin drama :) */ /* Icono Activado de Notificaciones */ .notification #fa_notifications { /* webkit-filter: hue-rotate(-90deg) saturate(250%);*/ background-color: #404040; } /* Lista */ /*Cambiar el max-height para ajustar*/ #notif_list { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; background-color: #333!important; border-radius: 15px; border: 6px solid #333 !important; display: block !important; font-size: 11px; list-style-type: none; margin: 0; overflow: hidden; padding: 0; position: absolute; transition: max-height .3s ease, opacity .25s linear .275s; user-select: none; z-index: 999; max-height: 4.5em; opacity: 0; top: 66px; } /* Lista activada */ .notification #notif_list { opacity: 1; max-height: 100vh !important; transition: max-height 1s ease .25s, opacity .25s linear; } #notif_list li { display: none; } #notif_list li:first-child, #notif_list li:last-child{ display: block; } /* Elementos de la lista */ #notif_list li { background-color: #fff; border: 4px solid #989F9F; border-top: none; border-bottom: none; overflow: hidden; transition: background-color .5s; -webkit-transition: background-color .5s; } #notif_list li:hover { background-color: #a3ffa3; } /* El primer elemento de la lista */ #notif_list li:first-child { border-radius: 12px 12px 0 0; border: 4px solid #989F9F; border-bottom: none; overflow: hidden; } /* El último elemento de la lista */ #notif_list .see_all { border: none; text-align: center !important; color: #fff; background-color: #05440f; padding: 0.7em !important; text-align: right; background-image: url(http://i76.servimg.com/u/f76/15/34/08/13/fondo_10.jpg); background-position: 0 -3px; border-radius: 8px 8px 0 0; margin-top: 1vh !important; transition: filter .3s; -webkit-transition: -webkit-filter .3s; background-position: 112px 0; } /* El penúltimo elemento de la lista */ #notif_list li:nth-last-child(2) { border-bottom: 4px solid #989F9F; border-radius: 0 0 12px 12px; overflow: hidden; } /* El primer elemento de la lista que también es el penúltimo (una sola notificación) */ #notif_list li:firt-child:nth-last-child(2) { border-radius: 12px; border: 4px solid #989F9F; } .see_all:hover { filter: brightness(120%); -webkit-filter: brightness(120%); } .see_all a { text-decoration: none !important; } #notif_list li { display: none; background-image: url('http://i.imgur.com/EtdZFk4.png'); font-size: 12px !important; color: #fda401 !important; font-weight: bold; } #fa_toolbar #fa_right #notif_list li .contentText.ellipsis a { color: #85cbe8 !important; font-weight: bolder; } #notif_list li:last-child a { color: white !important; font-weight: bold; } #fa_notifications{ position: relative; background-color: #404040 !important; } #fa_notifications:before { top: 88%; left: 50%; border: solid transparent; content: " "; position: absolute; pointer-events: none; opacity: 0; } .notification #fa_notifications:before { border-color: rgba(64, 64, 64, 0); border-top-color: #333; border-width: 18px; margin-left: -18px; opacity: 1; } a#fa_notifications { border: 0 solid transparent; border-radius: 2rem; width: 3.5rem; height: 3.5rem; background-repeat: no-repeat; background-position: center center; } /*==================FIN ADORNAR NOTIFICACIONES==================*/

En cuanto a la primera indicación, le puse un display block directo ahí porque sacar no puedo (viene en la stylesheet de FA). Para el segundo lo mismo, simplemente le puse un selector másd "fuerte" en nuestro CSS para que se coma el de FA. En cuanto a lo de .arrow_box, simplemente lo cambié por #fa_notifications.

@Sproilex

por Sproilex Jue 20 Oct 2016, 18:07

Ok me gusta como quedo.

Pero lo que dije, no se diferencian los mensajes nuevos de los ya vistos.

Esto para mi es muy util,habra alguna forma de acomodarlo?

por Wigazo Jue 20 Oct 2016, 18:12

Uh, es cierto. ¿Qué estilo tendrían las notificaciones sin leer?

por Lirianer Jue 20 Oct 2016, 18:15

Uy, se verdad. Se me re pasó.

¿Que clase se agrega en la notificacion nueva?

por Rhinestone Jue 20 Oct 2016, 18:15

Que las sin leer se vean en negrita y las leídas sin negrita.

por Wigazo Jue 20 Oct 2016, 18:16

unread

@Lirianer

Ahí te regalé una. (?

por Sproilex Jue 20 Oct 2016, 18:18

Podria ser un azul mas clarito.

O las letras de otro color.

por Wigazo Jue 20 Oct 2016, 18:19

Yo diría también de sacar la negrita de los hipervínculos, pega muy mal.

por Sproilex Jue 20 Oct 2016, 18:28

A mi parecer queda muy bien, pero tal vez otro color un poco mas ozcuro.

por Spirit Beast Jue 20 Oct 2016, 19:00

Que opinan de un verde tipo el foro, para los mensajes no vistos?

por Sproilex Jue 20 Oct 2016, 19:15

Podria pegar, pero habria que probar primero.

por Spirit Beast Jue 20 Oct 2016, 19:36

Sproilex escribió:Podria pegar, pero habria que probar primero.

Exacto, ya que me confunde un poco que las leídas y las que no, se vean iguales

por Jeshua Jue 20 Oct 2016, 19:38

A veces las notificaciones que ya había revisado se repiten.

por Lirianer Jue 20 Oct 2016, 20:13

por Wigazo Jue 20 Oct 2016, 20:20

Está bueno que sean rojas las no leídas, así sea como las galaxias de los temas del foro, además del fondo del numerito que muestra cuántas hay sin leer.

EDIT:

Wigazo escribió:Yo diría también de sacar la negrita de los hipervínculos, pega muy mal.

De eso qué dicen? Porque la verdad me terminó gustando un poco lo azul, lo único que queda como patada en los huevos es esa negrita.

por Spirit Beast Jue 20 Oct 2016, 20:29

Lirianer escribió:

?

Si, se ve increíble, es como en Spore =3

por Contenido patrocinado

Adornar las Notificaciones. [Sugerencia]

Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]

Re: Adornar las Notificaciones. [Sugerencia]