Is it possible to center the Paper Lantern theme?

akust0m

Well-Known Member
Feb 19, 2016
72
4
58
Melbourne
cPanel Access Level
Root Administrator
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

Well-Known Member
Verifed Vendor
Oct 9, 2006
271
7
168
India
cPanel Access Level
Root Administrator
Twitter
What is the resolution of your screen?

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

kdean

Well-Known Member
Oct 19, 2012
398
71
78
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;
    }
}
 
  • Like
Reactions: akust0m