Interested in a new default theme?

[mrflos]

Hello, our non-profit organisation members, especially @seballot worked on a new theme for etherpad.

It's visible on https://pad.colibris-outilslibres.org and the code is available here : https://framagit.org/colibris/etherpad-custom-colibris

It's a bit tricky and could be more generic, so just let me know if it would make sense to add it to the core.

Best regards

[muxator]

Hi @mrflos, the theme is really neat, I personally like the aesthetics of https://pad.colibris-outilslibres.org more than a default Etherpad installation.

I think that making it the default theme is a change that requires at least consensus from the community members and a clear deprecation plan, so it is worth a bigger discussion.

In the meantime, I have two quick questions:

• would be the theme compatible with a plain Etherpad install? I see a long list of plugins at https://framagit.org/colibris/etherpad-custom-colibris#pr%C3%A9requis. Probably they are aimed at replicating your whole UX, but an explicit confirmation would be comforting
• what's the licensing situation for the fonts? From a quick search it seems that Geomanist is free only for regular and italic

[mrflos]

Hi @muxator ! Thank you for your quick reply.
I'm aware that we need a lot of discussions and a lot of small changes in order to get this theme generic enought to be accepted as default.

To answer your 2 first questions:

• the plugin list is indeed the exact configuration to obtain the whole UX, if you install it without them, it would this be OK and look like this : https://pad.coop.tools/p/YkZw5nw1GI
• you are right, the license of this Geomanist font seems not to allow redistribution, but we could change it for example with Montserrat, which is quite similar and under compatible licence

Other things that we would have to discuss:

• the home background image (it contains a specific logo): i could ask to remove the logo
• the titles colors (the green may be too specific)
• what to do with the extra plugin styling ...

If the etherpad community sees an interrest on working on doing something more generic, we would be happy to contribute!

Best regards

[petrk94]

@mrflos I really like the new theme design, it give me more a feel like in google docs, and this would be even from my team mates make it more suitable to use. Thanks for sharing, I want to use it, but how to change the font manually?

[mrflos]

HI @petrk94 AND @muxator ,
I have updated https://framagit.org/colibris/etherpad-custom-colibris in order to use a free licence.
I translated the readme in english and clarified licence. I also gave basic instructions to change fonts and other customs.

[muxator]

Hi, @mrflos, thanks for the changes.

We could start agreeing on some guidelines and sketching a plan for inclusion. Tell me what you think about this preliminary notes (I plan to rewrite them organically if we start):

1. an UI switch is a major change. Etherpad has been around long enough to have to care about this;
2. as such, it cannot happen abruptly: we could make the theme optional for a while, measure the reactions from users, do a few tweak releases, and finally switch to the new theme, keeping the old as an option;
3. I would be happy of shipping 2.0 with the new theme as default;
4. mobile experience should be first class.

If you agree on keeping committed to this plan, here's some practical items for us to check:

1. Etherpad: find if there is a way of activating a new theme via settings.json, without having to copy files around (mandatory)
2. Etherpad: find if there is a way of activating a new theme without having to restart Etherpad (nice to have)
3. Colibris: preliminary tasks before inclusion
   • [X] use free fonts
   • [X] license: I am no expert, buth I think that Apache 2 license (Etherpad) is not compatible with GPLv3 (Colibris).
   • [ ] has to work across browsers
   • [ ] has to work on mobile
   • [ ] has to pass front end tests
   • [ ] no big binary blobs: when it will be integrated, the repository has to stay as small as possible (nice to have)
4. When it's ready, integrate the new theme in Etherpad repository and make it optional (let's say in 1.8?). From that moment the development of the theme takes place in the main repo.

For what concerns my work of today, I have created a new-theme category for grouping the work there.

[seballot]

Hi everyone, I'm Sebastian, I've been working on this new theme. I'm happy to see that your are also enthusiastic about changing etherpad default theme :)

@muxator, your plan seems good to me ! And as I commented in a dedicated ticket, this theme was a quick first shot, only applying css rules on top of etherpad code. if I can change a bit the core etherpad code, I would be able to increase much more the user experience.

I'll be happy to participate improving this great tool ! See ya !

[ukcb]

It would be nice if it also looked good with ep_mypads. That would be important to me. Many Thanks.

[mrflos]

Ok, i changed the licence to apache 2 to solve this first issue. I think that we must work with @seballot on a branch based on the dev branch of etherpad, in order to test in the best conditions, solve frontend tests and tune design for mobile phones.

If we add a setting to enable the theme, maybe we should discuss what would be the optimal directory structure, for example (we should discuss this to find the best plan, this is just a draft in my mind) :

• the themes should be in one folder in static/themes/<mytheme> containing the css and js (as i can understand, the templates are global and cannot be customised in a theme).
• if the setting parameter theme_folder exists and the folder exists, the value is saved in the settings, otherwise it's saved as an empty string
• in the templates, all js and css paths are changed to include the file in the theme directory (if the setting is on and if the file exists), or fallback to the default old etherpad theme file otherwise

This solution may be messy if the default theme is in the root of static while other themes are in subfolders, maybe it would be better to have the default theme in static/themes/default folder.

What would you think of this plan?

[muxator]

1.

the themes should be in one folder in static/themes/ containing the css and js (as i can understand, the templates are global and cannot be customised in a theme).

I agree that the default theme should become just another theme named default. What would remain under static?

2.

if the setting parameter theme_folder exists and the folder exists, the value is saved in the settings, otherwise it's saved as an empty string

OK

3.

in the templates, all js and css paths are changed to include the file in the theme directory (if the setting is on and if the file exists), or fallback to the default old etherpad theme file otherwise

Could we use the existing ejs mechanism for doing this?

[mrflos]

I agree that the default theme should become just another theme named default. What would remain under static?

There would still be favicon.ico, robots, test.html and the fonts folder.
As for the custom folder, it could also be kept there, but it may be confusing as it would be more logical to do a new theme for doing some custom changes... I have no problems to keep it for backward compatibility, just we should add somewhere a documentation that explains that anything in custom will be used in priority...

Could we use the existing ejs mechanism for doing this?

Sure! I haven't studied the etherpad core's code now, but better not to re-invent the wheel!

[muxator]

Hi, @mrflos, @seballot,

I have dug a bit more in the code and I am thinking about how to best implement the proposal.

The src/static/js directory contains a lot of application code, and it is not wise to make it part of a theme. The only js customization point currently provided is the customStart() function.

My proposal is based on what we said before, simplifying it a bit, given the current status of the code base (thus the name change theme -> skin).

• in this initial phase, the skins will continue to have the same logical structure they currently have in the custom folder (limits included, @seballot: we can evolve after the integration)
• all the skins will be put under src/static/skins
• the custom directory (which is an empty example skin) will be moved under src/static/skins/no-skin, and will be the default one
• the colibris skin will live inside src/static/skins/colibris
• a new configuration setting skinName will be added. If the setting does not exist (i.e., old configuration files) a warning will be printed, and a default of no-skin will be assumed
• the new optional theme will be announced as part of the new release

I have a POC of the modifications for the settings in place. In order implement them in a correct and secure way (directory name -> risk of directory traversal), I need to fix some bugs I found when doing the prototype.

I hope to have something in ~days, bye!

[petrk94]

Can the theme already be used or is there some copyright problem?

[muxator]

The copyright problem has been addressed already.

This work covers more the integration & future plans.

[mrflos]

@muxator : very good plan, i also started some POC, but its quite a chalenge to do themes without the templates, so skins is a better idea...
I will wait for your poc, or tell me if your prefer that I do something.

[petrk94]

I would like to bring my own pad on my server online for public with the new theme, what I have to replace, so there are no problems with copyright?

[mrflos]

@petrk94 : you can find the code that respect free licence (published under the apache licence) here : https://framagit.org/colibris/etherpad-custom-colibris/
In the readme of this repository, there are some instructions how to install it (TL;DR: place the files in the src/static/custom folder).
If you are not in a hurry, I would suggest to wait for the official release of the skins, but we don't know when exactly this will be (i'm hoping for this to happen before 2019 but we don't know yet!)

[petrk94]

@mrflos well, I have it already running successfully ;) But I dont want to share it to the public people, if there are problems with the law. The license is in general nothing I care really, due I dont share the software or sell it. I just want to know, whether its legal to let people use it or whether there are legal things, which I should avoid, before I share it with another people. Thanks

[muxator]

Sorry for the delay, I had to work on #3466 before working on the skin.

Now that that part is done, I have moved on writing the spec for the preparatory work in #3471. I think it is complete, but comments are welcome.

I will asap open a PR that implements it.

[muxator]

The PR is ready: #3475.

[muxator]

Hi, @mrflos, @seballot, the modifications on Etherpad's part are done & pushed.

Please pull latest develop and base your work on that.

The most relevant modification is that the skin has to be put under static/skins/colibris, and you have to set a configuration parameter skinName: "colibris" (refer to settings.json.template).

I have also updated the documentation, mentioning that, starting from Etherpad 1.8, colibris is the new experimental skin, candidate to become the default in 2.0.

Once the other issues in https://github.com/ether/etherpad-lite/labels/new-skin are solved, we can merge the new skin directly into Etehrpad's codebase.

Thank you.

[mrflos]

Great job! I'll be trying to solve the last issues and implement our skin into the right place this week.

Thank you again for this amazing change in such a short time!

[ldidry]

It would be nice if it also looked good with ep_mypads.

Since MyPads shows Etherpad in a iframe, I can't see a reason that would alter the good look of Etherpad in it.

[mmuman]

Btw, how does it react vis-à-vis a dark theme (ie. default dark grey background in the browser settings) ?

For example, the current one stays with white background even when using Owl, and it's about the only thing that can't be made to work with it. I since then found Dark Reader which does seem to apply correctly though.

[philippeponge]

SUPER Les évolutions sont attirantes. Cela donne envie de revenir vers cette solution ;-) Merci.

[seballot]

Hello everyone, Just to let you know that I'm currently working on implementing a clean colibris skin into the etherpad. I made the basic UI, now working on the commons plugins to make then work properly !

@muxator, re the skins directories, that is really nice thank you, but I think we also need to keep the old static/custom folder, cause if someone choose one skin, they will not be able to add some lines of css to fit their needs in top of the skins. WDYT? I could add it if you want.

Also, I'm wondering why there is some fonts included in the etherpad css code (opendyslexic, robotoMono, Montserrat)? Will not be better to let each people import they own font?

And finally, re the icons and fontawesome, they are a bit old no? would be nice to update the font. Do you know why the fontawesome lib is used with this font/config.json and using the icon code in css instead of using the classic "fa fa-icon" classes in html? Does the fontawesome-etherpad font is the entire fontawesome or only a subset of the icons used by etherpad?

Thanks for you help !

[lpagliari]

Does the fontawesome-etherpad font is the entire fontawesome or only a subset of the icons used by etherpad?

Just a subset of the icons, @seballot :

There's more info about it here

[seballot]

oh great, thank you @lpagliari !

[Serkan-devel]

How long does it still take until that theme is the default?

[muxator]

Hi @seballot,

thanks for your work. As you can see everyone is waiting for it.

Let me answer to your question:

[...] we also need to keep the old static/custom folder, cause if someone choose one skin, they will not be able to add some lines of css to fit their needs in top of the skins. WDYT?

In its current state (and this will be true for at least ~2 releases), a skin is already a way of putting custom code on top of the "standard" front end code (but you already know this very well). I am not sure that focusing on enabling yet another layer of customization on top of that would be a wise spending of resources.

The reasoning behind this is the following:

If I were a basic user, I would be ok with a skin that "just works", without too many knobs. On the other side, if I were an advanced user wanting to customize a skin, it would be within my reach to perform my modifications on top of the skin I want. Even more advanced users would probably like the possibility of doing other customizations. But then, keeping complexity under control has a value on its own, and we are already introducing a change here.

I would like to focus on fixing as many issues as possible on the new skin for now.

However, I am ok with reconsidering the choice after the release, once we hopefully will have gathered some feedback from users.

Sounds fine?

[seballot]

ok sounds fine :)

[petrk94]

Personally I think it were the best to make it available to choose the skin on the admin configuration without hassle with the code and folders. Like the Plugins make a list of available themes with a link to demo or screenshot and than the admin of it, just can click and apply it on the instance. Sure, it makes some work, but would reduce the problem for long term. Even me as advanced admin, I would prefer the admin board apply theme option, due its faster. And who really want to customize it, than here should not be a problem.

[seballot]

Btw, @muxator , In the template pad.html, I would like to add to #editorcontainerbox all the activated plugins as classes, so I will have something like

<div id="editorcontainerbox" class="ep_comments ep_author_neat"></div>

So I would be able to change the css depending on which plugin is activated. Could you please help me with that? :)

I checked how the admin page was doing this, something like

var pathComponents = document.location.pathname.split('/');
    var baseURL = pathComponents.slice(0,pathComponents.length-2).join('/') + '/'
    var room = url + "pluginfw/installer";
    var resource = baseURL.substring(1) + "socket.io";
    var socket = io.connect(room, {path: baseURL + "socket.io", resource : resource});
    socket.emit("getInstalled");
    socket.on('results:installed', function (data) {
      console.log(data);
    });

But I don't know where to put this code...

[muxator]

Hi @seballot, I'll try to have a look in the weekend.

[seballot]

Thanks @muxator ! did you manage something ? From my part, I'm almost ready, just need to fix the main layout depending on the plugins activated

I've styled the following plugins

• brightcolorpicker
• comments_page
• font_color
• set_title_on_pad
• tables2 (I also get the ownership of this repo (which was dead for 3 years), and I fixed some critical bugs, working fine now !)

[muxator]

@seballot, I have opened #3488 for the functionality you asked for.

1. I assumed that you only wanted to define class names for client-side plugins. Please check if this is what you wanted (the definitions are described in the issue)
2. The current implementation (PR #3489) is not real-time friendly: when an administrator installs or removes a plugin, the connected clients will not be notified, and they will have to refresh the page in order to have an updated class list. Since you are envisaging the use case, please help me imagining the possible impacts on the UX of an out of sync class list.

[seballot]

Here we are ! #3496

[muxator]

Great, @seballot, thanks!

I have put the new skin in https://beta.etherpad.org for everyone to see. I have also updated the default message on a new pad:

IMPORTANT: this is the experimental version of the new skin we are preparing for Etherpad 1.8. Please help testing, reporting any issues to https://github.com/ether/etherpad-lite/issues

I still did not read any changes: I will start reviewing them as early as possible. This will probably take time and more iterations (I'll try to be a third party only caring for code quality).

Thanks for all the work in the meantime!

[seballot]

Thanks for the deploy to https://beta.etherpad.org ! Would it be possible to adds others plugins so we can perform better tests?

npm install ep_brightcolorpicker ep_comments_page ep_embedded_hyperlinks2 ep_font_color ep_set_title_on_pad ep_tables2 ep_headings2 ep_author_neat

Thanks for the code review. This is mainly Css files, so it should not be too much work for you I hope !

[seballot]

could you also remove the "useMonospaceFont" option which seems to be activated on this instance? :)

[seballot]

checkout the brand new timeslider ! https://beta.etherpad.org/p/testslider/timeslider#59

[muxator]

• plugins installed
• removed useMonospaceFont. Thanks to it, I discovered that there is a bug in the timeslider view, that does not respect that setting and always uses a proportional font.

[petrk94]

What the "star" in the slider is saying?

Ps. Just my opinion, but I think the rename box is pretty long, can not be reduced to the size of the text itself and containing the title while editing? PPs. great and thanks for making that possible @seballot :)

[seballot]

@petrk94 the star is when you save a revision (in the toolbar, on the right, just next to timeslider button)

[seballot]

FYI, the fonts for text and titles in this PR are just as example, I think the default theme should not use a specific font for titles (here I used opendyslexic)

[mrquokka]

I tried use them, it cool! But have some bugs:

• need 2 copies on symlink for colibris, a) folder name "custom" in src/static b) folder name "colibris" in src/static/skins
• anyway not enought "index,js" file on colibris (used on main page of etherpad)
• i think that etherpad need ep_adminpads - drop pads with api non-confortable

Anyway:

• export to PDF does not work(server crushed)(with abiword);
• ep_tables2 is horrible menu now. But this bugs not important, product is really good.

[seballot]

Hi @mrquokka, I did not understood all your comments, but regarding ep_tables menu, why you say it is horrible? You have the same than me?

[mrquokka]

Hi @mrquokka, I did not understood all your comments, but regarding ep_tables menu, why you say it is horrible? You have the same than me?

Hi! I have some another symbol behind table icon. Fonts on this menu and ui are different, cannot change table background without join menu-table properties.

That is just a wish - Integeration with toolbar

[seballot]

@mrquokka can you please provide a screenshot how it looks for you?

[mrquokka]

@mrquokka can you please provide a screenshot how it looks for you?

Yes, that's it.

[seballot]

thanks @mrquokka ! It seems that you don't have the new icons, cause you should have the table icon, and also the link icon on the right (you got just some underscore). Can you please refresh clearing the cache? shift + F5 or ctrl + shift + R ?