[Theme] Dark Horizon theme

Hi,

I rice everything using horizon color theme and made a theme for the yunohost portal.
Some people could like it too so Im happy to share it.



I added some feature I like :

Yuno Dark-Horizon

A simple horizon color theme for Yunohost, based on the excellent Nature Mount Theme.

  • Added Custom app icons support
  • Added Custom Avatar support based on username.
  • Added Terms Of Service Modal Feature.
  • Open link in new tabs by default.
  • Mobile / Tablet Column layout.
  • Added color theme configuration CSS root variables.
  • Small sidebar

Enjoy !

13 Likes

thank you for your contribution!

1 Like

Oh, nice :heart: .

1 Like

Very nice.
The app icon must be the id of the app?
Can we add at the bottom of the login page links to TOS and privacy policy?

thanks !
The apps icons are found using the display name from the apps installed and available when loading the portal.

Example :

<span class="name">Paperless-ngx</span>

Would use the file Paperless-ngx.svg from :

/pictures/apps/Paperless-ngx.svg

I didn’t provide all the icons because there is hundreds of possible apps to cover. I added a few from the apps I currently use. I personally don’t like to read when browsing an app quickly and prefer visuals rather than 2 letters. External request would have been a problem too with CORS and all that jazz. That’s why I added this little feature, especially when you like clean icons and matching colors like me.

If someone has specific needs for other apps and dont want / have time to implement, feel free to open an issue :slightly_smiling_face:

About the TOS/privacy. If you provide me an example text. I can push that on the repo and add an option to activate/deactivate it :+1:.

If I install a custom webapp and rename it to “my personal blog” than the svg file must have this name?

What about having two .md files named tos.md and privacy.md containing the text so anyone can put what he needs (or html files)

If I install a custom webapp and rename it to “my personal blog” than the svg file must have this name?

Yes, that’s it !

What about having two .md files named tos.md and privacy.md containing the text so anyone can put what he needs (or html files)

It sounds convenient, but you need an external lib to parse markdown to HTML. Injecting an HTML string also sounds like a bad practice.

An external HTML file would be out of the scope of the theme. The theme feature is limited by design. Despite having custom functions to inject custom code, the available information to work with are limited. At least it’s secure !

Well, I guess loading a .md file or string would be the best way to go. Then ready to be injected into a nice modal.

I’m surprised this feature is not already available in yunohost, to be honest. I will look into it before the end of the week.

1 Like

Nice theme !

Note that YunoHost 12 completely change the way the portal work.

Sadly, i believe old themes won’t be compatible anymore, even if it seems axolotle worked on adding a custom.css feature.

Note that the new portal uses a dedicated API, allowing to reset password and register: yunohost/share/actionsmap-portal.yml at bookworm · YunoHost/yunohost · GitHub

4 Likes

Sounds good, I look forward to a nuxt version of the portal. The timing isn’t too bad, considering Debian LTS will change this summer. And it looks like the new portal is made for bookworm.

Wont upgrade until the end of the year though, especially if version 12 is a major version ahah.

A theme feature would defo be a must-have to be able to share theme to the community ! It also depends on the structure of the future portal, of course.

Would be great to open the portal to custom API end points to extend it towards a dashboard like portal. Per example, if I want to keep track of my disc space without an external app bound on a sub domain, just pop a small local HTTP server and grab the data from the frontend custom API block.

I will check the docker project, seems interesting !

So I have managed to install yuno-horizon and faced some issues that I fixed :

$ ssh using root user
$ cd /usr/share/ssowat/portal/assets/themes
$ git clone https://github.com/niemes/yuno-Horizon

Then I uploaded some icons to pictures/apps folder.
I didn’t see the icons, I looked in the console and it was full of not found. It turns out that the git clone created a folder named “yuno-Horizon”. I’ve renamed it to “Yuno-Horizon” (the folder name is case sensitive and the app icon also) and got it fixed like here :

Note that HedgeDoc icon didn’t show because the app name had a space at the end, fixed by removing that space.

But I have another account with a longer name and a longer email address that is out of the user details box, like here

Thanks for this nice theme.

Hey,

Nice catch !

  • I Will fix the user box with long names/mails.
  • I’ve updated the name of the repo to avoid the uppercase issue

About the TOS modal, I checked last weekend, it’s not hard to implement, I have a plan in mind and will implement this using the local storage. TOS usually needs to be accepted once and shouldn’t reappear for the same user after, so the portal needs to remember that on the frontend. Should work

Thanks for your feedbacks !

1 Like

Mmhh, boogle just flaged my server as dangerous, not sure if it’s related to the recent theme change. My server was running for about 8 months.

I would be crazy surprised if CSS code or simple JavaScript frontend code could flag a server as dangerous.

Check your SSL certificate and monitor RAM/CPU to see if you didn’t catch a nasty bug :microbe: :+1:

Themes are just simple styling rules and small JS functions to change the UI.

1 Like

Certificate is OK and nothing abnormal about cpu and ram usage.

@ljf mentioned to add legal details on the portal here Google flags my sites as dangerous (Deceptive site ahead) - #141 by ljf

The thread is very long and the only fix I found is to edit the portal to make it “different” from the standard one.

I asked for a review and it took less than 5 minutes to get the flag removed.

Alright !

I added the TOS Modal feature, It uses a markdown file with showdown and micromodal.js libs. Quite fast to parse and render.

Here are the options :

    // ? Change to True if you want to use Term of Service Modal Feature
    tosModal: true,
    tosFeature: {
        // ! Change to the url of the file !
        markdownFile: `https://${document.location.hostname}/yunohost/sso/assets/themes/Yuno-Horizon/README.md`,
        // ! Change to true if you want to redirect users rejecting the TOS.
        redirectRejected: false,
        rejectURL: "about:blank",
        modal: {
            title: 'TOS Yuno-Horizon Feature Title',
            bottomMessage: "Modify this texte in your config file."
        },
    }

Have fun, let me know if you find a bug :+1:
Cheers

1 Like