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 **Max** Dom 16 Oct 2016, 21:28

Wigazo escribió:Creo que te pasó porque enviamos los posts en el mismo segundo.

Sí, se me re confundieron los mensajes. XDD

Pues, lo probamos? :b

por Lirianer Dom 16 Oct 2016, 21:34

A mi me gustó más el despliegue vertical (la segunda)

por **Max** Dom 16 Oct 2016, 21:35

Lirianer escribió:A mi me gustó más el despliegue vertical (la segunda)

Ídem.

por **FlairDreamer** Dom 16 Oct 2016, 21:55

Sidimey escribió:

A mí me gusta más este, creo que es el que más se adapta a Spore, opino que no necesariamente todo tiene que tener algo verde del foro, conque se note que es de Spore me parece suficiente xD

En cuanto a colores prefiero este.

Y en cuanto al desplazamiento, también me gusta más el vertical.

por Dororo Lun 17 Oct 2016, 13:07

FlairDreamer escribió:
Sidimey escribió:

A mí me gusta más este, creo que es el que más se adapta a Spore, opino que no necesariamente todo tiene que tener algo verde del foro, conque se note que es de Spore me parece suficiente xD

En cuanto a colores prefiero este.

Y en cuanto al desplazamiento, también me gusta más el vertical.

Opino igual, a mi parecer que sea distinto le da un toque bonito ya que no es algo que esté siempre abierto

por Sidimey Lun 17 Oct 2016, 13:10

Dororo escribió:
FlairDreamer escribió:
Sidimey escribió:

A mí me gusta más este, creo que es el que más se adapta a Spore, opino que no necesariamente todo tiene que tener algo verde del foro, conque se note que es de Spore me parece suficiente xD

En cuanto a colores prefiero este.

Y en cuanto al desplazamiento, también me gusta más el vertical.

Opino igual, a mi parecer que sea distinto le da un toque bonito ya que no es algo que esté siempre abierto

Sep, ademas de que creo que con los últimos cambios estéticos se agregó mucho verde, ya como que seguir poniendo todo verde cansa xD

por Wigazo Lun 17 Oct 2016, 13:28

Es cuestión de estética, seguir una paleta básica. A mí también me gustaría que tenga esos colores por lo sporeano, en ese sentido lo prefiero muchísimo más al otro, pero tampoco quiero sacrificar la estética por eso. Igual no quiero hablar mucho hasta verlos ambos bien en acción.

¿Prefieren el desplazamiento vertical?

por Lirianer Lun 17 Oct 2016, 13:29

Lirianer escribió:Hago este comentario solo para poner algo en la discusión del azul - verde.

El foro tiene 3 colores predominantes, negro (matices de gris) usado para bloques, azul usado para links, verde usado para el resto de las cosas estéticas en conjunto con el negro.

Lo que @Wigazo viene diciendo hace tiempo de sacar azul y cambiarlo por verde podríamos hacerlo en todo lo que no sean links, como por ejemplo la barra del chatbox mencionada en esta sugerencia.

El argumento de que el foro es de Spore, usado para no poner más verde en lugares u otros cambios, me parece absurdo. El foro es el foro, spore es spore. La estética del foro es verde y negro, el azul se usa solo para resaltar links y porque queda bien.
Que el foro sea de Spore no significa que tenga que tener azul por todos lados, y tampoco estamos agregando verde donde no tendría que ir, ya que el foro desde el comienzo fue negro y verde.

¡Estoy de acuerdo en intentar cambiar más cosas a verde!

El verde es el color del foro, esa letra naranja está totalmente fuera de lugar.

Pero bueno... si son más, son más...

por Dororo Lun 17 Oct 2016, 13:37

En el desplazamiento no hay duda, el vertical mejor Smile

por Wigazo Mar 18 Oct 2016, 08:05

Bueno, parece que gana el vertical.

Entonces habría que probarlo con ambos colores, así vemos cuál nos gusta más, dale? Parece ganar el azul con letras naranjas, pero vamos a ver qué opinamos cuando lo veamos en acción.

por Sproilex Mar 18 Oct 2016, 14:41

Que bien!!!

Yo digo que se implemente primero ese azul con letras naranjas para ver que tal queda,y luego el otro

por Lirianer Mar 18 Oct 2016, 14:54

Hoy cuando llegue a casa paso el css.

EDIT:
Arriba del todo hay un par de instrucciones de cosas que hay que desactivar.

Verde

Spoiler:

Código:: /*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 { 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; 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: 10000; 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/OdrkMmJ.png'); font-size: 12px !important; color: white !important; font-weight: bold; } #notif_list li a { color: #03b2ed !important; font-weight: bolder; } #notif_list li:last-child a { color: white !important; font-weight: bold; } .arrow_box { position: relative; background-color: #404040 !important; } .arrow_box:before { top: 88%; left: 50%; border: solid transparent; content: " "; position: absolute; pointer-events: none; opacity: 0; } .notification .arrow_box: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; }

Azul

Spoiler:

Código:: /*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; 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: 10000; 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; } #notif_list li a { color: #85cbe8 !important; font-weight: bolder; } #notif_list li:last-child a { color: white !important; font-weight: bold; } .arrow_box { position: relative; background-color: #404040 !important; } .arrow_box:before { top: 88%; left: 50%; border: solid transparent; content: " "; position: absolute; pointer-events: none; opacity: 0; } .notification .arrow_box: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; }

@Wigazo Hola.

por **Max** Miér 19 Oct 2016, 12:50

Yo sigo prefiriendo el de Spore. xD

por Sproilex Miér 19 Oct 2016, 15:03

Esperemos a que llegue wig para que lo implemente.

por Jeshua Jue 20 Oct 2016, 18:03

Han quedado muy bonitas. Very Happy

Adornar las Notificaciones. [Sugerencia] - Página 7 XDVgTJh

por Sproilex Jue 20 Oct 2016, 18:05

Si señor.

Me gusta mucho este estilo,pero lo que creo que no se penso es que se diferencien los mensajes nuevos.

Para ver,@Joshpad 16 etiquetame tu tambien para ver si los mensajes nuevos se diferencian porfa.

Este estilo me gusta, habra que ver el otro, pero este quedo muy bien, y combina con el foro.

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]