{"id":15195735,"url":"https://github.com/wallneradam/jupyterlab-custom-css","last_synced_at":"2025-10-02T11:31:25.078Z","repository":{"id":35149329,"uuid":"213038893","full_name":"wallneradam/jupyterlab-custom-css","owner":"wallneradam","description":"Add custom CSS rules for JupyterLab","archived":true,"fork":false,"pushed_at":"2023-01-05T16:20:29.000Z","size":128,"stargazers_count":36,"open_issues_count":9,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-17T00:23:25.149Z","etag":null,"topics":["css","jupyterlab","jupyterlab-extension","notebook","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wallneradam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-05T17:09:08.000Z","updated_at":"2024-04-02T12:13:35.000Z","dependencies_parsed_at":"2023-01-15T14:49:24.323Z","dependency_job_id":null,"html_url":"https://github.com/wallneradam/jupyterlab-custom-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallneradam%2Fjupyterlab-custom-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallneradam%2Fjupyterlab-custom-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallneradam%2Fjupyterlab-custom-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallneradam%2Fjupyterlab-custom-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wallneradam","download_url":"https://codeload.github.com/wallneradam/jupyterlab-custom-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234983179,"owners_count":18917432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","jupyterlab","jupyterlab-extension","notebook","typescript"],"created_at":"2024-09-28T00:00:32.863Z","updated_at":"2025-10-02T11:31:19.767Z","avatar_url":"https://github.com/wallneradam.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# custom-css\n\nAdd custom CSS rules to JupyterLab\n\n## Usage\n\nAfter install the plugin, you should see an item called \"Custom CSS\" in the settings in \"Advanced Settings Editor\".\nHere you can specify any CSS rules you want.\n\n```javascript\n{\n    \"rules\": [\n        {\n            \"selector\": \".cls-parent .cls-child\",\n            \"styles\": [\n                \"max-height: 100px\",\n                \"font-size: 14px\"\n            ]\n        },\n        ...\n    ]\n}\n```\n\nThis will create an inline `\u003cstyle\u003e` element in the document's body.\n\nWhen you save changes it will immediately be active, so you don't need to restart JupyterLab.\n\n## Useful JupyterLab CSS tricks with custom-css\n\n### Enlarge output height when scrolling is enabled\n\n```javascript\n{\n    \"rules\": [\n        {\n            \"selector\": \".jp-CodeCell.jp-mod-outputsScrolled .jp-Cell-outputArea\",\n            \"styles\": [\n                \"max-height: 300px\"  // Original is 200px\n            ]\n        }\n    ]\n}\n```\n\n### Decrease output font size and make the same font for rendered HTML\n\n```javascript\n{\n    \"rules\": [\n        {\n            \"selector\": \".jp-OutputArea-output.jp-RenderedText pre, .jp-OutputArea-output.jp-RenderedHTMLCommon\",\n            \"styles\": [\n                \"font-family: var(--jp-code-font-family)\", // Make font the same as code font\n                \"font-size: 90%\"  // Make font smaller\n            ]\n        },\n\n        // Make tables the same font size as the other outputs\n        {\n            \"selector\": \".jp-RenderedHTMLCommon table\",\n            \"styles\": [\n                \"font-size: inherit !important\" // Make use the same size\n            ]\n        },\n    ]\n}\n```\n\n### Reorder sidebar icons\n\nYou can even reorder sidebar icons and tabs by CSS:\n\n```javascript\n{\n    \"rules\": [\n        // Set order to 50 for default\n        {\n            \"selector\": \".p-TabBar-tab\",\n            \"styles\": [\n                \"order: 50\"\n            ]\n        },\n        // File browser always the 1st\n        {\n            \"selector\": \".p-TabBar-tab[data-id='filebrowser']\",\n            \"styles\": [\n                \"order: 1\"\n            ]\n        },\n        // Below 50 will be at the top\n        {\n            \"selector\": \".p-TabBar-tab[data-id='extensionmanager.main-view']\",\n            \"styles\": [\n                \"order: 2\"\n            ]\n        },\n        // Over 50 will be at the bottom\n        {\n            \"selector\": \".p-TabBar-tab[data-id='command-palette']\",\n            \"styles\": [\n                \"order: 51\"\n            ]\n        }\n    ]\n}\n```\n\nSame technic could be good for menu entries and toolbar buttons (not tested).\n\n### Grayscale icon if the extension has color icon (which is awful, because every other icons are monochrome)\n\n```javascript\n{\n    \"rules\": [\n        // HDF5 toolbar icon\n        {\n            \"selector\": \".jp-HdfIcon\",\n            \"styles\": [\n                \"filter: grayscale(1) brightness(3.5)\"\n            ]\n        },\n    ]\n}\n```\n\n## Prerequisites\n\n* JupyterLab\n* Some CSS knowledge\n\n## Installation\n\n```bash\njupyter labextension install @wallneradam/custom_css\n```\n\n## Development\n\nFor a development install (requires npm version 4 or later), do the following in the repository directory:\n\n```bash\nnpm install\nnpm run build\njupyter labextension link .\n```\n\nTo rebuild the package and the JupyterLab app:\n\n```bash\nnpm run build\njupyter lab build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwallneradam%2Fjupyterlab-custom-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwallneradam%2Fjupyterlab-custom-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwallneradam%2Fjupyterlab-custom-css/lists"}