I'm writing this on my big 38-inch ultra-wide monitor in my office, which also happens to benefit from a spare 27-inch screen on the side. But I often catch up on my email using a machine that has a tiny 1600x900 screen.
Also: How to back up your Gmail: The ultimate guide for 2020
On that screen, every pixel counts. So, when Google added the interface for Meet right at the bottom of my folders, I felt it. While I could certainly scroll to get to those labels, my label arrangement has been built up over time and fits my productivity perfectly.
There is a handle that reduces the size of that area, but it won't close completely. The lines beginning in Meet, Start, and Join keep the obstructing area about three lines too high.
I wanted those pixels back. In this article, I'm going to show you some behind-the-scenes tricks that will allow you to tinker with your live web pages and sometimes make changes that will improve what you see.
Also: Five secret tricks only serious Gmail ninjas need to know
I did a similar hack back in 2015 when Todoist changed its icon colors. The trick is to modify the CSS of the web app, and then use a Chrome extension to make that hack stick.
Identifying the CSS
Let's start by identifying the CSS. To do that, we'll use Chrome's built-in Inspector. Most browsers have something similar, so if you're using Edge. Firefox, or Safari, this should work similarly on those browsers.
First, right-click on the area you want to change, and select Inspect from the pop-up window.
An HTML inspector will show up on the left side of the screen. I like to use the element selector to find the HTML I want to work with.
Next, move around on the page until you've highlighted the block you want to deal with.
Once you find the block you want, click, and you'll select the HTML.
What you want to do next is right-click and choose Copy Selector from the Copy menu. This will put the following line on your clipboard.
body > div:nth-child(21) > div.nH > div > div.nH.bkL > div.no > div.nH.oy8Mbf.nn.aeN > div.akc.aZ6.YX > div.YM.pp.Zk.aj3
That is your selector. A selector is the address on the DOM (document object model) for the webpage. It's the way you tell CSS how to specifically target a chunk of code.
Also: Gmail quick tip: Use color-coded labels to organize your inbox
Now change the styles
To change the styles on a semi-permanent basis, I like to use the StyleBot Chrome extension. It will put a little tiny CSS icon on your browser bar. Click on it and select Open Stylebot.
You'll see a screen like this:
Select Edit CSS. Into that area, paste your selector.
After, you'll want to add the following, an open bracket, the words "display:none;" and a close bracket. Here's how it looks:
Hit Save at the bottom right side of your Gmail screen and look at the bottom left. Notice that the Meet text is gone.
Go ahead and close the StyleBot panel by clicking the X at the upper right corner.
Finally, hover over the top of the newly blank area until the little horizontal line dragging bar shows up, and pull it down.
Now, whenever you go to your Gmail, you'll be able to drag the obstructing block down and reclaim those three covered-up email labels.
And, if you ever do want the Meet menu back, you can go back into StyleBot, go back into Edit CSS and either delete the styling or wrap it in /* */ comment tags. That disables the CSS inside them from running, but lets you keep the code for later removal or further tinkering.
Also: Gmail quick tip: How to search in your inbox Primary category only
That, kiddies, is how you hack a web app to make it do what you want it to do. Have fun. Oh, and understand that if Google changes its code, the hack may stop working. That's why you want to know how to do it, not just copy it from my article.
Practice. I've used this technique a bunch of times to overcome web-based annoyances. You can use this technique on almost any web page and change how it presents itself to you. Just note: if you have multiple machines, the stylebot settings won't sync. You'll have to paste your custom styles in on each machine.
Have you customized the style of web apps or web pages? Let us know in the comments below.
You can follow my day-to-day project updates on social media. Be sure to follow me on Twitter at @DavidGewirtz, on Facebook at Facebook.com/DavidGewirtz, on Instagram at Instagram.com/DavidGewirtz, and on YouTube at YouTube.com/DavidGewirtzTV.
"Give" - Google News
June 01, 2020 at 10:05PM
https://ift.tt/3ezySm0
Regaining Gmail screen space: A nice hack to give you more breathing room - ZDNet
"Give" - Google News
https://ift.tt/2YqGX80
https://ift.tt/2YquBwx
Bagikan Berita Ini
0 Response to "Regaining Gmail screen space: A nice hack to give you more breathing room - ZDNet"
Post a Comment