I’ve put together some custom CSS to modify the looks of ChatGPT. I personally found the user interface unfriendly so if you’d like to modify the look of your ChatGPT then you can use the custom stylesheet I’ve created via a browser plugin. Keep in mind that these changes are just local to your machine and may stop functioning when OpenAI releases an update. This is what the changes look like - The explanation for all changes is under the image:
I’ve made the following changes:
-
Full width chat window so (almost) the entire width of the window is used. This is great for coding as you can read the code more easily without the need for sideway scrolling. The chat also doesn’t get long as quickly as more horizontal space is used.
-
Thicker scroll bars: The original scroll bars are very thin and I found it a nuisance to click on them. I’ve changed this for the vertical and horizontal scroll bars
-
Moved the scrollable area up and removed the empty space. The scroll bar now doesn’t sit at the bottom of the screen, so the new bottom starts right above the prompt input area.
-
Bigger scroll thumb. When the chat gets longer, the scroll bar thumb gets smaller and smaller. I’ve set a minimum height so it doesn’t get too small. A larger thumb also makes the scrolling faster.
-
Moved the regenerate button under the prompt input and added text, so it now reads: Regenerate last response. I’ve also given it a red background color.
-
Moved the “copy code” icon and text to the left top of the code window, increased the size and added a blue background color.
-
Removed the prompt suggestions that were added recently. I find them useless and distracting so got rid of them.
-
Alternating chat background colors.
-
Some other minor changes which are all described properly in the code comments.
If you want to use this, you need to install a browser plugin to allow to you add custom CSS to a website/domain. I’ve used Custom CSS by Denis which is a chrome browser plugin you can also use for Edge. There are various extensions which can do the same and it doesn’t really matter which one you pick. You simply install the plugin, make it visible in the browser top bar by clicking the little puzzle icon, followed by the “eye” next to it:
Next, you open the chatgpt window and click on the little CSS icon in the browser top bar:
Grant permission for the plugin and paste the following code block in the editor of the custom css tool. You can easily remove or edit the changes to your own liking. The comments are between:
/* comment*/ which is followed by the CSS for the commented change:
/* Wider chat window */
.gizmo .gizmo\:xl\:max-w-\[48rem\] {
max-width: 100%;
}
/*Wider prompt entry*/
.xl\:max-w-3xl {
max-width: 96%;
}
/*Alternating chat background color*/
.w-full.text-token-text-primary.border-b.border-black\/10.gizmo\:border-0.dark\:border-gray-900\/50.gizmo\:dark\:border-0.bg-gray-50.gizmo\:bg-transparent.dark\:bg-\[\#444654\].gizmo\:dark\:bg-transparent {
background: #1b1818;
margin: 10px;
}
/* remove grey space */
.md\:h-48 {
height: 1rem;
}
/* Move scrollable area up*/
[class^="react-scroll-to-bottom--"] {
height: 87%;
overflow-y: auto;
width: 100%;
overflow-x: hidden;
}
/* Increase side scroll bar width*/
[class^="react-scroll-to-bottom--"]::-webkit-scrollbar {
width: 20px;
}
/* Increase side scroll bar thumb and scroll speed*/
[class^="react-scroll-to-bottom--"]::-webkit-scrollbar-thumb {
min-height: 40px;
}
/* Remove prompt suggestions */
button.btn.relative.btn-neutral.group.w-full.whitespace-nowrap.rounded-xl.text-left.text-gray-700.dark\:text-gray-300.md\:whitespace-normal {
display: none;
}
/* Move regenerate button under the prompt input */
.md\:items-end {
align-items: flex-end;
position: absolute;
left: 0;
bottom: -45px;
}
/* Add red bg color to regenerate button*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border {
border-radius: 10px;
background: #ee0008;
border: 1px solid #ee0008;
color: #fff
}
/* Regenerate button hover*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border:hover {
background: #9c1519;
border: 1px solid #9c1519;
transition: 0.25s;
}
/* Add "response" to regenerate button*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border .flex.w-full.gap-2.items-center.justify-center:after {
content: "last response";
}
/* Increase horizontal code scroll bar height */
.p-4.overflow-y-auto::-webkit-scrollbar {
height: 20px;
}
/* Move copy code to the left side */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
/* Change the copy code into a button */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2 {
margin: 0 10px 0 0;
align-items: center;
background: #3f51b5;
padding: 5px 10px;
border-radius: 5px;
min-width: 60px;
}
/* Hover state for copy button*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2:hover {
background: #2196F3;
transition: 0.25s;
}
/* Increase size of copy code clipboard*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md svg.h-4.w-4 {
width: 25px;
height: 25px;
}
/* Increase the size of the main copy to clipboard*/
button.flex.ml-auto.gap-2.rounded-md.p-1.hover\:bg-gray-100.hover\:text-gray-700.dark\:text-gray-400.dark\:hover\:bg-gray-700.dark\:hover\:text-gray-200.disabled\:dark\:hover\:text-gray-400 svg.h-4.w-4 {
width: 50px;
height: 50px;
}
/* Move clipboard icon below the response rating*/
.text-gray-400.flex.self-end.lg\:self-center.justify-center.mt-2.gap-2.md\:gap-3.lg\:gap-1.lg\:absolute.lg\:top-0.lg\:translate-x-full.lg\:right-0.lg\:mt-0.lg\:pl-2.visible {
display: flex;
flex-direction: column-reverse;
}
The changes should be instantly visible
