this new twitter layout is really really bad looking………. so lets do somethin about it!!
So…. were gonna make this crappy layout look better or as good as we can, just like my last guide, despite all the absolute trash they call design. web design since 2011 sucks and i hate it. f-ck bootstrap. f-ck interactivity. i miss brutalist websites. bring back geocities.
🚨🚨🚨🚨🚨🚨
so if you go to https://twitter.com/i/optout you can be magically taken back to the previous twitter layout, so keep this guide in mind for if you somehow can’t go back ever
🚨🚨🚨🚨🚨🚨
idk if you noticed or not but the new twitter layout is ugly as sh-t. its really bad. they have a sorta okay looking mobile app then shoehorned it into a webapp and it looks terrible. it’s really weird but with macOS Catalina adding in features to bring iOS versions of apps into macOS you’d think they wouldnt try pulling some design nonsense like they were gonna roll the twitter web site into electron or something
i could go on about this but lets get to the topic at hand. this medium post is going to be about refining twitter, just like my old post where i did the same thing with the old, less ugly layout. like that post, this one requires you to use ublock₀, a cross browser adblocking extension that can also block various page elements too. we’re gonna use the ability to block random stuff on a page to clean this up!
install the extension, open its preferences and select what you want from this giant list and paste this into the My Filters section. what’s different this time is that i’ve included options for almsot everything on the page that i thought was annoying. so if you wanna blcok and entire section you can but you can also copy and paste specific elements you want. i’ve broken this into sections so it reads from left to right on the screen.
# left side of timeline including entirety of the left panel
twitter.com##.r-1g40b8q.r-16y2uox.r-obd0qt.css-1dbjc4n# entire left panel including home, explore, notifications, etc
twitter.com##.r-o96wvk.r-d9fdf6.r-1rnoaur.r-1wtj0ep.r-1pi2tsx.css-1dbjc4n# twitter icon
twitter.com##.r-lrvibr.r-6416eg.r-o7ynqc.r-mk0yit.r-mtrfb5.r-1jayybb.r-1w2pmg.r-1loqt21.r-rs99b7.r-1phboty.r-sdzlij.r-42olwf.r-1niwhzg.css-1dbjc4n.css-18t94o4.css-4rbku5 > .r-qvutc0.r-q4m81j.r-bcqeeo.r-dnmrzs.r-eljoum.r-1777fci.r-vw2c0b.r-a023e6.r-1qd0xha.r-16y2uox.r-18u37iz.r-6koalj.r-13gxpu9.r-1awozwy.css-901oao# home button
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(1)# explore
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(2)# notifications
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(3)# messages
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(4)# bookmarks
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(5)# lists
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(6)# profile
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(7)# more
twitter.com##div.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1habvwh.css-1dbjc4n.css-18t94o4# tweet button
twitter.com##.r-e7q0ms.r-vpgt9t.css-1dbjc4n# box that says home with star emoji for timeline preferences (if you use this one you will break the search page lol)
twitter.com##.r-13qz1uu.r-utggzx.r-sb58tz.r-1jgb5lz.r-1777fci.r-1h3ijdo.r-18u37iz.r-1awozwy.css-1dbjc4n# home text
twitter.com##.r-qvutc0.r-bcqeeo.r-ad9z0x.r-1vr29t4.r-1b6yd1w.r-1qd0xha.r-hkyrab.css-bfa6kz.css-901oao.css-4rbku5 > .r-qvutc0.r-bcqeeo.r-ad9z0x.r-1qd0xha.css-16my406.css-901oao# home box with white space that pushes the star emoji to the right
twitter.com##.r-qvutc0.r-bcqeeo.r-ad9z0x.r-1vr29t4.r-1b6yd1w.r-1qd0xha.r-hkyrab.css-bfa6kz.css-901oao.css-4rbku5# star emoji and it’s bounding box
twitter.com##.r-18qmn74.r-1vsu8ta.r-1joea0r.r-1777fci.r-1pz39u2.r-obd0qt.css-1dbjc4n > .r-lrvibr.r-6416eg.r-o7ynqc.r-mk0yit.r-53xb7h.r-1vuscfd.r-1w2pmg.r-rs99b7.r-1phboty.r-sdzlij.r-42olwf.r-1niwhzg.css-1dbjc4n.css-18t94o4 > .r-qvutc0.r-q4m81j.r-bcqeeo.r-dnmrzs.r-eljoum.r-1777fci.r-vw2c0b.r-a023e6.r-1qd0xha.r-16y2uox.r-18u37iz.r-6koalj.r-13gxpu9.r-1awozwy.css-901oao# new tweet box with icons for gifs, polls, etc
twitter.com##.r-184en5c.r-1wqkr8a.r-utggzx.r-18u37iz.r-1loqt21.r-qklmqi.r-rull8r.r-my5ep6.r-14lw9ot.css-1dbjc4n.css-18t94o4.css-4rbku5# your user pic from this box
twitter.com##.r-4wgw6l.r-1gmbmnb.r-17s6mgv.r-1wbh5a2.r-16y2uox.r-18u37iz.r-1iusvr4.r-1awozwy.css-1dbjc4n# new tweet input box
twitter.com##.r-1w50u8q.r-1j3t67a.r-1wbh5a2.r-16y2uox.r-sdzlij.r-e84r5y.css-1dbjc4n# picture button
twitter.com##svg.r-qxctes.r-lrvibr.r-1plcrui.r-bnwqim.r-dnmrzs.r-1n0xq6e.r-195394p.r-yyyyoo.r-4qtqp9.r-13gxpu9:nth-of-type(1)# gif button
twitter.com##svg.r-qxctes.r-lrvibr.r-1plcrui.r-bnwqim.r-dnmrzs.r-1n0xq6e.r-195394p.r-yyyyoo.r-4qtqp9.r-13gxpu9:nth-of-type(2)# polls button
twitter.com##svg.r-qxctes.r-lrvibr.r-1plcrui.r-bnwqim.r-dnmrzs.r-1n0xq6e.r-195394p.r-yyyyoo.r-4qtqp9.r-13gxpu9:nth-of-type(3)# button that gives a context menu (looks like [^])
twitter.com##div:nth-of-type(6) > .r-1adg3ll.css-1dbjc4n > .r-1j63xyz.r-o7ynqc.r-1loqt21.css-1dbjc4n > .r-rjfia.r-1k3wbuw.r-utggzx.r-1udh08x.r-1loqt21.css-1dbjc4n > .r-thb0q2.r-18u37iz.css-1dbjc4n > .r-l4ido4.r-bcqeeo.r-5f2r5o.r-46vdb2.r-1iusvr4.css-1dbjc4n > .r-1mdbhws.r-156q2ks.r-1wtj0ep.r-18u37iz.css-1dbjc4n > div.r-1h0z5md.r-16y2uox.r-18u37iz.r-1iusvr4.css-1dbjc4n:nth-of-type(4) > .r-lrvibr.r-bztko3.r-11cpok1.r-1777fci.css-1dbjc4n.css-18t94o4 > .r-qvutc0.r-3s2u2q.r-clp7b1.r-o7ynqc.r-bcqeeo.r-ad9z0x.r-1h0z5md.r-16dba41.r-a023e6.r-1qd0xha.r-6koalj.r-1re7ezh.r-1awozwy.css-901oao > .r-xoduu5.css-1dbjc4n > .r-6416eg.r-o7ynqc.r-ipm5af.r-zchlnj.r-u8s1d.r-xf4iuw.r-1d2f490.r-xoduu5.r-1p0dtai.r-sdzlij.css-1dbjc4n# entire right bar containing search, trends, who to follow, etc
twitter.com##.r-m611by.r-1l5qxre.css-1dbjc4n# search box
twitter.com##.r-136ojw6.r-1ovo9ad.r-ipm5af.r-1xcajam.r-1vsu8ta.r-15d164r.r-1h3ijdo.r-18u37iz.r-14lw9ot.r-aqfbo4.r-1awozwy.css-1dbjc4n# trending topics
twitter.com##div.r-1udh08x.r-15d164r.r-rs99b7.r-1phboty.r-t23y2h.r-9cbz99.r-1u4rsef.css-1dbjc4n# footer box with terms, privacy policy, copyright, etc
twitter.com##.r-1sp51qo.r-1h0z5md.r-1w6e6rj.r-18u37iz.css-1dbjc4n# who to follow
twitter.com##div.r-1udh08x.r-15d164r.r-rs99b7.r-1phboty.r-t23y2h.r-9cbz99.r-1u4rsef.css-1dbjc4n:nth-of-type(4)
for an example, this is how i have mine set up:
the lines i added to my list in ublock look like this:
# twitter icon
twitter.com##.r-lrvibr.r-6416eg.r-o7ynqc.r-mk0yit.r-mtrfb5.r-1jayybb.r-1w2pmg.r-1loqt21.r-rs99b7.r-1phboty.r-sdzlij.r-42olwf.r-1niwhzg.css-1dbjc4n.css-18t94o4.css-4rbku5 > .r-qvutc0.r-q4m81j.r-bcqeeo.r-dnmrzs.r-eljoum.r-1777fci.r-vw2c0b.r-a023e6.r-1qd0xha.r-16y2uox.r-18u37iz.r-6koalj.r-13gxpu9.r-1awozwy.css-901oao# home button
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(1)# explore
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(2)# bookmarks
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(5)# lists
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(6)# profile
twitter.com##a.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1loqt21.r-1habvwh.css-1dbjc4n.css-18t94o4.css-4rbku5:nth-of-type(7)# more
twitter.com##div.r-13qz1uu.r-1ag2gil.r-1ny4l3l.r-16y2uox.r-eqz5dr.r-6koalj.r-1habvwh.css-1dbjc4n.css-18t94o4# tweet button
twitter.com##.r-e7q0ms.r-vpgt9t.css-1dbjc4n# entire right bar containing search, trends, who to follow, etc
twitter.com##.r-m611by.r-1l5qxre.css-1dbjc4n
its important to realize that modern web design is bullsh-t and everything since web 2.0 has been about exploiting your interactions for clicks and monetization. log off more often but if not, make the web simple
A couple notes………….
Blocking the majority of the elements will break the dang site because twitters layout is absolute trash and requires a whole lot of user acceptance as far as the garbage they want you to use. the entire site is ugly. the mobile app is ugly. mobile twitter is ugly. i get it, its synergy across platforms buyt like get a grip!!!! you gotta realize what and who you’re designing for.
after testing things out i unblocked the explore button so i could use search easier. also how i have the twitter bird icon blocked doesnt fully get rid of it, just hides it until you mouse over it to go back to the home page. thats alright i guess and is better than just having that there all the time.
ublock is kinda cool and the filters, white lists, my rules sections can be pretty powerful so heres some reading:
https://github.com/gorhill/uBlock/wiki/Static-filter-syntax for diving d33p
lifehax0rs article for newbies
