Design Tweets for Social Media Impact: A guide to Modifying Twitter Posts

Want to create visually appealing content on social media? Modifying the design of Twitter tweets can help. Use this JavaScript code to select a specific tweet, apply design changes using the “style” CSS property, and remove unwanted elements such as the “Tip” section or drop-down menu.
Simply copy and paste it into your browser’s console while on a tweet page. You can also save it as a .js file and load it using a script tag in the HTML. This code is particularly useful for creating visually striking content on social media and highlighting important messages on Twitter.
Ey, with a bit of creativity and CSS knowledge, you can also apply your own different styles and visual enhancements to a tweet to create impactful images. Remember to follow design best practices and use this technique responsibly and ethically. So, my code:
const tweet = document.querySelector(‘
article[role=”article“]’); // cambiamos el color de fondo
tweet.style.backgroundColor = ‘rgb(147, 212, 255)’;// cambiamos el color del texto
tweet.style.color = ‘rgb(255, 255, 255)’;// añadimos padding
tweet.style.padding = ’20px’;// añadimos borde redondeado
tweet.style.borderRadius = ’10px’;// aumentamos el tamaño del nombre del usuario
const nombreUsuario = tweet.querySelector(‘.css-1dbjc4n.r-1awozwy.r-18u37iz.r- 1wtj0ep.r-156q2ks’);
if (nombreUsuario) {
nombreUsuario.style.fontSize = ’20px’;
}// aumentamos el tamaño de la imagen de perfil
const imagenPerfil = tweet.querySelector(‘.css-1dbjc4n.r-1adg3ll.r-13qz1uu.r- 1udh08x.r-1gdplnk.r-1joea0r.r- 1wbh5a2.r-o7ynqc.r-6416eg.r- lrvibr’);
if (imagenPerfil) {
imagenPerfil.style.height = ’72px’;
imagenPerfil.style.width = ’72px’;
}// añadimos texto después del nombre de usuario
const nombreUsuarioLink = tweet.querySelector(‘.css-4rbku5.css-18t94o4.css- 1dbjc4n.r-1niwhzg.r-1loqt21.r- 1pi2tsx.r-1ny4l3l.r-o7ynqc.r- 6416eg.r-13qz1uu’);
if (nombreUsuarioLink) {
nombreUsuarioLink.insertAdjacentHTML(‘afterEnd’, ‘ – innovaCityEd.com’);
}// eliminamos el menú desplegable
const menu = tweet.querySelector(‘.css-1dbjc4n.r-14lw9ot.r-1p0dtai.r- 1d2f490.r-u8s1d.r-zchlnj.r- ipm5af.r-13qz1uu’);
if (menu) {
menu.remove();
}