The Community Forums

Interact with an entire community of cPanel & WHM users!
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Webmail Navigation Bar in 11.48

Discussion in 'User Experience' started by WhiteDog, Feb 3, 2015.

  1. WhiteDog

    WhiteDog Well-Known Member

    Joined:
    Feb 19, 2008
    Messages:
    118
    Likes Received:
    0
    Trophy Points:
    16
    In cPanel 11.48 the behaviour of the Webmail login was changed so that you are directly presented with the Webmail client of your choice. For those who have not seen or tried this, it's best explained here: Upcoming changes to the cPanel end-user webmail experience in 11.48 | cPanel Blog

    While I welcome this change in behaviour, I must say that the top and bottom "navigation bars" take away quite some screen real-estate while they will hardly be used. Also on bigger screens, RoundCube is only taking up about 75% of the space and not using all of the free space.

    Some added functionality to hide and/or reduce the navigation bars after a few seconds would probably be welcomed.
     
  2. WhiteDog

    WhiteDog Well-Known Member

    Joined:
    Feb 19, 2008
    Messages:
    118
    Likes Received:
    0
    Trophy Points:
    16
    To better illustrate, this is what RoundCube looks like on cPanel 11.48.0.5 / paper_lantern / Chrome 40.0 / OS X 10.10.2 / 2560x1440 resolution:

    /http://i60.tinypic.com/167joxy.jpg

    I'm sure you'll agree that this can be improved upon :)
    Keep up the good work guys!
     
  3. cPanelTristan

    cPanelTristan Quality Assurance Analyst
    Staff Member

    Joined:
    Oct 2, 2010
    Messages:
    7,623
    Likes Received:
    21
    Trophy Points:
    38
    Location:
    somewhere over the rainbow
    cPanel Access Level:
    Root Administrator
    Hello WhiteDog,

    I'd actually suggest making these suggestions in the Features site (cPanel Feature Requests), since they are feature change requests for interface revisions for the navigation bar. Making this a feature request would be ideal, since then users can vote and provide suggestions.

    If you need any help with having the feature request approved, I'd be happy to approve it once it's been submitted. Simply post back here or message me the feature request link.

    Thanks!
     
  4. cPanelAdamF

    cPanelAdamF cPanel Product Owner
    Staff Member

    Joined:
    Mar 21, 2013
    Messages:
    174
    Likes Received:
    11
    Trophy Points:
    18
    Location:
    Houston TX
    cPanel Access Level:
    DataCenter Provider
    Twitter:
    Thanks for the constructive critique, WhiteDog! When it comes to that navigation bar, we reused the nav we implemented in Paper Lantern so that customers would not have to maintain a separate Style for the cPanel-side of Paper Lantern vs the webmail-side of Paper Lantern. We hope that the reuse of Styles from the cPanel-side of Paper Lantern will keep the maintenance cost of customizing cPanel low and approachable for everyone.

    I definitely understand the concern about it eating too much space in the interface as a result of this reuse, though. Right now, the webmail clients appear in an iframe which does it's best to fill your browser window.

    When it comes to that top-nav throughout the Paper Lantern interface, I don't think we're quite happy with it yet. It's a big improvement and simplification over previous navs that we've implemented in older-soon-to-be-deprecated themes...but we can certainly do more to make it even better.
     
  5. garyhoffmann

    garyhoffmann Registered

    Joined:
    Feb 12, 2015
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    1
    cPanel Access Level:
    Reseller Owner
    The iframe height is such that there is scrolling is required to get to the bottom of the webmail client. It appears to be set to 950px regardless of the available space in the browser window. Customers are asking me to take them back to the X3 interface which sucks from a cpanel perspective, but they rarely see cpanel - what they see is webmail. If the iframe could at least take into account the actual and real size of the browser and then actually and correctly resize if the window resizes would be so much better. It would be even better if it wasn't an iframe at all. Now there are two headers and two footers on the screen.

    Please allow for a webmail skin separate from the cpanel skin, especially if paper_lantern is used.

    Thanks (and yes, I have put in a feature request as well, but wanted to put this on the forum).
     
  6. kdean

    kdean Well-Known Member

    Joined:
    Oct 19, 2012
    Messages:
    262
    Likes Received:
    12
    Trophy Points:
    18
    Location:
    Orlando, FL
    cPanel Access Level:
    Root Administrator
    Link to feature request:

    Remove iframe from webmail paper_lantern skin | cPanel Feature Requests

    Some notes that I posted there that may be helpful for some if you can add custom css to paper lantern yet. (I'm just getting familiar with it, so I'm not sure of it's customizability yet.)

    One option is to use some more advanced css3 on the iframe which older browsers would have problems with. (see below)

    While not perfect adding one of the following in the css would improve things for recent browsers in regard to the center frame filling the vertical space.

    Code:
    iframe#mailFrame {
         border: 0px;
         height: calc(100vh - 125px);
    }
    
    ...or...

    Code:
    iframe#mailFrame {
         border: 0px;
         height: 100vh;
         padding-top: 63px;
         padding-bottom: 63px;
         margin-bottom: -62px;
         margin-top: -62px;
    }
    
     
    #6 kdean, Mar 3, 2015
    Last edited: Mar 3, 2015
    stormy likes this.
  7. kdean

    kdean Well-Known Member

    Joined:
    Oct 19, 2012
    Messages:
    262
    Likes Received:
    12
    Trophy Points:
    18
    Location:
    Orlando, FL
    cPanel Access Level:
    Root Administrator
  8. kdean

    kdean Well-Known Member

    Joined:
    Oct 19, 2012
    Messages:
    262
    Likes Received:
    12
    Trophy Points:
    18
    Location:
    Orlando, FL
    cPanel Access Level:
    Root Administrator
    cPanel take note. There's a bug with the instructions on:

    https://documentation.cpanel.net/display/PLD/4+-+Apply+a+Style

    In regard to applying a default style as the root uer, the instructions end with the command:

    Code:
    ln -s /var/cpanel/customizations/styled/$style_name/ default_style
    
    But the I had to remove the trailing slash for it to work:

    Code:
    ln -s /var/cpanel/customizations/styled/$style_name default_style
    
     
    joako likes this.
  9. stormy

    stormy Well-Known Member

    Joined:
    Nov 22, 2003
    Messages:
    108
    Likes Received:
    6
    Trophy Points:
    18
    Location:
    Spain
    cPanel Access Level:
    Root Administrator
    Wow, getting lots of complaints about this one since we switched from Rvskin to Paper Lantern. I'm going to go through the CSS fix and see what happens. What a terrible idea! Some customers are even getting double scroll bars.
     
  10. Infopro

    Infopro cPanel Sr. Product Evangelist
    Staff Member

    Joined:
    May 20, 2003
    Messages:
    14,453
    Likes Received:
    195
    Trophy Points:
    63
    Location:
    Pennsylvania
    cPanel Access Level:
    Root Administrator
    Twitter:
    Sounds like some sort of browser caching issue.
     
  11. stormy

    stormy Well-Known Member

    Joined:
    Nov 22, 2003
    Messages:
    108
    Likes Received:
    6
    Trophy Points:
    18
    Location:
    Spain
    cPanel Access Level:
    Root Administrator
    I have been able to deploy the suggested fixes but I can't hide the nav bar. I've applied this example to "unstick" the nav bar:
    https://documentation.cpanel.net/display/PLD/2+-+Stylesheet+Examples

    I've also hidden the footer with display:none. My current style for the iframe is:

    Code:
    iframe#mailFrame {
         border: 0px;
         height: 100vh;
         padding-top: 0;
         padding-bottom: 0;
         margin-bottom: -62px;
         margin-top: 0;
    }
    This, with the non-sticky header, at least allows you to scroll past the header. However, I'm not an expert and I might be messing up other stuff...
     
  12. stormy

    stormy Well-Known Member

    Joined:
    Nov 22, 2003
    Messages:
    108
    Likes Received:
    6
    Trophy Points:
    18
    Location:
    Spain
    cPanel Access Level:
    Root Administrator
    No. The new webmail interface was obviously designed in a large screen, so the issues didn't show up. Putting roundcube inside an iframe is a terrible idea.

    With this design, it's very easy to:
    -See the main scroll bar (because your screen is smaller than expected by the designer)
    -See another scroll bar in a long message (this is roundcube at work though)
    -Potentially there could be a third scrollbar inside the iframe, but I haven't seen it.

    Meanwhile, an almost useless header and footer take up a sizable chunk of your screen real estate, and you are forced to scroll all over the place to read and reply to messages.

    Even on a larger screen, the "sticky" header causes you to lose the "send" buttons while you are typing an email.
     
  13. Agics

    Agics Member

    Joined:
    May 16, 2013
    Messages:
    10
    Likes Received:
    0
    Trophy Points:
    1
    Location:
    Netherlands
    cPanel Access Level:
    Root Administrator
    Hi all,

    I really like the information bar above webmail, with the webmail preferences and the company logo.I know some people reported this before but alignment of the preference button and the logo is not consistent with the iframe containing the webmail.
    After updating to 11.50.0 (build 9), using Paper Lantern things seem worse. The iframe has now a width of 100% of my browser screen. However, the information bar is stuck to a fixed width, probably set by bootstrap. So where my webmail is 1920px width, the logo and button are in a frame of 1300px. This gives in my opinion a very ugly layout.
    Has somebody any tips to set the iframe width to match the width of the info bar ? Or the other-way around ?
     

    Attached Files:

  14. joako

    joako Well-Known Member

    Joined:
    Aug 7, 2003
    Messages:
    97
    Likes Received:
    2
    Trophy Points:
    8
    The iframe in the webmail is hardcoded to 950px. On a Windows PC with a 1920x1080 monitor with Google Chrome set to 100% zoom this causes scrolling. This bug is reported since months ago. Instead of fixing it you spend time redesigning your logo and loading it into Cpanel updates, so is there any plan to fix the actual bug instead of implementing un-needed cosmetic changes?
     
  15. stormy

    stormy Well-Known Member

    Joined:
    Nov 22, 2003
    Messages:
    108
    Likes Received:
    6
    Trophy Points:
    18
    Location:
    Spain
    cPanel Access Level:
    Root Administrator
    Take a look at my post about unsticking the nav bar and modifying the style. That one helps. It's quite a bit of work though.

    You still have to scroll initially past the navbar, but once you do that, Webmail behaves almost normally. Except you still lose the unread messages count, as per this thread:

    https://forums.cpanel.net/threads/c...-count-for-roundcube-in-paper-lantern.452302/
     
  16. joako

    joako Well-Known Member

    Joined:
    Aug 7, 2003
    Messages:
    97
    Likes Received:
    2
    Trophy Points:
    8
    That's nice but I would prefer CPanel just handle their bug reports instead of ignoring them.
     
  17. brt

    brt Well-Known Member

    Joined:
    Jul 9, 2015
    Messages:
    46
    Likes Received:
    5
    Trophy Points:
    8
    Location:
    MN
    cPanel Access Level:
    Root Administrator
    This is NOT browser caching. It's a poor iframe implementation. Actually, most iframe implementations are poor.

    Try viewing standard Paper Lantern webmail on a smaller screen -- 1024x769 or 1280x1024. You'll have scrollbars IN the iframe for Roundcube itself, and you'll have scrollbars FOR the iframe.

    Either make the iframe a -regular- actual frame, with the bottom pane being native roundcube and the top being the toolbar, or create a custom Roundcube theme with the toolbar on top.

    LOTS of complaints, and a definite step backward from the old x3 webmail.
     
    joako likes this.
  18. kdean

    kdean Well-Known Member

    Joined:
    Oct 19, 2012
    Messages:
    262
    Likes Received:
    12
    Trophy Points:
    18
    Location:
    Orlando, FL
    cPanel Access Level:
    Root Administrator
    Just repeating my fix instructions that keep the cpanel bars but better manages the iframe for less double scrollbar appearance in recent browsers.... just in case some have missed it.

    You have to create a style.css file in your own style folder. This stylesheet applies to all of paper lantern, not just webmail.

    https://documentation.cpanel.net/display/PLD/0+-+Navigate+to+the+Style+Directory

    Then if you want to set your custom modifications as the default for Paper Lantern, follow these instructions:

    http://blog.cpanel.com/how-to-set-a-default-style-with-paper-lantern/

    Add the following styles to your custom css file.

    Code:
    iframe#mailFrame {
         border: 0px;
         height: calc(100vh - 115px);
    }
    
    #wrap {
        min-width: initial !important;
    }
    This has worked well for me for both small and large screens.


    webmail_small2.png

    webmail_small3.png
     
    #18 kdean, Jul 9, 2015
    Last edited by a moderator: Jul 15, 2015
  19. brt

    brt Well-Known Member

    Joined:
    Jul 9, 2015
    Messages:
    46
    Likes Received:
    5
    Trophy Points:
    8
    Location:
    MN
    cPanel Access Level:
    Root Administrator
    My users are complaining more about small screens, but I'll see if I have time to try your fix and see if it helps with that too.

    I don't understand why we're having to jump through hoops like this to get something that's.... acceptable.
     
  20. kdean

    kdean Well-Known Member

    Joined:
    Oct 19, 2012
    Messages:
    262
    Likes Received:
    12
    Trophy Points:
    18
    Location:
    Orlando, FL
    cPanel Access Level:
    Root Administrator
    My smaller screenshot is from approximately 1024x768. Roundcube itself has a minimum width of 901px so I wouldn't really recommend smaller that that since you will have horizontal scrolling. My fix at least allows you to resize down to the roundcube width. For some reason cPanel sets a minimum width of 1300px by default.
     
Loading...

Share This Page