Center content area in Paper Lantern

Nickhology

Registered
Nov 11, 2015
3
1
3
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
 

cPanelKenneth

cPanel Development
Staff member
Apr 7, 2006
4,607
80
458
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....
 

cPanelMichael

Administrator
Staff member
Apr 11, 2011
47,884
2,254
463

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

cPanelAdamF

cPanel Product Owner
Staff member
Mar 21, 2013
297
135
168
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.
 

kdean

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

kdean

Well-Known Member
Oct 19, 2012
398
71
78
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.
 

cPanelAdamF

cPanel Product Owner
Staff member
Mar 21, 2013
297
135
168
Houston TX
cPanel Access Level
DataCenter Provider
Twitter
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.
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
}
 

kdean

Well-Known Member
Oct 19, 2012
398
71
78
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.
 

cPanelAdamF

cPanel Product Owner
Staff member
Mar 21, 2013
297
135
168
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.