LetMyPeopleCode.com

A blog about software, schmaltz, and monkey-patches for the soul

Menu
  • About Greg Bulmash
  • Greg Talks Tech
  • Privacy Policy
Menu

Fixing Adobe Commerce / Magento Dev Docs: Widen the right navbar

Posted on May 21, 2022May 21, 2022 by Greg Bulmash

The problem: Magento Developer Docs right navigation column is TOO narrow.

I’m writing my first Magento extension. If you’re not familiar with it, it is also known as Adobe Commerce and it’s one of the most widely used ecommerce software packages around, like the WordPress of ecommerce.

This requires going through Adobe’s developer documentation site where I found a very annoying feature.

The site navigation in a column on the right is fine, but the index of a page’s sections is in a column on the right. This becomes particularly useless when the page has a ton of sections and the section names have any length, because even on a maximized browser on a WQHD (2560×1440) resolution screen, the column is 200 pixels wide (including some padding and indents). For example, on Firefox, their events list, it looks something like this.

The solution: A Bookmarklet

You can go in and change that width in the F12 developer tools, but Firefox doesn’t support saving a local override via the dev tools. You’d have to manually go in and edit the page every time you loaded it. That’s a lot of steps, but we can reduce it to one.

And this is where bookmarklets come in. They are bookmarks with JavaScript as the URL. You can actually get pretty complex with what they do, but this one will do one simple thing… make the right column wider.

  1. In Firefox, Control + Shift + O (for Windows or Linux) to open the Bookmarks Manager.
  2. Select the Bookmarks toolbar folder
  3. Right-click it and select “Add Bookmark”
  4. Name the bookmark whatever you want, maybe ADWiden.
  5. In the URL space, copy and paste in one line of JS:
        javascript: (() => { let sidebar = document.getElementsByClassName('page-info')[0]; sidebar.style.width="500px"; })();
  6. Save the bookmark.
  7. Click the bookmark.

This widens the right column by 300 pixels to 500. At that point, at least on my screen, everything seems to fit.

The feature is very similar for edge and Chrome. Also, if you want to expand this into a larger script, you can use document.documentURI to detect what page you’re on, so the script can define different actions for different domains, URLs, etc.

Enjoy!

Related

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • Job Hunt Diary 2023: Verizon Is Passive-Aggressive?
  • Job Hunt Diary 2023: Eliciting Responses
  • Job Hunt Diary 2023: And so on, and so on…
  • Job Hunt Diary 2023: Freelancing and warning words
  • Job Hunt Diary 2023: Not all job fairs are created equal

Archives

  • March 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • September 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • November 2021
  • May 2021
  • April 2020
  • March 2020

Categories

  • Apps
  • Computing
  • Frameworks and Libraries
  • Games
  • Hacks
  • Hardware
  • JavaScript
  • Mac
  • Mobile
  • Other Art Projects
  • Productivity
  • Programming
  • Projects
  • Python
  • Society & Culture
  • Teaching Code
  • Tech Career
  • Uncategorized
  • WebTech
  • Writing

Tag Cloud

Adobe advertising bad ads browser hunt clown car code sample comcast commute copy writing CX design Developer Relations dev rel evernote game demo google drive hardware review health home office home studio internet interview questions j job hunt job hunt diary Mac magento meta-coding OneNote PEO productivity review speedtest t-mobile Windows xfinity

©2023 LetMyPeopleCode.com | Theme by SuperbThemes