Customize your interface for ChatGPT web -> custom CSS inside

ChatGPT
,
23

just set the width of code block to the max ,no more scroll bar of code block

  .text-base {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
24

how can I get your same background my screen is white

25

Hi,
i have tried that but somtimes it’s not long enough. To fit in the screen.

26

Try this one.
I removed the avatars for both the user and ChatGPT, and set the content width to 100% of the screen. However, for aesthetic purposes, I added a left margin of 10px. You can customize the left margin, for example, to 10%, 20px, or any other value you prefer.
This should be width enough ,unless u want the content to be wider than the screen…

    /* change the input area*/
    .xl\:max-w-3xl {
        max-width: 95% !important;
    }
    /* change the message area*/
    .text-base {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 0px !important;
    }
/*    remove the avatar  */
    .items-end.relative.flex-col.flex.flex-shrink-0 {
        display: none;
    }
/*    The width of the element takes up 100% of screen  */
    .relative.flex.w-full.flex-col {
    width: 100%;
    }

image
image1920×881 90 KB

1 Like
27

This thread already helped me widen the text area. I’d like to share a TamperMonkey script that hides and shows the input box on hover so that it doesn’t obscure the main text at all. The script follows unsuccessful attempts to hide and show using css opacity:0 :hover opacity:1 on the form class.

// ==UserScript==
// @name         Hide Element on Hover with Footer Trigger
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Hide a specific element on OpenAI Chat page, show it when hovered over or footer is hovered.
// @author       Your Name
// @match        https://chat.openai.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    window.addEventListener('load', function() {
        var targetElement = document.querySelector('.w-full.pt-2.md\\:pt-0.dark\\:border-white\\/20.md\\:border-transparent.md\\:dark\\:border-transparent.md\\:w-\\[calc\\(100\\%-\\.5rem\\)\\]');

        // Function to toggle display
        function toggleDisplay(displayState) {
            if (targetElement) {
                targetElement.style.display = displayState;
            }
        }

        if (targetElement) {
            // Initially hide the element
            toggleDisplay('none');

            // Show the element when hovered
            targetElement.addEventListener('mouseover', function() {
                toggleDisplay('block');
            });

            // Hide the element when not hovered
            targetElement.addEventListener('mouseout', function() {
                toggleDisplay('none');
            });
        }

        // Create an invisible footer
        var footer = document.createElement('div');
        footer.style.position = 'fixed';
        footer.style.left = '0';
        footer.style.bottom = '0';
        footer.style.width = '100%';
        footer.style.height = '50px';
        footer.style.zIndex = '9999';
        footer.style.opacity = '0'; // Make the footer invisible
        document.body.appendChild(footer);

        // Footer hover actions
        footer.addEventListener('mouseover', function() {
            toggleDisplay('block');
        });

        footer.addEventListener('mouseout', function() {
            toggleDisplay('none');
        });
    });
})();

blank
blank1920×1080 31.1 KB

The forum doesn’t allow two image embeds, but a second image would show the input box when the mouse cursor is hovered over it.

3 Likes