<b:includable id='threaded_comment_css'>
<style>
Toooodo el CSS
</style>
Como ya tenía nuevos estilos para este sistema, eliminé por completo los que estaban en la plantilla, para evitar problemas.
El día de ayer por la mañana, me sorprendió ver que los estilos ya no estaban aplicados, y que todo lucía tal y como se veía al principio cuando habilité los comentarios.
Inmediatamente pensé que Blogger estaba haciendo cambios y hasta me ilusioné pensando que tal vez habían arreglado el problema del salto directo a los comentarios al ingresar al post en ciertos navegadores, (hay que seguir soñando) eché un vistazo a la edición de HTML de la plantilla y ¿qué crees? estaban tal y como los edité, pero evidentemente no se estaba "interpretando".
Para solucionarlo, tomé sólo las clases que edite con sus respectivas propiedades y las puse después de ]]></b:skin> en una condición que tengo para que éste se cargue sólo al estar en la página individual y se arregló el asunto, volvieron los estilos que tenía (excepto uno) y me puse feliz y contenta.
Pese al cambio que hice, seguía teniendo problemas con la alineación de los comentarios, éstos aparecían justificados, (lo cual me choca), siendo que yo había editado cierta regla para que esto no pasará.
Me pareció extraño e inspeccioné con Chrome cada elemento en los comentarios, y vi que los estilos para los comentarios los están enviando desde allá, en esta hoja de estilos:
http://www.blogger.com/static/v1/widgets/782192654-widget_css_bundle.css
Ahí fue cuando me di cuenta que
Rayos, ¡qué lió!, ¿y qué va a pasar con el CSS que todavía aparece en la plantilla para los comentarios?
Como los estilos ya los está mandando Blogger, es inútil que los tengamos dentro de la plantilla como inicialmente los mandaron, por lo tanto habrá que quitarlos, si es que todavía los tienes, para ello, tienes que ir a la edición de HTML de la plantilla, expandir plantillas de aritulugios, buscarlos, y eliminarlos:<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 14px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 4px;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 2px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 20px;
height: 20px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:left !important;
line-height:17px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
.datetime.secondary-text{
font-size:12px;}
cite.user{font-size:15px;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
Si no lo haces esto será una carga inútil para tu blog. El código anterior, ya no aparece en algunos blogs, lo comprobé en muchas plantillas, y en mi caso, lo quité manualmente.
Pero, ¿ahora que va a pasar, se pueden personalizar los comentarios?
Si ya tenía algunos estilos en la plantilla antes de que pusiera comentarios anidados, ¿debería concervarlos o quitarlos?
Para ser más exactos y tener los mismos resultados en todos los navegadores, yo los quitaría y escribiría nuevos estilos basándome en las clases que Blogger asigna al nuevo sistema de comentarios.
Puedes verificar la hoja de estilos que envía Blogger, que mencionaba arriba, y "hasta ahora", los estilos que nos mandan para los comentarios son estos:
#comments .blogger-comment-icon,.blogger-comment-icon{line-height:16px;background:url(/img/b16-rounded.gif) left no-repeat;padding-left:20px}#comments .openid-comment-icon,.openid-comment-icon{line-height:16px;background:url(/img/openid16-rounded.gif) left no-repeat;padding-left:20px}#comments .anon-comment-icon,.anon-comment-icon{line-height:16px;background:url(/img/anon16-rounded.gif) left no-repeat;padding-left:20px}.comment-form{max-width:425px;_width:410px;clear:both}.comment-link{white-space:nowrap}.paging-control-container{float:right;margin:0 6px 0 0;font-size:80%}.unneeded-paging-control{visibility:hidden}#comments-block .avatar-image-container img{-ms-interpolation-mode:bicubic;border:1px solid #ccc;float:right}#comments-block .avatar-image-container.avatar-stock img{border-width:0;padding:1px}#comments-block .avatar-image-container{height:37px;left:-45px;position:absolute;width:37px}#comments-block.avatar-comment-indent{margin-left:45px;position:relative}#comments-block.avatar-comment-indent dd{margin-left:0}iframe.avatar-hovercard-iframe{border:0 none;padding:0;width:25em;height:9.4em;margin:.5em}.comments{clear:both;line-height:1em;margin-top:10px;margin-bottom:0}.comments .comments-content{font-size:13px;margin-bottom:16px}.comments .comment .comment-actions a{padding-right:5px;padding-top:5px}.comments .comment .comment-actions a:hover{text-decoration:underline}.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:left}.comments .comments-content .inline-thread{padding:.5em 1em}.comments .comments-content .comment-thread{margin:8px 0}.comments .comments-content .comment-thread:empty{display:none}.comments .comments-content .comment-replies{margin-left:36px;margin-top:1em}.comments .comments-content .comment{margin-bottom:16px;padding-bottom:8px}.comments .comments-content .comment:first-child{padding-top:16px}.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}.comments .comments-content .comment-body{position:relative}.comments .comments-content .user{font-style:normal;font-weight:bold}.comments .comments-content .icon.blog-author{display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px}.comments .comments-content .datetime{margin-left:6px}.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:0 0 8px}.comments .comments-content .comment-content{text-align:justify}.comments .comments-content .owner-actions{position:absolute;right:0;top:0}.comments .comments-replybox{border:none;height:250px;width:100%}.comments .comment-replybox-single{margin-left:48px;margin-top:5px}.comments .comment-replybox-thread{margin-top:5px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{cursor:pointer;display:inline-block}.comments .continue{cursor:pointer}.comments .continue a{display:block;font-weight:bold;padding:.5em}.comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em}.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}.comments .thread-chrome.thread-collapsed{display:none}.comments .thread-toggle{display:inline-block}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;margin:.3em;overflow:visible;padding-right:4px;width:7px}.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent}.comments .avatar-image-container{float:left;max-height:36px;overflow:hidden;width:36px}.comments .avatar-image-container img{width:36px}.comments .comment-block{margin-left:48px;position:relative}@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}table.tr-caption-container{padding:4px;margin-bottom:.5em}td.tr-caption{font-size:80%}.item-control{display:none}.item-control a,.item-action a{text-decoration:none !important}
El CSS aparece comprimido, se pueden separar para que puedas leerlos fácilmente, si te fijas es extenso, habrá que ser cuidadosos con los estilos que pongamos en la plantilla para no "repetir CSS" inecesariamente, puedes guiarte revisando las clases que corresponde a cada sección del comentario con la ayuda del navegador Chrome, por ejemplo, si no lo sabes, luego hablaremos de eso.
Para quienes usan plantillas personalizadas, y pensando en que ya son varios los que me preguntan cómo poner redondos los avatares, separar los comentarios usando borde, y destacar las respuestas de un comentario, estos son los estilos que uso y sólo tienes que ponerlos después de ]]></b:skin> :
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .comments .comments-content .comment-content{text-align:left;} .comments .comments-content .inline-thread {background: #eef2f2; border:1px solid #cedadc;}.comments .comments-content .comment {border-bottom: 1px solid #b2d1d6 !important;} .comments .avatar-image-container {border:3px solid #cedadc;} .comments .avatar-image-container, .comments .avatar-image-container img { -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px; } </style> </b:if>
La parte que puse de rojo son los valores que puedes editar, para cambiar los colores, donde en:
.comments .comments-content .inline-thread: puse el color del borde (border) y fondo (background) de las respuestas de los comentarios, por eso se ven en "cajitas".
.comments .comments-content .comment: puse el borde (border) que se aplica al fondo de cada comentario, independientemente que sea repuesta o no.
.comments .avatar-image-container, puse la imagen que aparece debajo de cada avatar, si alguien usa imagen transparente en su avatar, se verá ésta como fondo, o bien cuando no haya ningún avatar, por ejemplo en comentarios de usuarios que comenten como anónimos. *Ver actualización abajo.
Si prefieres el texto justificado en los comentarios, quita todo lo que resalté de azul: .comments .comments-content .comment-content{text-align:left;} esa regla ya la envía Blogger.
Si quieres agregar el icono de lápiz para destacar el comentario del autor, es decir el tuyo, sólo agrega a los estilos ateriores, esto:
.comments .comments-content .icon.blog-author {Para cambiar los colores puedes usar esta tabla de colores.
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
Nota: Recuerda eliminar los estilos de los comentarios que trae la plantilla si es personalizada, que están antes de ]]></b:skin>, y sobre todo, antes de hacer cambios, guarda una copia de seguridad de tu plantilla.
Separar las lineas del texto de los comentarios
Si sientes que están muy pegados los textos entre linea y linea, en: .comments .comments-content .comment-content, agregas:
line-height:18px;
Puedes editar el valor de 18px, aumentándolo, según lo desees.
Voy a dar un poco de tiempo, a que se defina bien esto, y luego crearé otros estilos interesantes para que puedas usarlos en tu blog ;)
Actualización 18/02/2012. Eliminé del CSS la imagen de fondo para el avatar de los comentarios, ya que Blogger ha añadido una imagen.




Ahora que lo mencionas, hace unos días que estoy con mis chapuzas arreglando una nueva platilla, ayer fuí a editar la parte de los comentarios y no la encontré pero hoy por la mañana estaba nuevamente ahí.
ResponderSuprimirYa me aclaraste el motivo!!
Que tengas una linda semana.
Besos.
Gabriela.
Sabes que al eliminarlo manualmente ya no volvío a aparecer, si quieres puedes hacerlo y me cuentas tu experiencia ;)
SuprimirGracias por mantenernos al día de tanto vaivén de códigos, la verdad que es un poco engorroso y tu lo haces fácil. He copiado los estilos y suprimido la parte primera de la plantilla y todo bien. Solo tengo un pequeño problema que me queda por resolver, y es que no veo en el código donde resolver el problema del interlineado pues me quedan los saltos de linea muy apretujados casi sin espacios. Gracias Karla, un saludo.
ResponderSuprimirHola Carlos, eché un vistazo a tu blog y se ven muy monos y los redondeaste y toda la cosa :)
SuprimirBueno, me imagino que te refieres al espacio entre linea y linea ¿verdad?, sabes,como habrás notado pasaba lo mismo en mis comentarios, y ya lo cambié, se arregla agregando en:
comments .comments-content .comment-content{text-align:left; line-height:17px;}
...lo que resalté de negrita, si las quieres más separadas aumenta el valor de 17px ;)
Me cuentas...
Debe haber un conflicto con mi plantilla, he añadido ese parámetro en el código justo donde lo indicas pero no hay cambios en la separación entre lineas.
SuprimirAdemás te quería comentar que desde que añadí el código que nos ofreces arriba queda muy bien por cierto ;) gracias, si te fijas arriba del todo a la izquierda junto a la cabecera sale una flecha ( --> ) y no se a que se debe, he intentado quitarla pero no hay manera. Puede ser porque toque los paddings y margin de la plantilla¿?
De todas formas me gusta como queda y si no hay mas remedio esperaremos a que la cosa se ponga en su sitio y los de blogger se aclaren un poco jeje, saludos cordiales Karla y gracias de nuevo.
No te preocupes Carlos, eso se arregla fácilmente, lo que pasa es que agregaste el código "antes" de:
Suprimir]]></b:skin>
...y no es antes, es "después", como lo menciono en el post.
Ok, para que no haya dudas deja te explico:
Cuando agregas este CSS:
.arriba{
width:200px;
height100px;
}
Lo debes poner "antes" de ]]></b:skin>
Y cuando agregas este CSS:
<style type="text/css">
.arriba{
width:200px;
height100px;
}
</style>
Se pone después de ]]></b:skin>
Si te fijas en ambos la diferencia es que el segundo esta envuelto con <style> que es una etiqueta que sirve para poner dentro CSS, texto, etc, en un documento como lo es nuestra plantilla.
En este caso además del CSS hay una condición que estamos agregando antes para que el CSS sólo se cargue al esta dentro de cada post y es la que empieza así:
<b:if cond='data:blog.pageType == "item"'>...
Entonces, mueve lo que pusiste con mucho cuidado, verificando que no te lleves ningún caracter de mas o de menos.
Recuerda verificar en vista previa antes de guardar los cambios.
Me cuentas...
Que despiste!! ya lo he arreglado, todo en su sitio. Muchas gracias Karla!!
SuprimirKarla esre muy generosa gracias por compartir
ResponderSuprimirDe nada Juvinao, es un placer ;)
SuprimirAgradecido por tu trabajo y desinterés al compartir tus descubrimientos de este mundo loco del Blogger.
ResponderSuprimirUn saludo afectuoso.;-)
Gracias ártabro por tu comentario, recibe lo mismo :)
SuprimirBuenas tardes, hemos encontrado su Web en Google y nos gustaría proponerles un intercambio de enlace (Texto). Nos beneficiaría a ambos, mejorando nuestra posición en todos los motores de búsqueda.
ResponderSuprimirAprovechamos para ofrecerle nuestros servicios como estudio creativo (diseño web, gráfico, impresión y vídeo).
Agradecemos su tiempo y disculpen las molestias.
Miguel Ángel R.C.
Responsable de marketing.
info@websmultimedia.com
Websmultimedia.com
Gracias por el ofrecimiento Miguel, pero no hago intercambio de enlaces, en cambio, estoy a favor de colocarlos de manera libre y de forma desinteresada cuando por ejemplo me gusta una página, o la sigo.
SuprimirMucha suerte ;)
Hola de nuevo Karla, una consulta sobre los comentarios. Estoy probando con tu estilo y de momento va más o menos bien, pero mi consulta está relacionada con los códigos de blogguer que mencionas en "¿y qué va a pasar con el CSS que todavía aparece en la plantilla para los comentarios?" resulta que donde tú pones:" " yo en mi plantilla tengo: " "
ResponderSuprimirQuisiera saber que diferencia hay y por que no aparecen en mi plantilla los códigos CSS de blogguer y si eso influye en algo a los estilos de comentarios.
Gracias.
He hecho lo que has dicho pero al darle a los comentarios se ve la pagina en blanco. He tenido que volver al estilo anterior :/ mi blog es lafortalezadelechuck.com Ojalá me ayudes
ResponderSuprimirHola Francmi08,
ResponderSuprimirSi ya no aparece esta bien, de hecho así debería ser, puesto que Blogger lo envía en esta hoja de estilos que menciono arriba y que es esta:
http://www.blogger.com/static/v1/widgets/782192654-widget_css_bundle.css
Hola Elanie, mmm, sabes que pensé que Blogger ya había hecho algo al respecto, eso sucedía en Internet Explorer, pero sabes, ahora que veo tu blog con ese navegador no sucede. De todos modos echa un vistazo a esta entrada de Oloman:
ResponderSuprimirhttp://www.oloblogger.com/2012/01/blog-en-blanco-solucion-al-problema-con.html
hola que tal probe de poner el codigo de los comentarios tuyos en mi blog, cambiandoles el color, pero me aparece un problema la opcion de responder no funciona y depaso queria preguntar mi plantilla es persolnalizada que es lo que deberia eliminar para que funcione el codigo
ResponderSuprimirEcha un vistazo a este post:
Suprimirhttp://www.compartidisimo.com/2012/02/no-funciona-el-enlace-de-responder-de.html
y luego me cuentas ;)
Hola Karla =) Te cuento que dejé Disqus a un lado porque estos nuevos comentarios anidados están muy buenos, te quiero agradecer por la información porque aunque llevo toda la madrugada tratando de instalarlos ya por fin pude =D y si lo logré fue gracias a ti, Potro y Oloman. Creo que les rasque por donde pude a los tres blogs para solucionar un buen de problemas pero ya quedo. Dime que te parece: http://goo.gl/anzEs ;-) Aunque tome la forma de Oloman sin estos códigos que pusiste no hubiese llegado muy lejos.
ResponderSuprimirQué bueno que los habilitaste Olmo, ya me imagino el gran lío que traías, ahora podrás dormir tranquilo XD
Suprimir¡Ya puse el estilo de tus comentarios en mi blog! ¡Muchas gracias, Karla! Sólo una cosa: ¿Cómo podría cambiar el estilo de los avatares redondos para que salgan cuadrados pero con bordes ligeramente redondeados? Muchas gracias :)
ResponderSuprimirQué bien Fito, sólo elimina esta parte del CSS:
Suprimir.comments .avatar-image-container, .comments .avatar-image-container img { -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px; }
Ten cuidado de no borrar de mas o menos....
Suerte ;)
¡Listo! Quedó genial :) Gracias por tu rápida ayuda y gracias también por la guía sobre CSS, me ayudó a perder el miedo a este lenguaje, ya que estaba demasiado encasillado en el C, HTML y Java... no salía de ahí, pero ahora aprenderé CSS :) ¡Saludos!
SuprimirGracias por compartir Karla!! Pero tengo un problema, y es que no seme ven las imagenes de los avatares, se ven como si no tuvieran foto. Que podría estar pasando?
ResponderSuprimirMuchas gracias de antemano
Gracias Dácil, de nada :)
Suprimirmmm, no lo sé exactamente, pudiera haber algún error en el código, ¿hiciste algún cambio importante en la sección de los comentarios?
La opción más sencilla es "Restablecer plantillas de artilugios a los valores predeterminados" y eso lo haces en la edición de HTML de la plantilla, la limitación es que si hiciste cambios en el (X)HTML los vas a perder. Eso pudiera solucionar el problema, aunque tampoco es una garantía, si quieres lo puedes probar...
Suerte!
oye tengo un problema y es que modifique la olantilla y ahora no me aparecen la opcion de comentar y las reaciones que puedo hacer este es mi blog animaxion-mix.blogspot.mx
ResponderSuprimirLa opción más sencilla y rápida y en la que no tendrás que modificar nada en la edición de HTML de la plantilla, es "Restablecer plantillas de artilugios a los valores predeterminados" y eso lo haces en la edición de HTML de la plantilla, la opción viene abajo a la izquierda de la ventana que se abre al ingresar...La limitación es que si hiciste cambios en el (X)HTML los vas a perder. No me refiero al CSS personalizado que hayas agregado o a los gadgets, los cuales conservarás.
SuprimirSuerte!
gracias si me funciono para las reaciones pero siguen sin aparecer para comentar pero de todos modos gracias karla
SuprimirCon respecto al lo de la opción de comentar, ¿a qué te refieres exactamente?, tal vez sea algo que tengas que configurar en las opciones del panel...
Suprimir