Skip to content

Instantly share code, notes, and snippets.

Last active July 19, 2022 01:30
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
GitHub New GUI Customization
GitHub New GUI Customization
2022-7-19 v1.09
@-moz-document domain("") {
/* width >= 768px */
@media (min-width: 768px) {
/* narrow width of sidebar */
turbo-frame > #repo-content-pjax-container > div > div > .Layout.Layout--sidebarPosition-end,
turbo-frame > div > div:not(#wiki-content) > .Layout.Layout--sidebarPosition-end {
--Layout-sidebar-width: 170px !important;
/* don't omit important label 'commits' */
.repository-content span[aria-label^="Commits"] {
display: inline !important;
/* width >= 1280px */
@media (min-width: 1280px) {
/* limit content width to 1280px */
body {
width: 1280px !important;
margin-right: auto !important;
margin-left: auto !important;
/* make avatar icon square */
/* (if you want to set border-radius to 0, */
/* you must change another classes too.) */
.avatar-user, .avatar {
border-radius: 10% !important;

GitHub New GUI Customization

File : 3022_github_newgui_custom.txt

This is a mozilla format css style file.

It can be installed in Google Chrome extension 'Stylus' .
( )

  1. Installation
    1. Install 'Stylus' to Google Chrome

    2. Open Stylus's style manager

      • Click the extensions icon in the Google Chrome's toolbar.
      • Select 'Stylus' in the menu.
      • Click 'Manage' button in the popup menu.
    3. Create a new style

      • Click 'Write new style' button.
        (At this time, 'as Usercss' checkbox must be off)
      • Input the name of the style such as 'GitHub New GUI Customization'.
    4. Import the mozilla format css style file

      • Click 'Import' button in the 'Mozilla Format' section.
      • Open the mozilla format css style file (3022_github_newgui_custom.txt)
        by text editor such as 'notepad'.
      • Copy and paste the all text data in the file to the textarea in the browser.
      • Click 'Overwrite style' button.
    5. Save the new style

      • Click 'Save' button.
      • Click 'Back to manage' button and confirm the new style exists.


Copy link

Hamayama commented Aug 8, 2020

Spec :


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment