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.

Center content area in Paper Lantern

Discussion in 'User Experience' started by Nickhology, Feb 7, 2016.

  1. Nickhology

    Nickhology Registered

    Joined:
    Nov 11, 2015
    Messages:
    3
    Likes Received:
    1
    Trophy Points:
    3
    Location:
    ohio
    cPanel Access Level:
    Root Administrator
    I have been trying to center the main content area on each page via css without any luck... Everything I try seems to throw off some other aspect of the layout. Any chance someone could help guide me in the correct direction for a resolution! Thanks
     
  2. cPanelKenneth

    cPanelKenneth cPanel Development
    Staff Member

    Joined:
    Apr 7, 2006
    Messages:
    4,461
    Likes Received:
    22
    Trophy Points:
    38
    cPanel Access Level:
    Root Administrator
    Hello,

    Could you give us more context? What are you working on, a static web site? A Wordpress website? X3? Paper Lantern? etc....
     
  3. Nickhology

    Nickhology Registered

    Joined:
    Nov 11, 2015
    Messages:
    3
    Likes Received:
    1
    Trophy Points:
    3
    Location:
    ohio
    cPanel Access Level:
    Root Administrator
    Customizing paper lantern a bit.... Here is a picture of what exactly I am trying to accomplish.
     

    Attached Files:

  4. cPanelMichael

    cPanelMichael Forums Analyst
    Staff Member

    Joined:
    Apr 11, 2011
    Messages:
    30,854
    Likes Received:
    676
    Trophy Points:
    113
    cPanel Access Level:
    Root Administrator
  5. 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
    Here's my Centered Paper Lantern with some other tweaks.

    To apply the following style changes, you need to create a style.css file in your own style folder.

    Steps 1, 2 & 5 from this Tutorial:
    Tutorial - Create a Custom cPanel Style - Software Development Kit - cPanel Documentation

    Then you can apply that style via cPanel's Change Style menu item or if you want to set your custom modifications as the default for Paper Lantern for all accounts do Step 6.

    Copy the styles below into your stylesheet and you should be good to go.

    Code:
    
    /* Overall */
    
    #cpanel_body {
        max-width: none; /* remove width limit */
    }
    
    div#content {
        max-width: 1365px;  /* limit the widht here. Use 252px wide increments if you want icons evenly filling width at max-width  */
        margin-top: 36px;  /* slightly taller to account for Header Logo Extra Padding below */
    }
    
    #main {
        width: 100%;  /* Fill the content width */
        margin-top: 10px;  /* Extra room between top bar and content */
    }
    
    .page-header {
        margin-top: 10px;  /* Extra room between top bar and content */
    }
    
    
    /* Statistics and Dashboard */
    
    div.dashboard-item {
        padding: 8px 0px;
    }
    
    ul.dashboard-list li.dashboard-item:nth-child(odd) {
        padding: 8px 8px 8px 0px;
        clear: left;
    }
    
    ul.dashboard-list li.dashboard-item:nth-child(even) {
        padding: 8px 0px 8px 8px;
    }
    
    
    
    /* Sub pages and User Manager */
    
    .body-content {
        max-width: none;
    }
    
    
    
    /* User Manager */
    
    div.edge {
        margin: 10px 0px;
    }
    
    div.edge > div.row {
        margin: 0px;
    }
    
    div.edge > div.row div.username {
        padding-top: 15px;
    }
    
    div.edge > div.row div.services {
        padding-left: 0px;
    } 
    
    
    /* Header Logo Extra Padding */
    
    div.navbar-header {
        padding-bottom: 2px;
        padding-top: 2px;
    }
    
    @media(max-width: 768px) {  /* for Mobile */
    
        /* Header Logo Extra Padding */
      
        .navbar-preferences, header .navbar, header .navbar .container .navbar-header, header .navbar .container .navbar-header .navbar-preferences {
            height: 34px;
            min-height: 34px
        }
      
      
        /* Reposition Hamburger menu */
      
        .cp-nav-toggle {
            height: 34px;
        }
    }
    
    
    @media(max-width: 767px) { /* for Mobile */
    
        /* Statistics and Dashboard */
      
        ul.dashboard-list li.dashboard-item {
            padding: 0 0 15px 0 !important;
        }
      
        /* User Manager */
        div.edge > div.row div.services {
            padding-left: 15px;
        }
    }
    
    
     
  6. 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:
    We've heard a number of people that did not like the 'no mans land' found to the far right on the index page on wide monitors. We've gone 100% width starting in 11.56 so that this area no longer exists. I apologize, but this will likely throw off your centered layout CSS. Something to keep in mind before you update.
     
  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
    No big deal, I know major updates can cause changes that could affect custom styles. I had to do the same thing before when I "Fixed" the roundcube iFrame styles when that was worse.

    Note that if you go full 100%, on really wide screens that can make paragraph text a bit harder to read. That's why in my styles I still left a max-width limit and only provide an option for full width.

    Granted people can just resize if it wraps too big, but there's a reason why there's still a lot of responsive sites that have max-wifth limit to improve readability / scanning.
     
    Infopro likes this.
  8. 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:
    The fix only applies to the main index pages. Anything you can get to from the sidebar. You will still get constrained widths when your inside different features.
     
  9. 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
    I also suggest you add body class names that designate each page uniquely and maybe another class that identifies common page types. This would make things easier to isolate specific pages for custom styles or specific types of pages that share similar layouts that one may want to adjust as a group. If you've ever seen body classes on a wordpress site you likely know what I'm talking about.
     
  10. 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:
    I'm assuming you want to do something like this in your styles?

    body.webmail p { // some styles that apply only to p tags in PL Webmail }}
    body.main_feature_page table {
    // some custom styles which would apply only to tables on feature index pages
    }
    body.email_accounts h3 {
    // some custom styles which would apply only to H3 tags inside the email_accounts feature
    }
    body.email_accounts.success {
    // styles for the success page after email accounts have been created
    }
     
  11. 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
    Yes. That kind of thing. It just makes things easier if and when you want to target a specific page and don't want to break something you're unaware of elsewhere.
     
  12. 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:
    cool. I've got this queued up for development with my team.
     
  13. 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:
    This will be available in v59, which should hit EDGE very soon (this week or next):

    Targeting cPanel vs Webmail
    Code:
    .webmail { 
     background-color: red;
    }
    Targeting specific cPanel or webmail styles:
    Code:
    #site_publisher h1,
    #site_publisher h2
    { color: red; }
    You are able to use the full list of appkeys found on https://documentation.cpanel.net/display/SDK/Guide+to+cPanel+Interface+Customization+-+Appkeys to target any app in the cPanel or webmail interface you like.

    We found that being able to style the success pages were going to require a separate effort to complete; expect another update out of me when that's done.
     
Loading...
Similar Threads - Center content area
  1. akust0m
    Replies:
    3
    Views:
    279

Share This Page