Edivations

Subscribe
Archives
August 23, 2024

Banish CMOS’s Sidebar & Create Image Alt Text with AI

I'm excited about this newsletter since one of these topics may help people with an annoyance related to the new CMOS website design choices.

Today's Topics

  • Tech News
    • Instagram is Adding Profile Songs
    • Apple Has Extended the AppleCare+ Renewal Time
  • Prompt: Image Alt Text Generator
  • Guide: Hiding the Yellow Sidebar on CMOS Online
    • Chrome
    • Safari
    • Firefox
    • Brave

Tech News

Instagram is Adding Profile Songs

instagram-logo.jpg

Instagram appears to be slowly rolling out a new feature that allows you to add a song to your profile similar to what we used to do on MySpace. So far, of my four Instagram accounts (don’t judge me), only one has the new feature. To check if you have it, follow these steps:

  1. Go to your profile.
  2. Select Edit profile.
  3. In the list of options that show up, look for Music. If you have it, it’ll be between Banners and Gender.
  4. Select Music.
  5. You’ll then see a new area where it'll say Profile song with a + below it. Select the +.
  6. At this point, you select a song just like you normally would for any of your posts, and you’re required to trim the audio to a thirty-second portion.

Apple Has Extended the AppleCare+ Renewal Time

apple-1200.jpg

If you ever let your AppleCare+ coverage expire, you now have 45 days instead of 30 days to renew it. To read more about who qualifies and how to check when your coverage ended, go here: https://support.apple.com/en-us/101560


Prompt: Image Alt Text Generator

Alt text is a typed description of images destined for social media, websites, or newsletters. The purpose of it is to convey what the images show to people who can't clearly see them. Plus it helps with SEO and newsletter deliverability.

If you're like me and either are horrible at writing these descriptions or simply don't like writing them, then you may like having an AI creating these descriptions for you for free.

To do this, upload the image that you want the alt text for along with a prompt below.

Generate alt text for the attached image. The alt text should be optimized for people who are blind or have low vision. The description should be concise yet detailed enough to convey the essential content and context of this specific image. Avoid unnecessary details, but ensure that all relevant elements are described to provide an equivalent experience for users who cannot see the image clearly or at all. The alt text should be between 50 to 100 characters and focus on the most important aspects of the image. Don't respond with anything else but the alt text, and I may ask you to redo it if I think you can think of something better.

Here are some AIs that allow free image uploads so you can use this prompt.

  • Google Gemini: https://gemini.google.com/app
  • OpenAI ChatGPT: https://gemini.google.com/app
  • Microsoft Copilot: https://copilot.microsoft.com/

Guide: Hiding the Yellow Sidebar on CMOS Online

cmos-online-with-yellow-sidebar.jpg

That sidebar is just awful, isn't it? It's simply there hogging precious screen space. While I hope Chicago will fix this on their own, I think it's best we use a little trick to get rid of it ourselves. What we're going to be doing is telling our browser to ignore the website's code for that left sidebar, and poof, the side bar will be entirely gone.

Not every browser is the same, so scroll down until you find the browser you typically use to view CMOS.

Chrome

  1. Go to this extension page for AdGuard: https://chromewebstore.google.com/detail/adguard-adblocker-mv3-bet/apjcbfpjihpedihablmalmbbhjpklbdf

  2. Click on the blue Add to Chrome.

  3. A window will appear in the middle of the screen. Click on Add extension.
    adguard-add-extension.png

  4. A new tab window may appear asking you to install their app on your computer. You don’t need the app for what we’re doing, so just click Continue with extension.

  5. A pop-up will appear explaining what you need to do next. Click on the puzzle piece icon in your browser menu and click the pin icon next to AdGuard. Go ahead and click the X in the top-right of that info window to close it and follow its instructions. This adds the extension between the address bar and extension icon.
    pin-adguard.jpg

  6. Click on the green AdGuard icon in your browser menu.

  7. An interface for the extension will appear. Click on the gear icon in the top-right to open the extension’s settings.
    adguard-gear-icon.jpg

  8. A new window tab will appear with the settings area. Click on User rules in the left menu.
    adguard-side-menu.png

  9. You’ll see a new area with a window that allows input, and this is where you’ll paste this: chicagomanualofstyle.org###left-sidebar and click Save. (This tells the browser to ignore loading the left sidebar at CMOS’s website.)
    adguard-addition.jpg

  10. Close this tab.

  11. Reload or visit the Chicago Manual of Style Online website.
  12. And there you go! That horrible left sidebar is gone!

Undoing This

I’m hoping Chicago will fix their website, and if they do, then you might want to reverse the alteration you made to the website’s appearance. Here’s the instructions for this. Click on the green AdGuard icon in your browser, click on the gear icon to load settings, click on User rules, delete the corresponding line in the input window, and click on the green Save button.

Safari

  1. Click on the following link to get to Userscripts: https://apps.apple.com/us/app/userscripts/id1463298887
  2. After you load the webpage, it will either automatically open the Apple App Store or will ask you if it can open it in the App Store, which you should.
  3. Click on the green Get button. (If you’ve installed it before, it’ll be the blue download icon.)
  4. Go into Safari and press ⌘, (command and comma) to bring up the browser’s settings.
  5. The settings window will appear. Click on the Extension option from the top options.
    settings-extensions-1200.jpg
  6. In the Extensions area, click Usercripts from the left list of extensions available for Safari. After selecting the extension, click the check mark area so a blue check mark appears to the left of Userscripts. It should look like the image below.
    extension-usserscripts.jpg
  7. Close the settings window.
  8. You should now see the Userscript extension icon immediately to the left the address bar.
    Browser address bar with a red arrow pointing to a userscript icon next to a warning symbol.

  9. Click on the Userscript extension icon, and a small window will open that asks you if it can access the website you’re on. Choose whichever of the three options you prefer. If you don’t see this, then go to the next step.
    Screenshot showing a userscript permission prompt for allowing a script on a specific website.

  10. Click on the Userscript extension icon, and a small window will open. Click on Open Extension Page that’s at the bottom of this small window.
    Screenshot showing two red arrows pointing at the userscript icon and 'Open Extension Page' link.

  11. A new window tab will open with the Userscripts settings. Click on the + icon in the top-left area that’s just to the right of the search bar. A small drop-down menu will appear with three choices. Click New JS.

    One arrow points to a plus and a second to a button saying New JS.

  12. A new item will show up in the left menu, and in the right area you'll see a faint example script that's a few lines long. Delete all the example script that’s in the right window. Next, paste the script below into the window and click the blue Save at the bottom-right of the browser window.

    // ==UserScript==
    // @name        Hide Sidebar on CMOS Online
    // @description Hides the left sidebar on the CMOS website.
    // @match       *://*.chicagomanualofstyle.org/*
    // ==/UserScript==
    document.getElementById('left-sidebar').style.display = 'none';
    

  13. This is what you should be seeing now.
    Script to hide sidebar on CMOS website, showing code and enabled toggle switch.

  14. Leave this tab with the script open and open another tab where you'll go to Chicago Manual of Style's website. https://www.chicagomanualofstyle.org You should notice that the yellow sidebar is gone. If it's not, return to the tab with the script and check the script.

Firefox

  1. Go to this extension page: https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/
  2. Click the blue Add to Firefox button.
  3. A window in the top-right of your browser will appear. This is verifying that you want to add the extension and what permissions it will be granted. Click Add.
  4. You should now see a little red icon in the top-right of your browser next to the download icon. It should look like this:

    Image description

  5. Click on the red icon, and a menu will pop down.

  6. In the botton-left of the menu, you’ll see More. Click that to reveal a few options, one of which we’re about to use.
    ublock-origins-more-button.jpg

  7. Go to CMOS Online if you aren’t already there.

  8. Click on that amazing and magical dropper. Your browser window will get darker, and you’ll notice that certain portions of the webpage will light up when you mouse over them.
    Image description

  9. Place your cursor in the yellow side bar and below the logo until you see the entire yellow sidebar is selected, and now left click.
    selected-sidebar.jpg

  10. A window will appear in the bottom-right of the browser, and you’ll notice it mentioning ###left-sidebar. Click Create.
    confirm-window.jpg

And that’s it!

Undoing This

If you want to undo this, or undo any other changes you make to website, then click on the extension icon like normal, click the gears icon that’s to the right of the dropper we just used, click on My filters from the top menu of the window that just appeared, delete the line that relates to the change you just made to a website, and click Apply changes in the top-left.

Brave

Brave

  1. Go to this extension page: https://chromewebstore.google.com/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm
  2. Click the blue Add to Brave button.
  3. A window will appear. Click Add extension.
  4. Click on the puzzle piece icon that's in the top-right corner of the browser, which looks like this:
    Image description
  5. A drop-down menu will appear. Click on the thumbtack icon next to the Ublock Origin icon so it turns solid blue like below.
  6. The Ublock Origin extension should now be visible next to the puzzle piece icon you just clicked earlier.
  7. Click on the red icon, and a menu will pop down.
  8. In the botton-left of the menu, you’ll see More. Click that to reveal a few options, one of which we’re about to use.
    ublock-origins-more-button.jpg

  9. Go to CMOS Online if you aren't there already.

  10. Click on that amazing and magical dropper. Your browser window will get darker, and you’ll notice that certain portions of the webpage will light up when you mouse over them.
    Image description

  11. Place your cursor in the yellow side bar and below the logo until you see the entire yellow sidebar is selected and left click.
    selected-sidebar.jpg

  12. A window will appear in the bottom-right of the browser, and you’ll notice it mentioning ###left-sidebar. Click Create.
    confirm-window.jpg

And that’s it!

Undoing This

If you want to undo this, or undo any other changes you make to website, then click on the extension icon like normal, click the gears icon that’s to the right of the dropper we just used, click on My filters from the top menu of the window that just appeared, delete the line that relates to the change you just made to a website, and click Apply changes in the top-left.

Image description


Closing

Well, I hope some of you found the guide, prompt, or tech updates useful. If you think someone you know might find this newsletter useful, please mention it or forward this newsletter. It would mean a lot to me because I’d love for my geeky interests to help my fellow editors.

“We rise by lifting others.”
— Robert Ingersoll

AI-Assisted Editing
While this newsletter is written by me, AI tools are used to help me copyedit my content, format the newsletter, brainstorm titles, troubleshoot issues, and generate alt text for images.

Don't miss what's next. Subscribe to Edivations:
Powered by Buttondown, the easiest way to start and grow your newsletter.