Modificar El Widget De Twitter

Inicio » CSS » Modificar el widget de twitter

Me he dado a la tarea de modificar el widget de twitter para cambiar un poco la apariencia. Es muy sencillo pero cuesta trabajo encontrar la información, así que decidí crear este pequeño artículo para explicarles.

En primer lugar el widget que vamos a modificar es el que usa este JS:

<script src="https://widgets.twimg.com/j/2/widget.js"></script>

Para cambiarle la fuente de color y el tamaño utilizamos el siguiente CSS:

<style type="text/css">
#twtr-widget-1 .twtr-bd, #twtr-widget-1 .twtr-timeline i a, #twtr-widget-1 .twtr-bd p {
color:#000000 !important;
font-size:0.9em;
}
</style>

Lo colocamos entre las etiquetas <head></head> de nuestro HTML.

Para remover los logos y poder hacer un diseño más integrado a nuestro sitio utilizamos el siguiente código CSS:

<style type="text/css">
.twtr-hd, 
.twtr-ft 

display: none; 
}
</style>

Con esto ya está 100% personalizado. Espero sea de ayuda.

¿Cómo citar? Del Moral, M. (s.f.). Modificar El Widget De Twitter.Ejemplo de. Recuperado el 26 de Septiembre de 2023 de https://www.ejemplode.com/18-css/1900-modificar_el_widget_de_twitter.html

CSS
Escrito por:
Mauricio del Moral Durán
Mauricio del Moral, fundador y creador de Ejemplo de, es un experto en enseñanza y un apasionado del ámbito educativo desde el año 2007. Ha dedicado una considerable parte de su vida profesional al estudio y al desarrollo de contenidos educativos en formatos digitales de alta calidad. Poseedor de una Licenciatura en Ciencias de la Comunicación, Mauricio es egresado de la prestigiosa Universidad Intercontinental.
Última modificación: 2011-10-05

Últimos 10 comentarios

  1. Saludos, se puede modificar el numero del contador de tweets? los he borrado todos pero el contador quedo igual. ojala se pueda modificar y ponerlo en cero. gracias
    Por Andres 2012-07-28 a las 7:30:31
  2. Muchas gracias, justo lo que buscaba.
    Por samuel 2012-06-29 a las 21:47:07
  3. un capo, lo voy a probar muchas gracias!
    Por wii 2012-01-17 a las 8:32:10
  4. Gracias por este artículo, creí que no funcionaría pero aún así copié el código y sí funcionó.
    Por Angeliv 2011-11-15 a las 0:17:04

Deja un comentario


Acepto la política de privacidad.