Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

GMail Compose Window

Trying to resize/relocate the GMail compose window, however, have not found the correct div id and/or CSS code to accomplish this seemingly easy task.

Would like to either have the GMail compose window open in a lower position and smaller window or even have the GMail compose window open in the smaller size ( the window displayed when clicking on the 'Exit Full Screen' button) by default.

Also would like to change the image for the button that opens up the details for a specific message, i.e., button typically to the right of the incoming email address. I've been able to change this 'down arrow' in the developer's console (right clicking on the element and redefining the 'cleardot.gif' image), however, this will obviously not stick once exiting the developer's console.

Any assistance would be appreciated. Would even consider 'donating' if I can get these things resolved.
------------

Comments

  • Joining this request. I really wish it was possible to move the compose window to the left. Attaching a screenshot.

  • Actually, it is pretty easy.

    Compose window to the left:

        .no { float:left !important; }
    

    Different icon for details than downarrow:
    Relevant present CSS

    .ajz {
        background: url(//ssl.gstatic.com/ui/v1/icons/mail/skinnable/skinnable_ltr_light_1x.png) no-repeat -60px -100px;
        cursor: pointer;
        height: 12px !important;
        padding: 0 0 1px 0;
        vertical-align: bottom;
        width: 12px !important;
    }
    

    Either replace the whole background picture e.g.

    .ajz {
        background: url(https://78.media.tumblr.com/tumblr_lnvvvdsD0A1qepbs7.gif) no-repeat !important;
        height: 16px !important;
        width: 16px !important;
        vertical-align: top !important;
    }
    

    or choose another icon by changing the background-position of the already present sprite e.g.

    .ajz {
        background-position-x: -81px !important;
        background-position-y: -63px !important;
    }
    

    p.s.: Screenshots work wonders.

  • Actually, it is pretty easy.

    Show Details Code:
    .ajz {
        background: url(https://78.media.tumblr.com/tumblr_lnvvvdsD0A1qepbs7.gif) no-repeat !important;
        height: 16px !important;
        width: 16px !important;
        vertical-align: top !important;
    }
    

    Compose window to the left:

        .no { float:left !important; }
    
    Appreciate the response.

    The code works for replacing 'show details' button when viewing an individual email.

    However, the code for moving the compose window works but it also removes the message list entirely.

    Is the div ID too broad and causes more code to be moved then desired?

    ------------

  • I don't use gmail. What do you mean by

    removes the message list entirely

    ?
    Looks fine here.

    screenshot

    By the way, today google announced their new layout for gmail, so maybe in a few weeks you have to start over again...

    P.s.: and again: screenshots, screenshots, screenshots.

    1627 x 932 - 60K
  • @stonecrusher

    Actually, it is pretty easy.

    Compose window to the left:

    That was easy and worked brilliantly, thank you! :-)

  • I don't use gmail. What do you mean by

    ?

    Looks fine here.

    screenshot

    Looks fine for you because you probably don't have any other scripts running that affect the compose window.

    And the script code you supplied only partially works. Partial meaning that it only moves the 'exit full screen' compose window. It does not affect the full screen compose windows at all.

    And, as stated in previous reply, it will adjust the full screen compose window (when other scripts that affect compose window are enabled), however, once the compose windows is closed, the message list disappears. It only reappears with a screen refresh (i.e., F5).

    Not sure what good a screenshot would do with nothing in it. Don't see how that will help. In any case, I've attached two screen shots (without other scripts affecting compose window). One for the exit full screen and the second for the full screen compose windows.

    ------------
    1434 x 867 - 95K
    1439 x 871 - 94K
  • edited April 2018 Firefox

    @"Robert Orzanna"
    Glad it works for you :-)

    Looks fine for you because you probably don't have any other scripts running that affect the compose window.

    Of course not, you never mentioned anything.
    Screenshots still helped me clarifying what you mean and to be sure if we see the same. You could have edited it to what you want to have, see Robert's first post.

    it only moves the 'exit full screen' compose window. It does not affect the full screen compose windows at all.

    Those are two different things, was not clear.

    Here, edit it as you wish:

    @-moz-document domain("mail.google.com") {
    .aSt {
        width: 85% !important;
        height: 85% !important;
        left: 0 !important;
        top: initial !important;
        bottom: 0 !important;
    }
    }
    

    And, as stated in previous reply, it will adjust the full screen compose window (when other scripts that affect compose window are enabled), however, once the compose windows is closed, the message list disappears. It only reappears with a screen refresh (i.e., F5).

    Can't reproduce. As you said, .no doesn't target or affect full screen compose window at all. Message list never disappears for me. Try if you can reproduce in a fresh profile.



  • Of course not, you never mentioned anything.

    Actually I did mention both types of compose windows in initial post.

    Here, edit it as you wish:

    @-moz-document domain("mail.google.com") {
    .aSt {
        width: 85% !important;
        height: 85% !important;
        left: 0 !important;
        top: initial !important;
        bottom: 0 !important;
    }
    }
    
    The above code didn't move anything in the Full Screen or Exit Full Screen.

    I did notice when creating this stand-alone script, there was a 'yield sign' with exclamation point to the left of the 'top: initial !important;' stating:
    ' Expected ( | inherit) but found 'initial'.'

    Tried changing the 'initial' to different numbers and it did nothing.



  • NetSpeedZ said:

    Actually I did mention both types of compose windows in initial post.

    I referred to "other scripts running". And mentioning something still doesn't make clear what you want. The "or" implies fulfilling one condition is enough.
    NetSpeedZ said:

    The above code didn't move anything in the Full Screen or Exit Full Screen.

    That code was for full screen only. The one for the smaller window is in the post above.
    Works well here:
    screenshot
    NetSpeedZ said:

    there was a 'yield sign' with exclamation point

    "initial" is a valid value for "top": https://www.w3schools.com/cssref/pr_pos_top.asp

    It's a false alarm. Better use Stylus, it has updated CSS validators and the option to define custom exclusions for rules.
    Don't change it, it's required to overwrite the present fixed value for "top" without defining top:0px. Otherwise you can't move the box properly to the bottom.

  • That code was for full screen only. The one for the smaller window is in the post above.
    Works well here:
    screenshot


    I already knew that the code was for full screen only. When I troubleshoot, I test everything just so I can see how other code reacts, etc.

    And it works well for you because it appears you were using Stylus - which you said nothing about in previous posts.

    Once I installed Stylus and added the code, it works fine. Something with Stylish doesn't like this code. Don't know what it is - don't care at this point as its working.

    Appreciate the input.

    ------------
  • > When I troubleshoot, I test everything just so I can see how other code reacts, etc.

    Not good, always try to isolate the problem first and look for collisions later

    > it works well for you because it appears you were using Stylus

    Just tested it. Works exactly the same in Stylish here!?

    However I can still recommend staying with Stylus as it has more features, less bugs and active opensource development
  • >

    Not good, always try to isolate the problem first and look for collisions later

    Every programmer has their own style. I've been a programmer of many languages for longer then you have probably been alive (36 years). My style works and finds the problems fast. That style may not work for anyone else. It's all relative.

    Like I said, for whatever reason it's not working with Stylish is irrelevant. If it works on Stylus, that's the answer.

    Moving on . . . .

    ------------


Sign In or Register to comment.