Center content area in Paper Lantern
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
-
Hello, Could you give us more context? What are you working on, a static web site? A Wordpress website? X3? Paper Lantern? etc.... 0 -
Hello, Could you give us more context? What are you working on, a static web site? A Wordpress website? X3? Paper Lantern? etc....
Customizing paper lantern a bit.... Here is a picture of what exactly I am trying to accomplish.0 -
Hello :) Could you let us know an example of specific changes you have made that have failed? Note that 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. 0 -
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; } }0 -
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. 0 -
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. 0 -
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. 0 -
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. 0 -
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 }0 -
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. 0 -
cool. I've got this queued up for development with my team. 0 -
This will be available in v59, which should hit EDGE very soon (this week or next): Targeting cPanel vs Webmail .webmail { background-color: red; }
Targeting specific cPanel or webmail styles:#site_publisher h1, #site_publisher h2 { color: red; }
You are able to use the full list of appkeys found on0
Please sign in to leave a comment.
Comments
12 comments