PaperLantern -- Something a bit Nicer?

[feldon27]

Since Paper Lantern will soon be the law of the land and clinging onto the non-responsive, x3 Retro theme is not really the right answer for my customers, I wondered how hard it would be to take Paper Lantern and with a few minutes fiddling, see if I could tighten it up and make things look a little less sterile. Using the Develop a Paper Lantern Style instructions, I found that it was very easy to add a new style based on PL and here's what I've built so far...



Again these are very simplistic changes.

To install this, I type:

mkdir -p /var/cpanel/customizations/styled/paper_tiger
cd /var/cpanel/customizations/styled/paper_tiger
pico styles.css

and then write the following CSS:

.cellbox-header {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 5px;
}
.group-header {
    font-size: 14px;
    font-weight: bold;
    left: 10px;
}
.cellbox {
    background-color: #f0faff;
    border-bottom: 1px solid #c0caff;
}
.cellbox-body {
    padding-top: 12px;
    padding-bottom: 12px;
}
.cellbox-body .item {
    width: 110px;
    height: 75px;
    text-align: center;
}
.itemContentWrapper .itemImageWrapper {
    width: 100px;
    text-align: center;
}
.itemContentWrapper .itemTextWrapper {
    width: 100px;
    font-size: 85%;
    text-align: center;
    padding: 3px 0 4px 5px;
}

Then I uploaded the preview.png file attached to this post and put it in /var/cpanel/customizations/styled/paper_tiger.

Why am I pasting the CSS code above, rather than just attaching it to this post?
Because i want to invite people to add their own ideas and collaborate on improving this theme. I wanted to customize the Stats on the left side but unfortunately this is still shoved into an HTML4-era Table, prohibiting styling via CSS.

 

[cPanelKenneth]

One of the driving forces behind Paper Lantern was to make it simple to customize in the way that you did. Your work looks pretty good. Thank you for sharing it with the community!

Also, you might want to check on 11.52. We've made a few improvements to the UI.

 

[feldon27]

Thank you. It will be a bit before I am on 11.52. Any chance the Stats column can go on a CSS adventure and leave Tables behind?

 

[cPanelAdamF]

Thank you. It will be a bit before I am on 11.52. Any chance the Stats column can go on a CSS adventure and leave Tables behind?

Yes

 

[feldon27]

Yes

Awesome. Although that then raises the question of whether my theme will be forwards compatible, and then when I style the Stats column, whether it will be backwards compatible. I guess if the CSS selectors don't change name/sequence it won't be a problem.

 

[cPanelAdamF]

I'm afraid that's going to be a risk for any styles for cPanel being developed. We do try our best NOT to disrupt the DOM and thus disrupt styles. We specifically do not declare the Paper Lantern DOM as a part of our SDK because we want to make big prominent changes in the future and we're currently not sure what we will be keeping and what we'll be tossing as a result.

...that being said, I am excited to see what the community comes up with to dress up the interface more. I'm definitely paying attention!

 

[feldon27]

Certainly you need the freedom to make changes later.

Have you considered a manifest or XML file to go with each style? This would allow us to specify a version number for our style AND compatible versions of cPanel for our script. It could also include an author name and URL to download. Is there going to be a place to upload/share/download themes?

 

[cPanelAdamF]

Certainly you need the freedom to make changes later.

Have you considered a manifest or XML file to go with each style? This would allow us to specify a version number for our style AND compatible versions of cPanel for our script. It could also include an author name and URL to download. Is there going to be a place to upload/share/download themes?

As far as a manifest file for each style goes, no though I get where you're going with the idea. Regarding sharing of styles goes, yes. Currently we released our testing styles on Github to stoke a bit of community contribution.

 

[feldon27]

As far as a manifest file for each style goes, no though I get where you're going with the idea. Regarding sharing of styles goes, yes. Currently we released our testing styles on Github to stoke a bit of community contribution.

Would love to see that Github page stickied somewhere and tied in with a revamped cPanel Resources page. Basically you shouldn't be able to swing a cat on the cPanel site without finding Plugins, Themes, and other stuff.

I know.. I know... File a feature request.

 

[PCZero]

One of the driving forces behind Paper Lantern was to make it simple to customize in the way that you did. Your work looks pretty good. Thank you for sharing it with the community!

Also, you might want to check on 11.52. We've made a few improvements to the UI.

Seriously you think this is EASIER Than the X3 live editor/ Not even close. With this method you need to code everything by hand and the options are much more limited. This is not opinion at all, it is absolute fact.


I know a lot of hard work has gone into PL and work continues, but to say that customizing PL is easier than X3 is just a total mis-statement.

 

[feldon27]

Seriously you think this is EASIER Than the X3 live editor/ Not even close. With this method you need to code everything by hand and the options are much more limited. This is not opinion at all, it is absolute fact.

I know a lot of hard work has gone into PL and work continues, but to say that customizing PL is easier than X3 is just a total mis-statement.

Ok I've just taken a look at the x3 Editor. Please realize that I've never used it before. I clicked on the Live Editor and then clicked "Edit Style" under x. I'm now looking at the Edit Logos and other editors and I can certainly see the appeal of these editors. Without firing up a text editor or FTP program, I can make changes to the graphics and layout all from within a web browser. I particularly like the icon/image management and Sprite Generator. However I can see the drawbacks of all these elaborate editors, and why cPanel wants to move away from them.

First, the x3 Style Editors must be updated every time the team adds a new feature, new section, new page, etc. Second, x3 locks experienced CSS/HTML editors into a specific design paradigm as the basic layout is already being dictated. x3 does not support Responsive themes. It does not support drastic style changes. If someone wanted to completely change the look of x3, to flow completely differently, it would be very difficult to do so. So I can understand the philosophy of Paper Lantern, and, handled properly, it would offer more than it takes away, but we seem to have gone over a cliff of functionality. The baby seems to have been thrown out with the bath water.

Looking at Paper Lantern, everything requires editing via FTP or SSH. Every CSS edit or Icon/File upload must be handled via FTP and third-party editors. Updating Sprites requires firing off an SSH command. By definition, any Graphic Designer who is hired to customize a cPanel theme must be given Root and SSH access.

Nobody (well at least not me) is asking for Paper Lantern to have a control panel anywhere near as elaborate as the x3 panel. That's just not realistic. However cPanel needs to come halfway. Paper Lantern will make cPanel, Inc's life easier. How about making our lives easier with a three-panel Style Editor that allows the Uploading of files, Editing of CSS/HTML, and the regenerating of Sprites? If Style Authors (including cPanel) are required to use a Manifest file for each style, then we can provide a comprehensive roadmap of the files used in a theme in a single XML file. This would eliminate the current maintenance nightmare that x3 represents to cPanel, and give something to Graphic Designers (and beleagured Server Operators) to upload/manage icons, graphics, CSS, and HTML.

As it stands now, the file structure of Paper Lantern is largely undocumented. Other than a brief mention of the global header template in "global_header.html.tt", we're given no map to the hundreds of files in /usr/local/cpanel/base/frontend/paper_lantern/. We're on our own to fish around, determine which file we need to override, and then do further guesswork on where that change goes in /var/cpanel/customizations/styled/my_style.

This is not easier.

 

[PCZero]

Actually I AM asking for the ability to do easy customization within the WHM interface. There is some VERY VERY limited ability to do so now abut it is of almost no use what so ever. PL has thrown out not only the baby but has turned cPanel into a pretty ugly non-intuitive and non user friendly interface. It is EXTREMELY difficult to do a complete custom UI. My users hate having a handful of functions hidden in the drop down menu in the header for example. Not to mention that in an effort to make things easier for handheld users they have completely told desktop user "We don't code for you any more so go someplace else if you want a control panel that is designed for you" (that HORRIBLE flat design UI YUCK). It is almost like someone on the development team has fallen prey to the thought process that it is their job to impress us with all the kewl skript kiddie code tricks they know rather than focus on a design and layout that is usable and intuitive.

This all not t say that the team is not working hard and putting in a lot of effort. I just believe that a lot of what they are doing in trying to make something 'new and improved' would be better spent in making something that is "new and useful".

 

[feldon27]

From what I can see, the files and paths exist to do all the same customization we were able to do before, it just requires poking different places and manually uploading files via FTP and running SSH commands. With just a few CSS statements, I was able to improve the front page of the cPanel dashboard. If I put a few hours into it, I could probably make something really nice that looks handmade and attractive.

As a graphic designer and web developer, I can tell you that while I am not a fan of the "make everything flat" ethos, I think cPanel's heart is in the right place here. If I were in charge of cPanel, I too would view x3 as a boat anchor around the team's neck, preventing them from adding mobile support, better notifications and new features. x3 is a decade old. A migration to something that uses modern web standards such as HTML5, CSS3, and Javascript is a necessity -- not "job security" as you claim.

That said, I think the default theme should be something that is familiar and comfortable to end users. I challenge the effectiveness of "flat", brightly colored themes. I find boxy nondescript icons to be off-putting and require significantly more "hunting" to find what you are looking for. It's distressing to see 30 years of User Interface design being turned on its ear in favor of this flat dehumanizing "Material" design language and I'm hoping that it's a passing fad. Of course if customization of the HTML, CSS, Files, and Sprites were possible without FTP and Root access, then we could do our own themes with a lot less difficulty.

@PCZero If you are wanting your voice to be heard in a constructive way, I think you've overshot your target.

 

[PCZero]

You can't have multiple skins (I am not sure which the correct term is, theme, style, and brand are thrown around here almost interchangeably so I get lost) that are 100% independent of each other. I want to have the page header look EXACTLY like the X3 skins. I want o design several different skins based off of different color combinations and have each one have a unique header (including a logo colored to match that skins color scheme). I want to develop my custom skins and enable all of them BUT ONLY them. IOW I do NOT want customers to be able to pick any of the canned PL skins.

That being said, I coudl not agree more with your statement...

> -I challenge the effectiveness of "flat", brightly colored themes. I find boxy nondescript icons to be off-putting and require significantly more "hunting" to find what you are looking for. It's distressing to see 30 years of User Interface design being turned on its ear in favor of this flat dehumanizing "Material" design language and I'm hoping that it's a passing fad. <--


The flat UI is a horrid design that is all but unusable in a desktop environment and somewhat usable is some tablet or hand held device. It is a very unnatural UI for humans to read. It (combined with the new speak titles) does absolutely an extreme amount of hunting for what a user wants to do.

I have said it before and I will say it again, the whole flat web design school of thought is one of the worst programming concepts ever conceived. It is very difficult to use and there is such little differentition between the various content and functionality of the page. The design put presentation over use and functionality which is a violation of one of the cardinal rules of we design. One should never code a page where "looking pretty" is a higher precedent than 'usability". The whole flat design reminds me of the first year design student who thinks it is his job to impress clients with all the kewl skript kiddie code tricks he knows rather than design a site that is intuitive and usable to the end user.

 

[feldon27]

You can't have multiple skins that are 100% independent of each other.

Why not?

I want to have the page header look EXACTLY like the X3 skins.

What's stopping you?

I want o design several different skins based off of different color combinations and have each one have a unique header (including a logo colored to match that skins color scheme). I want to develop my custom skins and enable all of them BUT ONLY them. IOW I do NOT want customers to be able to pick any of the canned PL skins.

There are two default themes -- x3 and Paper Lantern. You can hide one or the other from showing with these docs.
There are two default styles for Paper Lantern -- Classic and Retro. You can delete Retro if you want. Although you're discouraged from doing so, if you really wanted to, you can modify the Classic style directly, although your changes will be overwritten every time cPanel updates. You have this same problem if you are modifying x3 now.

In your situation, I would just add new styles based off Paper Lantern as the documentation describes by adding a new CSS file and editing it, and then use these docs to set that new style as the default for all users.

 

[PCZero]

--> What's stopping you?

The design of PL. It only allows you to add ONE logo and it is used throughout all skins.

--> There are two default themes -- x3 and Paper Lantern. You can hide one or the other from showing with these docs.
There are two default styles for Paper Lantern -- Classic and Retro. You can delete Retro if you want. Although you're discouraged from doing so, if you really wanted to, you can modify the Classic style directly, although your changes will be overwritten every time cPanel updates. You have this same problem if you are modifying x3 now.

This is a bastardized work around at best and it does NOT accomplish the desired functionality anyway. I want the same functionality that X3 had n that I can limit my users to selecting form ONLY my custom skins. *I should not have to do a thing with the canned skins to do this. I do NOT have to do it with X3. In X3 I merely have to disable the skins that I do not want the users to be able to select.

--> In your situation, I would just add new styles based off Paper Lantern as the documentation describes by adding a new CSS file and editing it, and then use these docs to set that new style as the default for all users.

I have created my custom skins, that is not the problem. I still do not have a way to turn off the canned skins.

 

[feldon27]

--> What's stopping you?

The design of PL. It only allows you to add ONE logo and it is used throughout all skins.

This is indeed a flaw and something cPanel needs to remedy. It is possible to work around it with a CSS trick, but it would really be better if the logo were set by CSS so we can more easily change it. Here's the workaround:

.navbar-brand-logo {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url('LOGOFILE.png') no-repeat;
   background-size: 94px 20px;
    width: 94px;
    height: 20px;
    padding-left: 94px; /* Equal to width of new image */
}

--> There are two default themes -- x3 and Paper Lantern. You can hide one or the other from showing with these docs.
There are two default styles for Paper Lantern -- Classic and Retro. You can delete Retro if you want. Although you're discouraged from doing so, if you really wanted to, you can modify the Classic style directly, although your changes will be overwritten every time cPanel updates. You have this same problem if you are modifying x3 now.

This is a bastardized work around at best and it does NOT accomplish the desired functionality anyway. I want the same functionality that X3 had n that I can limit my users to selecting form ONLY my custom skins. *I should not have to do a thing with the canned skins to do this. I do NOT have to do it with X3. In X3 I merely have to disable the skins that I do not want the users to be able to select.

This just sounds a bit like "it doesn't work like x3. It's different and I don't like it. *foot stamping*"

--> In your situation, I would just add new styles based off Paper Lantern as the documentation describes by adding a new CSS file and editing it, and then use these docs to set that new style as the default for all users.

I have created my custom skins, that is not the problem. I still do not have a way to turn off the canned skins.

Paper Lantern is the BASE style. I agree that cPanel should provide us a way to hide it from the menu. Again, Retro can be safely uninstalled.

 

[PCZero]

1) Thanks for the work around. Hopefully Michael and his team will address this soon.

2) Not at all foot stomping at all. Even cPanel discourages users from modifying the canned skins (again I am not sure if theme or style is the correct term du jour). In addition, retro is going away sooner or later which renders any use or modification of it is wasted time and effort.

3) I comprehend that the default PL theme is exactly that. With X3 there were a few default skins, all of which could be disabled. It would seem pretty easy (for someone who is familiar with the code) to add a single additional parameter that enables or disables any given PL skin. All it would technically do is display (or not display) the skin n the list available for users to select from in the appropriate screen.

 

[feldon27]

2. I didn't realize Retro was going away. I don't think there's anything stopping us from adopting it and building upon it ourselves. Also realize that the left "Stats" bar will be shaking off its <table></table> formatting and going to something CSS-based, so I'm going to wait and see how that looks before I commit to huge style changes.

3. We're able to hide Themes from the menu, but we're not able to hide Styles from the menu, so as you said we cannot hide "Paper Lantern" from the user selection menu. That's definitely a problem.

 

[Infopro]

From the cPanel Blog:
It’s time to say goodbye to X3 | cPanel Blog

While the Retro Style for Paper Lantern will approximate the appearance of X3, it will not be a perfect implementation. We are providing the Retro Style to ease the transition for users, not as a final destination for users. We may chose to disable new user interface features in the Retro Style rather than forcibly adapt them into this holdover style. A separate deprecation schedule for the Retro Style will be announced in the future.