Is it possible to center the Paper Lantern theme?

[akust0m]

Whilst I do like the Paper Lantern theme, it can get very irritating on high resolution monitors as all the content is pushed to one side. Is it possible to have the content centered?

 

[syslint]

What is the resolution of your screen?

PS: If you need more customization ,better to build a custom responsive theme.

 

[cPanelMichael]

Hello

You may find this document helpful if you have not already viewed it:

Tutorial - Create a New Paper Lantern Interface - Software Development Kit - cPanel Documentation

Thank you.

 

[kdean]

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.

/* 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;
    }
}