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
   • use free fonts
   • 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 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.

[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 ?

[mrquokka]

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 ?

Thanks for tip. But i already tried "hard refresh".
All members have simular screen (at our team). No errors in console.
Maybe you can help me, how can i set new icons for this?

[seballot]

If you don't mind, could you continue investigate with me ?

Here is what I have when checking for the table icon in the developer tools :

Do you have same

#tbl-menu:before {
    content: "\F0CE";
}

?

Also, what kind of font is used for you ? for me it is the WOFF extension, and you? it is not loaded from cache right?

[mrflos]

hi @mrquokka i'm not sure the pull-request from @seballot was merged into the upstream develop branch of etherpad. see #3496 . Apparently the font icon had some new icons added, i suppose the table icon is part of it..
Maybe try to use the fork of etherpad from sebbalot's repository?

[seballot]

Oh, I though @mrquokka was speaking about http://beta.etherpad.org ?

[mrquokka]

Oh, I though @mrquokka was speaking about http://beta.etherpad.org ?

on this site all works, but on local server i have this problems
Yeap, font fontawesome-etherpad.woff is loading not from cache (with ctrl+f5), from cache without this combination.
HTML code is

<a title="Table options">
   <div class="tbl-icon" data-icon=true id='tbl-menu' >&nbsp;</div>
</a>

tbl_icon_before code

[data-icon]:before {
    content: attr(data-icon);
}

[seballot]

Ok, so it's just you don't have the latest verison of ep_tables2 in your local server ! Or maybe your are using ep_tables instead of ep_tables2

[mrquokka]

Ok, so it's just you don't have the latest verison of ep_tables2 in your local server ! Or maybe your are using ep_tables instead of ep_tables2

i have a ep_tables2@0.3.0

All list of packages
/work/etherpad-lite-develop

├── ep_adminpads@0.0.12
├── ep_author_neat@0.0.31
├── ep_brightcolorpicker@0.0.7
├─┬ ep_comments_page@0.0.35
│ ├── formidable@1.2.1
│ └─┬ socket.io-client@2.1.1
│   ├── backo2@1.0.2
│   ├── base64-arraybuffer@0.1.5
│   ├── component-bind@1.0.0
│   ├── component-emitter@1.2.1
│   ├─┬ debug@3.1.0
│   │ └── ms@2.0.0
│   ├─┬ engine.io-client@3.2.1
│   │ ├── component-emitter@1.2.1 deduped
│   │ ├── component-inherit@0.0.3
│   │ ├── debug@3.1.0 deduped
│   │ ├─┬ engine.io-parser@2.1.2
│   │ │ ├── after@0.8.2
│   │ │ ├── arraybuffer.slice@0.0.7
│   │ │ ├── base64-arraybuffer@0.1.5 deduped
│   │ │ ├── blob@0.0.4
│   │ │ └── has-binary2@1.0.3 deduped
│   │ ├── has-cors@1.1.0 deduped
│   │ ├── indexof@0.0.1 deduped
│   │ ├── parseqs@0.0.5 deduped
│   │ ├── parseuri@0.0.5 deduped
│   │ ├─┬ ws@3.3.3
│   │ │ ├── async-limiter@1.0.0
│   │ │ ├── safe-buffer@5.1.2
│   │ │ └── ultron@1.1.1
│   │ ├── xmlhttprequest-ssl@1.5.5
│   │ └── yeast@0.1.2
│   ├─┬ has-binary2@1.0.3
│   │ └── isarray@2.0.1
│   ├── has-cors@1.1.0
│   ├── indexof@0.0.1
│   ├── object-component@0.0.3
│   ├─┬ parseqs@0.0.5
│   │ └─┬ better-assert@1.0.2
│   │   └── callsite@1.0.0
│   ├─┬ parseuri@0.0.5
│   │ └── better-assert@1.0.2 deduped
│   ├─┬ socket.io-parser@3.2.0
│   │ ├── component-emitter@1.2.1 deduped
│   │ ├── debug@3.1.0 deduped
│   │ └── isarray@2.0.1 deduped
│   └── to-array@0.1.4
├── ep_embedded_hyperlinks2@1.1.1
├─┬ ep_etherpad-lite@1.7.0 -> /work/etherpad-lite-develop/src
│ ├── async@0.9.0 extraneous
│ ├── async-stacktrace@0.0.2 extraneous
│ ├── channels@0.0.4 extraneous
│ ├── cheerio@0.20.0 extraneous
│ ├── clean-css@3.4.19 extraneous
│ ├── cookie-parser@1.3.4 extraneous
│ ├── ejs@2.5.7 extraneous
│ ├── etherpad-require-kernel@1.0.9 extraneous
│ ├── etherpad-yajsml@0.0.2 extraneous
│ ├── express@4.16.3 extraneous
│ ├── express-session@1.15.6 extraneous
│ ├── find-root@1.1.0 extraneous
│ ├── formidable@1.2.1 extraneous
│ ├── graceful-fs@4.1.3 extraneous
│ ├── jsonminify@0.4.1 extraneous
│ ├── languages4translatewiki@0.1.3 extraneous
│ ├── log4js@0.6.35 extraneous
│ ├── measured-core@1.11.2 extraneous
│ ├── mocha@5.2.0 extraneous
│ ├── npm@6.4.0 extraneous
│ ├── nyc@12.0.2 extraneous
│ ├── object.values@1.0.4 extraneous
│ ├── request@2.83.0 extraneous
│ ├── resolve@1.1.7 extraneous
│ ├── security@1.0.0 extraneous
│ ├── semver@5.1.0 extraneous
│ ├── slide@1.1.6 extraneous
│ ├── socket.io@2.1.1 extraneous
│ ├── supertest@3.0.0 extraneous
│ ├── swagger-node-express@2.1.3 extraneous
│ ├── tinycon@0.0.1 extraneous
│ ├── ueberdb2@0.4.0 extraneous
│ ├── uglify-js@2.6.2 extraneous
│ ├── underscore@1.8.3 extraneous
│ ├── unorm@1.4.1 extraneous
│ └── wd@1.10.3 extraneous
├── ep_font_color@0.0.11
├── ep_headings2@0.0.9
├── ep_set_title_on_pad@0.1.4
└── ep_tables2@0.3.0

[seballot]

Ok ep_tables2@0.3 is fine !
So it seems that the colibris skins tables2.css is not applied correctly.
Can you check the value of etherpad-lite/src/static/skins/colibris/src/plugins/tables2.css ?
It should begin with

/* MENU ICON*/
#editbar #tbl_menu_list {
  width: auto !important;
}
#tbl-menu {
  background: none !important;
  width: 18px !important;
  padding-left: 2px !important;
}    
#tbl-menu:before {
  content: "\F0CE";
}

Check that this file is the correct one loaded

[mrquokka]

Ok ep_tables2@0.3 is fine !
So it seems that the colibris skins tables2.css is not applied correctly.
Can you check the value of etherpad-lite/src/static/skins/colibris/src/plugins/tables2.css ?
It should begin with

/* MENU ICON*/
#editbar #tbl_menu_list {
  width: auto !important;
}
#tbl-menu {
  background: none !important;
  width: 18px !important;
  padding-left: 2px !important;
}    
#tbl-menu:before {
  content: "\F0CE";
}

I have a "etherpad-lite-develop/src/static/skins/colibris"
On this folder i didn't have a "src" subfolder

[seballot]

So you just don't have my lastest code from etherpad, https://github.com/seballot/etherpad-lite or see #3496

[fungi]

The previews show rather a lot of wasted space on the left and right sides. Will that be configurable? I much prefer that the current theme allows the editing area to fill the entire browser window when the nicklist/commentbox are minimized or floated. This is especially important on smaller devices or for projecting onto screens at conferences (a primary use of Etherpad by communities in which I'm involved).

[seballot]

hi @fungi, no it's not planned to be configurable, sorry ! But you would be able to customize it with some css rules.
The theme si responsive so on smaller device there is no margin ;)
For projecting onto screens, I don't understand what is the problem of having a centered page instead of a full width page. Actually for me it have better readability on centered page (and I assume I am not the only person thinking this because I don't no a single website using a full width text ! :) ).

[fungi]

Projection screens, like the majority of computer screens, are landscape format. As a result, wasted space in sidebars means that much less information you can fit on the projection screen at a reasonable enough font size to be readable at the back of a large conference room. The main thing I'm finding problematic about this design is that, while I can "zoom" in to make the margins disappear so the editing area is the full width of the display/window, it's doesn't seem to be possible for a browser to also scale the font size independent of the line width (unlike the current traditional Etherpad interface).

I personally find the wasted space here on the sides of GitHub's WebUI and similar sorts of sites a plague on computing, and the "fake paper" rendering style of Google's documents product similarly terrible, but that's likely a matter of personal preference. I'm still old enough to remember when every row and column on your terminal had some value and I continue to avoid proportional fonts on-screen, so I understand my opinions are going to be written off as those of a Luddite. ;)

[fungi]

After some fiddling I was able to work out a browser solution where I can scale the font independently of the editable line width, so can probably make it work for my needs with a separate screen scaler (or as you suggested, by editing the CSS).

However I noticed at least the version currently deployed on https://beta.etherpad.org has lost the ability to turn off line numbers (the checkbox is still there but doesn't seem to be respected).

[seballot]

Ok that's good if you found how to fit your needs :)

I create a ticket for line number issue #3510, thanks for the report

[muxator]

The skin is almost ready to be merged (PR #3496), the only remaining doubt for me is about the behavior on mobile when showing line numbers.

I would like some comments on #3514.

[dessalines]

How do we use / enable this skin?

[seballot]

@dessalines, use the skinName property in settings.json

/*
   * Skin name.
   *
   * Its value has to be an existing directory under src/static/skins.
   * You can write your own, or use one of the included ones:
   *
   * - "no-skin":  an empty skin (default). This yields the unmodified,
   *               traditional Etherpad theme.
   * - "colibris": the new experimental skin (since Etherpad 1.8), candidate to
   *               become the default in Etherpad 2.0
   */
  "skinName": "colibris",

[mrquokka]

Is it dead now?

[muxator]

Now that Etherpad 1.8.0 is released, I have changed the default value of skinName in settings.json (70bc71c), so that all the new installs will use Colibris.

[seballot]

oh great :)