-
-
Save alexchexes/d2ff0b9137aa3ac9de8b0448138125ce to your computer and use it in GitHub Desktop.
| // ==UserScript== | |
| // @name ChatGPT CSS fixes | |
| // @version 2024-11-08 | |
| // @updateURL https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js | |
| // @downloadURL https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js | |
| // @namespace http://tampermonkey.net/ | |
| // @description Adjusts width of side bar and messages of the ChatGPT web interface | |
| // @author alexchexes | |
| // @match https://chat.openai.com/* | |
| // @match https://chatgpt.com/* | |
| // @icon https://www.google.com/s2/favicons?sz=64&domain=openai.com | |
| // @grant GM_addStyle | |
| // ==/UserScript== | |
| /* global GM_addStyle */ | |
| console.info('%c\'ChatGPT CSS fixes\' userscript is connected', 'color: #8ff; background: #000'); | |
| (function() { | |
| const accentForDark = `#f39c12`; | |
| const defaultSettings = { | |
| /* CHAT ELEMENTS */ | |
| chatWidth: { | |
| enabled: true, | |
| maxWidth: `90%`, | |
| }, | |
| codeBlockFont: { | |
| enabled: true, | |
| fontFamily: `Consolas`, | |
| }, | |
| codeBlockBackground: { | |
| enabled: true, | |
| bgColorDark: `#181818`, | |
| // bgColorLight: `#252525`, | |
| }, | |
| codeBlockLineBreaks: { enabled: true }, | |
| codeBlocksInUserMessages: { enabled: true }, | |
| userMessageVisibility: { | |
| enabled: true, | |
| backgroundDark: `linear-gradient(45deg, #3c4b83, #343a79)`, | |
| backgroundLight: `#c1d6f6`, | |
| }, | |
| botAvatarVisibility: { enabled: true }, | |
| /* TOP BAR */ | |
| topBarTransparency: { enabled: true }, | |
| gptVersionVisibility: { | |
| enabled: true, | |
| color: accentForDark, | |
| }, | |
| /* SIDEBAR */ | |
| sidebarWidth: { | |
| enabled: true, | |
| sidebarWidth: `330px`, | |
| }, | |
| sidebarHeadingsVisibility: { | |
| enabled: true, | |
| color: accentForDark, | |
| }, | |
| multilineHistoryTitles: { | |
| enabled: true, | |
| }, | |
| }; | |
| const constructFeaturesCss = () => { | |
| const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style*="260px"]`; | |
| const cssByFeature = { | |
| /*------------------------------* | |
| * CHAT ELEMENTS * | |
| *-------------------------------*/ | |
| /* Main chat section width */ | |
| chatWidth: ` | |
| @media (min-width: 1280px) { | |
| .xl\\:max-w-3xl { | |
| max-width: ${defaultSettings.chatWidth.maxWidth} !important; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .lg\\:max-w-\\[38rem\\] { | |
| max-width: ${defaultSettings.chatWidth.maxWidth} !important; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .md\\:max-w-2xl { | |
| max-width: ${defaultSettings.chatWidth.maxWidth} !important; | |
| } | |
| .md\\:max-w-3xl { | |
| max-width: ${defaultSettings.chatWidth.maxWidth} !important; | |
| } | |
| } | |
| `, | |
| /* Code blocks font */ | |
| codeBlockFont: ` | |
| code, pre { | |
| font-family: ${defaultSettings.codeBlockFont.fontFamily}, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important; | |
| } | |
| `, | |
| /* Code blocks background color */ | |
| codeBlockBackground: ` | |
| /* DARK */ | |
| html.dark pre > div.rounded-md { | |
| background-color: ${defaultSettings.codeBlockBackground.bgColorDark}; | |
| } | |
| `, | |
| /* Break lines in code blocks */ | |
| codeBlockLineBreaks: ` | |
| code, code.\\!whitespace-pre { | |
| white-space: pre-wrap !important; | |
| } | |
| `, | |
| /* Code blocks inside user messages */ | |
| codeBlocksInUserMessages: ` | |
| /* inline code */ | |
| [data-message-author-role="user"] div > code { | |
| background: #00000030; | |
| border-radius: 11px; | |
| padding: 2px 5px; | |
| } | |
| /* multiline code blocks */ | |
| [data-message-author-role="user"] pre { | |
| background: #00000030; | |
| padding: 2px 7px; | |
| border-radius: 11px; | |
| } | |
| /* multiline code blocks FONT SIZE */ | |
| [data-message-author-role="user"] pre > code { | |
| font-size: 14px; | |
| } | |
| `, | |
| /* Make our messages more visible. */ | |
| userMessageVisibility: ` | |
| /* DARK */ | |
| html.dark [data-message-author-role="user"].text-message > .flex.w-full.flex-col > .bg-token-message-surface { | |
| background: ${defaultSettings.userMessageVisibility.backgroundDark}; | |
| } | |
| /* LIGHT */ | |
| html.light [data-message-author-role="user"].text-message > .flex.w-full.flex-col > .bg-token-message-surface { | |
| background: ${defaultSettings.userMessageVisibility.backgroundLight}; | |
| } | |
| `, | |
| /* Make bot message start more visible by increasing visibility of its avatar. */ | |
| botAvatarVisibility: ` | |
| /* DARK */ | |
| html.dark .gizmo-bot-avatar > div { | |
| background: linear-gradient(45deg, #3F51B5, #00BCD4); | |
| } | |
| html.dark .gizmo-bot-avatar { | |
| outline: none; | |
| } | |
| /* LIGHT */ | |
| html.light .gizmo-bot-avatar > div { | |
| background: #252525; | |
| color: #ffffff; | |
| } | |
| `, | |
| /*----------------* | |
| * TOP BAR * | |
| *-----------------*/ | |
| /* Make top bar transparent as it consumes vertical space for no reason */ | |
| topBarTransparency: ` | |
| html div.sticky.top-0.flex.items-center.justify-between.z-10.font-semibold { | |
| background-color: rgba(0,0,0,0); | |
| } | |
| /* Background for top bar element that shows the current GPT version */ | |
| /* DARK */ | |
| html.dark .sticky.top-0 [type="button"]:not(:hover) { | |
| background-color: #0000001f; | |
| border-radius: 8px; | |
| } | |
| /* LIGHT */ | |
| html.light .sticky.top-0 [type="button"]:not(:hover) { | |
| background-color: #ffffffb0; | |
| border-radius: 8px; | |
| } | |
| `, | |
| /* GPT version visibility */ | |
| gptVersionVisibility: ` | |
| /* DARK */ | |
| html.dark .sticky.top-0 [type="button"] > div > span.text-token-text-secondary { | |
| color: ${defaultSettings.gptVersionVisibility.color}; | |
| } | |
| /* LIGHT */ | |
| html.light .sticky.top-0 [type="button"] > div > span.text-token-text-secondary { | |
| color: #000; | |
| } | |
| `, | |
| /*------------------* | |
| * SIDEBAR * | |
| *-------------------*/ | |
| /* Sidebar width */ | |
| sidebarWidth: ` | |
| @media not all and (max-width: 768px) { | |
| ${sidebar_container_selector}, | |
| ${sidebar_container_selector} .w-\\[260px\\] { | |
| width: ${defaultSettings.sidebarWidth.sidebarWidth} !important; | |
| } | |
| } | |
| `, | |
| /* History periods headings (like "Today", "Yesterday") visibility */ | |
| sidebarHeadingsVisibility: ` | |
| /* DARK */ | |
| html.dark ${sidebar_container_selector} h3 { | |
| color: ${defaultSettings.sidebarHeadingsVisibility.color}; | |
| } | |
| /* LIGHT */ | |
| html.light ${sidebar_container_selector} h3 { | |
| font-weight: 700; | |
| } | |
| `, | |
| multilineHistoryTitles: ` | |
| ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap { | |
| overflow: visible; | |
| white-space: unset; | |
| } | |
| ol > li:not(:hover) > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent { | |
| background-image: none; | |
| } | |
| `, | |
| }; | |
| // Adding a unique string to find our <style> element later | |
| let cssStyles = `/* USERSCRIPT_FEATURES_STYLES */`; | |
| // Combine feature CSS blocks into a single CSS string if enabled in the current settings | |
| for (let key in cssByFeature) { | |
| if (Object.prototype.hasOwnProperty.call(cssByFeature, key)) { | |
| if (typeof defaultSettings[key] !== 'undefined' && defaultSettings[key].enabled) { | |
| cssStyles += cssByFeature[key] + '\n'; | |
| } | |
| } | |
| } | |
| cssStyles = cssStyles.replaceAll("\t", ' '); | |
| return cssStyles; | |
| }; | |
| const renderFeaturesStyles = () => { | |
| const css = constructFeaturesCss(); | |
| GM_addStyle(css); | |
| }; | |
| /* Stub for the later feature update */ | |
| // const removeFeaturesStyles = () => { | |
| // let style_elements = document.querySelectorAll('style'); | |
| // style_elements.forEach(style_el => { | |
| // if (style_el.innerHTML.includes('USERSCRIPT_FEATURES_STYLES')) { | |
| // style_el.remove(); | |
| // } | |
| // }); | |
| // }; | |
| renderFeaturesStyles(); | |
| })(); |
Same but without the theme changes:
// ==UserScript==
// @name ChatGPT CSS fixes
// @version 2024-05-15
// @namespace http://tampermonkey.net/
// @description Adjusts width of side bar and messages of the chatGPT web interface
// @author alexchexes
// @match https://chat.openai.com/*
// @match https://chatgpt.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @grant none
// ==/UserScript==
(function() {
const accentColor = `#f39c12`;
const messagesCss = `
/* Message body width */
@media (min-width: 1280px) {
.xl\\:max-w-3xl {
max-width: 90% !important;
}
}
@media (min-width: 1024px) {
.lg\\:max-w-\\[38rem\\] {
max-width: 90% !important;
}
}
@media (min-width: 768px) {
.md\\:max-w-2xl {
max-width: 90% !important;
}
.md\\:max-w-3xl {
max-width: 90% !important;
}
}
/* Make GPT version number more visible */
html.dark .group.flex.cursor-pointer.items-center.gap-1.rounded-xl.py-2.px-3.text-lg.font-medium.hover\\:bg-gray-50.radix-state-open\\:bg-gray-50.dark\\:hover\\:bg-black\\/10.dark\\:radix-state-open\\:bg-black\\/20 span.text-token-text-secondary {
}
/* BREAK LINES IN CODE BLOCKS */
code.\\!whitespace-pre {
white-space: pre-wrap !important;
}
`;
const sidebar_new_width = `330px`;
const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style^="width: 260px"]`;
const sidebarCss = `
/* Sidebar width */
${sidebar_container_selector},
${sidebar_container_selector} .w-\\[260px\\] {
width: ${sidebar_new_width} !important;
}
/* Adjust position of the new show/hide-sidebar control button to match the new width */
main div.fixed.left-0.top-1\\/2.z-40 {
transform: translateX(0px) translateY(-50%) rotate(180deg) translateZ(0px) !important;
}
/*------------------*/
/* Sidebar elements */
/*------------------*/
/* History periods headings color */
html.dark h3.h-9.pb-2.pt-3.px-2.text-xs.font-medium.text-ellipsis.overflow-hidden.break-all.text-token-text-tertiary {
color: ${accentColor};
}
/* Buttons on active chat (to make it visible when title is too long) */
html.dark div.group.relative.rounded-lg.active\\:opacity-90.bg-token-sidebar-surface-secondary button.flex.items-center.justify-center.text-token-text-primary.transition.hover\\:text-token-text-secondary.radix-state-open\\:text-token-text-secondary svg > path {
fill: ${accentColor};
}
ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap {
overflow: visible;
white-space: unset;
}
ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent {
background-image: none;
}
a.hover\\:pr-4:hover,
a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.hover\\:bg-gray-100.dark\\:hover\\:bg-\\[\\#2A2B32\\].cursor-pointer.break-all.bg-gray-50.hover\\:pr-4.dark\\:bg-gray-900.group
{
padding-right: unset !important;
}
div.absolute.inset-y-0.right-0.w-8.z-10.bg-gradient-to-l.dark\\:from-gray-900.from-gray-50.group-hover\\:from-gray-100.dark\\:group-hover\\:from-\\[\\#2A2B32\\] {
background: none;
}
`;
const cssStyles = (messagesCss + sidebarCss).replaceAll("\t", ' ');
// Create a new <style> element and set its content to the CSS rules
var styleElement = document.createElement("style");
styleElement.innerHTML = cssStyles;
// Append the new <style> element to the <head> section of the document
document.head.appendChild(styleElement);
})();
Thanks rigwild 👍 👍
Works fine until the 'official' revision 😁
@airsidworld The very official revision is rolled out 😊 Enjoy!
P.S. For anyone who don't like the visibility-improving changes: Feel free to remove the lines where you see "REMOVE IT" comments (inside the CSS)
This is not working anymore since a few weeks ago :(((
This is not working anymore since a few weeks ago :(((
@dievilz, could you clarify what exactly isn’t working and which plan you're on (free or Plus)? Could you provide more details so I can check what's going on?
Sure! I started using this userscript for Tampermonkey on Chromium-based browsers about two months ago. The UI changes were immediately noticeable, and the user experience improved significantly. However, around two weeks ago, the UI reverted to its default state, and all the enhancements stopped working. This happened while using the free plan—features like the new title and subtitle colors for chats disappeared, and none of the new CSS changes apply anymore.
I just tested it on Firefox to see if it was a browser issue, but it’s not working there either.
@dievilz, that's odd – everything should be working, but let's troubleshoot and get to the bottom of it.
-
First, can you double-check that the userscript
ChatGPT CSS fixesis enabled in your Tampermonkey scripts list and make sure "chat.openai.com" or "openai.com" isn't blacklisted from running the script (it's in theSettingstab of the script →Includes/Excludes→User excludes) -
Verify that the script code hasn't been modified. Specifically, ensure this line is present:
// @match https://chat.openai.com/* -
Are you accessing ChatGPT through
chatgpt.comor a different domain? Previously OpenAI has been gradually switching domains, so we might be seeing different ones. -
Could you also check if other Tampermonkey scripts on different websites are working properly? For example simple
console.log('test')with the// @match https://www.google.com/*? -
Lastly, open Chrome DevTools (
F12, then go to theConsoletab), reload the ChatGPT page while the Tampermonkey script is active, and see if any errors pop up. If there are, please copy and paste them here so we can investigate further.
Having the same issue as dievilz.
ok0u5qvj4oat7txg.js:462 Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at pA (ok0u5qvj4oat7txg.js:39:4818) at Ij (ok0u5qvj4oat7txg.js:41:45674) at Tj (ok0u5qvj4oat7txg.js:41:39819) at Cee (ok0u5qvj4oat7txg.js:41:39791) at wj (ok0u5qvj4oat7txg.js:41:34767) at b (ok0u5qvj4oat7txg.js:26:1548) at MessagePort.D (ok0u5qvj4oat7txg.js:26:1910) is.<computed> @ ok0u5qvj4oat7txg.js:462 V7 @ ok0u5qvj4oat7txg.js:387 Fx @ ok0u5qvj4oat7txg.js:39 Ij @ ok0u5qvj4oat7txg.js:41 Tj @ ok0u5qvj4oat7txg.js:41 Cee @ ok0u5qvj4oat7txg.js:41 wj @ ok0u5qvj4oat7txg.js:41 b @ ok0u5qvj4oat7txg.js:26 D @ ok0u5qvj4oat7txg.js:26Understand this error ok0u5qvj4oat7txg.js:39 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at D_ (ok0u5qvj4oat7txg.js:39:5280) at mee (ok0u5qvj4oat7txg.js:41:15378) at Aj (ok0u5qvj4oat7txg.js:41:40128) at Tj (ok0u5qvj4oat7txg.js:41:39880) at Cee (ok0u5qvj4oat7txg.js:41:39791) at wj (ok0u5qvj4oat7txg.js:41:34767) at b (ok0u5qvj4oat7txg.js:26:1548) at MessagePort.D (ok0u5qvj4oat7txg.js:26:1910) D_ @ ok0u5qvj4oat7txg.js:39 mee @ ok0u5qvj4oat7txg.js:41 Aj @ ok0u5qvj4oat7txg.js:41 Tj @ ok0u5qvj4oat7txg.js:41 Cee @ ok0u5qvj4oat7txg.js:41 wj @ ok0u5qvj4oat7txg.js:41 b @ ok0u5qvj4oat7txg.js:26 D @ ok0u5qvj4oat7txg.js:26Understand this error 2ok0u5qvj4oat7txg.js:39 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at pA (ok0u5qvj4oat7txg.js:39:4818) at Ij (ok0u5qvj4oat7txg.js:41:45674) at Tj (ok0u5qvj4oat7txg.js:41:39819) at Cee (ok0u5qvj4oat7txg.js:41:39791) at wj (ok0u5qvj4oat7txg.js:41:34767) at b (ok0u5qvj4oat7txg.js:26:1548) at MessagePort.D (ok0u5qvj4oat7txg.js:26:1910) pA @ ok0u5qvj4oat7txg.js:39 Ij @ ok0u5qvj4oat7txg.js:41 Tj @ ok0u5qvj4oat7txg.js:41 Cee @ ok0u5qvj4oat7txg.js:41 wj @ ok0u5qvj4oat7txg.js:41 b @ ok0u5qvj4oat7txg.js:26 D @ ok0u5qvj4oat7txg.js:26Understand this error ok0u5qvj4oat7txg.js:41 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Ij (ok0u5qvj4oat7txg.js:41:45331) at Tj (ok0u5qvj4oat7txg.js:41:39819) at Ree (ok0u5qvj4oat7txg.js:41:39746) at vE (ok0u5qvj4oat7txg.js:41:39596) at xA (ok0u5qvj4oat7txg.js:41:35959) at wj (ok0u5qvj4oat7txg.js:41:34906) at b (ok0u5qvj4oat7txg.js:26:1548) at MessagePort.D (ok0u5qvj4oat7txg.js:26:1910)
@mlyin Hi! The error indicates there's an issue with React's HTML hydration (https://react.dev/errors/418). In theory, this could cause the userscript's styles to not apply or get cut from the HTML. However, I haven’t encountered this issue on either Plus or free accounts (tested in multiple browsers on both MacOS and Windows). It’s possible that OpenAI is rolling out a feature or running tests that are affecting only a portion of users.
In case this is something OpenAI is gradually rolling out, I might be able to troubleshoot more effectively once it affects all users. That said, the issue could also be unrelated. Let’s narrow things down:
- Are you using Tampermonkey or another userscript manager?
- Do other userscripts on different websites work properly for you?
- I’ve just made a minor update to the script. It now logs the message
'ChatGPT CSS fixes' userscript is connectedto the console. Could you update the script using the code on this page, reload the ChatGPT page, and check the console? Let me know if you see the blue-on-black message confirming the userscript is connected.
Thanks!
Thanks for answering!
I'm seeing the same Minified React errors as @mlyin.
I tried your first 4 steps to troubleshooting and none of them worked, except the "console.log(test)" one, which it worked, but the CSS still didn't work.
- Are you using Tampermonkey or another userscript manager?
Yes I use Tampermonkey, I also tried using Violentmonkey and it doesn't work either.
- Do other userscripts on different websites work properly for you?
I don't have userscripts for different websites, what I have is another userscript for ChatGPT, named "Wider AI Chat <->" and that one is working fine. I tried disabling that one and enabling only your userscript on both Violent and Tampermonkey, to no avail.
- I’ve just made a minor update to the script. It now logs the message 'ChatGPT CSS fixes' userscript is connected to the console. Could you update the script using the code on this page, reload the ChatGPT page, and check the console? Let me know if you see the blue-on-black message confirming the userscript is connected.
I just updated the userscript and it correctly logs the new message, but is still not working :(
@dievilz, @mlyin
Although I’m still not experiencing the issue, I checked how the "Wider AI Chat" script (which is working for @dievilz) differs from mine and just updated my script to also use the GM_addStyle method from the Tamper/Grease/Violent/Monkey API.
Could you guys check it out and let me know if this solves the problem for you?
It's funny now because, when the page is loading/reloading, it can be seen that just the sidebar changes in width (the text is not loaded still), like this userscript is supposed to do, but when it fully loads, it reverts its size to normal, loads the text and everything is the same again, not changes in style :(.
I agree with the teory that OpenAI is rolling different things to different users, and I also have other extensions that change CSS, like Stylebot (although I use it only to change the font family to one I have locally in my computer, PragmataPro FTW!) so I'll maybe try to disable extensions and test.
If it doesn't work, I'll try fresh reinstalling the browser to see if that fixes it maybe.
Now it worked!! LOL
I removed the extension "Custom Style Script" and now it magically worked again haha. Oops! 😅
It's weird because I'm pretty sure I didnt have any custom styles in that extension because I tried to use it mainly to change fonts, not UI 🤔. Guess I'll never know.
Anyway, I think my issue is resolved.
Thank you very much @alexchexes lmL
One more thing, it seems Stylebot is also reverting the CSS fixes this userscript does, even if I'm using it only to change the font_family. Guess I'll need to find a way to change this userscript to read a local woff2 file.
@dievilz Glad to hear it's working!
Could you clarify one thing please?
After disabling the "Custom Style Script," did the script start working without updating to the latest version (the one I just rolled out that uses the GM_addStyle API)?
Or did you update to the latest version, but it still didn’t work until you disabled the "Custom Style Script"?
Regarding your issue with the local font, I think you can try to grant Tampermonkey permission to read local files, but wouldn’t it be easier to find or convert font to TTF and install it as a system font and then add the appropriate CSS in the script like this:
/* Code blocks font */
cssBlocks.codeBlockFontFamily = `
code, pre {
font-family: PragmataPro, Consolas,Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important;
}
`;
Yeah, ofc.
I updated to the latest version (the one that uses GM_addStyle), and then disabled Custom Syle Script and Stylebot and it worked! Right now is working with GM_addStyle.
I have them in TTF too. I already tried it this way:
cssBlocks.userFont = `
pre, code {
font-family: 'PragmataPro', monospace !important;
font-size: 16.9px;
}
`;and it worked, except the font-size property :(
@dievilz
So even with the latest version, it didn’t work until you disabled the other extensions? I’m just trying to figure out what’s happening here since you mentioned earlier that this script wasn’t working while "Wider AI Chat" was 🙂 I changed the main difference between the scripts, expecting that this one would start working under the same conditions as "Wider AI Chat", but it isn't, right?
Try
font-size: 16.9px !important;
P.S. Just updated the script to handle changes to the upper bar selectors to restore its transparency, and I also added a new style for code blocks inside user input (they now have a background and text wrapping).
Vanilla:
Userscript:
So even with the latest version, it didn’t work until you disabled the other extensions?
Yes, just as you said, because I still made some testing after the GM_addStyle addition and it didn't work.
I changed the main difference between the scripts, expecting that this one would start working under the same conditions as "Wider AI Chat", but it isn't, right?
I tested again by enabling 'Wider AI Chat', enabling Stylebot, and that userscript is working fine.
My guess is that Stylebot is removing your CSS fixes at load time, because if I try the following flow:
- Disable Stylebot custom style for ChatGPT.
- Disable Wider AI Chat in Violentmonkey
- Enable ChatGPT CSS fixes in Violentmonkey
- Reopen the browser, then ChatGPT
- ChatGPT now shows CSS fixes
- If I enable my custom style in Stylebot...
Then the font changes I made are applied without disabling the CSS fixes. I guess was the same for Custom Style Script extension.
Try
font-size: 16.9px !important;
It worked! Thank you!
I'mma save it here for userscript updates:
cssBlocks.userFont = `
code, pre {
font-family: 'PragmataPro', monospace !important;
font-size: 16.9px !important;
}
`;
@dievilz Ok, I'll investigate the interaction between this script and Stylebot a bit later.
Thank you!
Thank you very much for it. Works exactly as I expected 🥳
@pqeiufc You're welcome! 😎
Hi, @alexchexes!
Sorry to bother you again, but the userscript is failling again 😓.
The best way to describe it is that without other extensions enabled, if I reload the tab, the UI fixes (the userscript) load correctly and everything is nice, but if I change to another chat, the CSS for the sidebar (only the sidebar really) reverts to default, and it can't be enabled again, unless I reload the tab, although is useless because of the previously mentioned behaviour.
To be specific, the immediate changes I can quickly notice is that the sidebar is narrower again, the subtitles for 'last time used' are not orange but the modification to wrap the name of the chat is still working (I don't remember if that's something you fixed or was a default). Also I notice like a week ago (when the userscript was working) the default font for the website changed for another one that was nicer to see and was bold and also that was reverted.
And strangely, everything else is working fine, the chat view is still wide and for example, the cssBlocks.userFont snippet that you gave me, is still working fine, I can still see my custom font.
I tested on Brave and Opera and both have the same problem.
It's not a dealbreaker but I got used to that orange hue and bold text hehe.
@dievilz Yeah I'm aware of the problem, it came up recently, going to update the script soon. Thank you
UPD: The script is updated
Yeah, it's working again! Thank you @alexchexes! 🙌
Nice one! Thanks! 👍