Theme: Login page customization

[swelljoe]

See here for some discussion: https://www.virtualmin.com/node/44933

I think the ability to replace the Webmin/Usermin logo on login and customize the text on the login page is very reasonable. (Localization makes that somewhat more complex. Not sure how we'd handle localization of user input data, but I guess most users would only want one language, and that'd be the language they'd used for their text without needing any decisions from the software.)

[iliajie]

Hi, Joe.

You don't need anything at the moment to make your login screen look completely different.

Theme is fully hackable. All you need is to use theme extensions editor for CSS.

This is how you could make Webmin Logo and its text from not showing:

.session_login form[method="post"] > i,
.session_login form[method="post"] > i + h2 {
	display:none;
}

You can even change the look of login screen utterly. (I noticed that custom scripts (extensions: js) are not embedded for login page. That will be fixed.)

In the future, I hope, I will be able to find time to make selectable skins for login page.

[iliajie]

..and one more.

If you want to override the default text labels, first of all - find the desired key in lang file of the module/theme.

Let's say that you want to change word Webmin on login page of Authentic Theme from Webmin to Supermin, then we take theme_xhred_titles_wm=Webmin from /usr/(libexec|share)/webmin/authentic-theme/lang/en.UTF8.

Later, create custom-lang file in configuration directory /etc/webmin/authentic-theme of the theme. (or other module if you want to tweak that)

To see what I mean just run on the console the following:

echo "theme_xhred_titles_wm=Supermin" > /etc/webmin/authentic-theme/custom-lang

This kind of customization will survive updates and you would need to do it only once.

Good luck ;)

[iliajie]

Now it's possible to use custom js scripts for login page as well.

[brianforan]

@iliajie to edit the usermin logo is it the same process as editing the webmin logo? I've been poking around online but most forum posts are from around 2009 with similar questions. I was looking for /etc/usermin but that does not exist so I'm not entirely sure where I should be looking.

[iliajie]

You should be looking into /etc/usermin.

You could just copy /etc/webmin into /etc/usermin.

It will work.

[iliajie]

Actually, I meant to say:

/etc/webmin/authentic-theme into /etc/usermin/authentic-theme

[iliajie]

At them moment the logo for Webmin and Usermin is the same.

If you want to have separate logo for Usermin just upload those to /etc/usermin/authentic-theme:

logo_welcome.png

and

logo.png

[brianforan]

And those won't be overwritten by updates if I use a custom company logo? That was my primary concern, it seemed like a lot of things that were edited may be overwritten by updates. Like the custom-lang file for example, I couldn't find any documentation or anything on where that came from, so I never tried anything.

[iliajie]

Updates don't overwrite configurations.

In your case, for now just store logos for Usermin somewhere safe. Because if you upload new logos in Webmin they will be overwritten.

Please open the separate issue to provide ability to have different logos for Webmin/Usermin if that's an issue.

In this post above you can find an explanation of how to use custom language file.

[iliajie]

Theme Extension Editor already contains custom-lang file support.

All you need to do is to find string that you want to be displayed differently.

Search for strings you want to change in /lang folder.

[NanoTest5000]

Hi iliarostovtsev... I have been enjoying Authentic-Theme.... Its really awesome

I would like to know how to customize Virtual Login Text ( You must enter a username and password) to something else....

[iliajie]

I would like to know how to customize Virtual Login Text ( You must enter a username and password) to something else....

Please could you clarify what you mean, and/or attach a screenshot?

[NanoTest5000]

[image: Demo Login.JPG] *I want to customize the Text in the login Page... I couldn't locate the Source file of the login Page...* *Please let me know how to change it.... I want Webmin Text and below lines to be customized...*

…

On Tue, Mar 16, 2021 at 5:12 PM Ilia Rostovtsev ***@***.***> wrote: I would like to know how to customize Virtual Login Text ( You must enter a username and password) to something else.... Please could you clarify what you mean, and/or attach a screenshot? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#639 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATFGMDB46Q7NJEGQINY5ERLTD47Z7ANCNFSM4C3WLSCQ> .

[iliajie]

I don't see an image.

[NanoTest5000]

Ok I have shared the link of the image https://drive.google.com/file/d/1ENdKDKQDbbbZE3cscnJMcx7wgZU-mrei/view?usp=sharing [image: Demo Login.JPG] *I want to customize the Text in the login Page... I couldn't locate the Source file of the login Page...* *Please let me know how to change it.... I want Webmin Text and below lines to be customized...* *Thanks a lot*

…

On Tue, Mar 16, 2021 at 10:29 PM Ilia Rostovtsev ***@***.***> wrote: I don't see an image. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#639 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATFGMDBSPZDJWM7TRZZQ33DTD6FABANCNFSM4C3WLSCQ> .

[iliajie]

I would like to know how to customize Virtual Login Text ( You must enter a username and password) to something else

You would have to create /etc/webmin/authentic-theme/custom-lang file and put there the following:

login_message=This server only supports blood-sample authentication, please touch the fingerprint scanner with bleeding index finger of your right hand, and wait patiently. Left hand authentication, just as authentication using other fingers is not yet supported. Sorry!

.. other language strings that can be replaced can be found here.

[NanoTest5000]

Thanks for the fast reply. U r really awesome. I have been searching for two more things. One is to change the Webmin text and logo in navigation menu and second how to hide tab title or customize tab title to show the company name? Example: https://user-images.githubusercontent.com/4426533/111518855-89e80e80-8767-11eb-97e6-02234a60cc91.png https://user-images.githubusercontent.com/4426533/111518873-8f455900-8767-11eb-97b5-746b469dff59.png

[iliajie]

How to Change Webmin Text

The text should be changed the same way as described in the comment above for login_message but this time using theme_xhred_titles_wm key.

How to Change the Logo

This can only be done using CSS theme extensions by replacing a content of an image with needed content from default icon pack or by placing own icon pack in the CSS theme extension file.

Example:

.wbm-webmin:before
{
    content: '\f00a';
}

Technically you could also use theme overlay to load CSS but there is no real need for doing this, as you can already do it using Authentic Theme extensions editor, like this:

How to customize tab title to show

This will only be supported starting with upcoming Authentic Theme 1.974 and will depend on modifying already mentioned theme_xhred_titles_wm using custom-lang file.

[NanoTest5000]

Thanks iliarostovtsev.... Everything Worked Great... Waiting for Authentic Theme 19.74... When is next update???

[iliajie]

Most likely tomorrow.

[NanoTest5000]

Hi iliarostovtsev I'm on 19.74-RC3... How to Change Page Title (Dashboard to Show the Company Name or hide it completely)...

I don't want Webmin Version And The Operating System to show on the Title bar... I want to Hide it

And Proper way to change the Favicon

And the Screenshot like last time would be very helpful...

[iliajie]

How to Change Page Title (Dashboard to Show the Company Name or hide it completely).

This is already supported for checked devel version of the theme (and described above how to change language keys). The rest is configurable from Theme Configuration page -

And Proper way to change the Favicon

Not yet possible. But I think I could provide support for this. Is this really needed?

Waiting for Authentic Theme 19.74... When is next update???

Working on new features. Delayed a bit. Coming soon..

[NanoTest5000]

Thanks a Lot @iliarostovtsev I was waiting for ur reply... I'm really addicted to authentic-theme.... It's Really Awesome....

Thanks a Lot for this Beautiful Theme.....

Not yet possible. But I think I could provide support for this. Is this really needed?

Yes Please Provide support for this.... I really need it... I want to have custom Favicon

[iliajie]

Yes Please Provide support for this.... I really need it... I want to have custom Favicon

Okay, I will see what I can do.

[NanoTest5000]

Okay, I will see what I can do.

Ok I'll be waiting....

[iliajie]

Okay, I have added ability to customize favicons as well. All you need to do is to copy to /etc/webmin/authentic-theme/favicons the modified content, which should be based on initial content found in original package under authentic-theme/images/favicons directory.

---

Next, another big change is coming with 19.74-RC4, which is ability to utilize on-load brandings. It is familiar to what Google does in Gmail. By default all users will see the following branded splash screen, based on the product they are currently using:

This however can be disabled using theme configuration page and its new options:

What is important to know about this new feature besides that it can be disabled:

1. Branding splash screen will be shown only once on full page reload
2. Branding splash screen can be dismissed manually with hitting Esc two times or double clicking with a mouse (after min timeout elapsed)
3. Branding splash screen can be customized by the same principal described for favicons but with brand directory
4. Branding splash screen can be customized (additionally, not needed in most cases) using custom_embed_product_branding sub defined in scripts.pl under theme Perl extensions
5. Internally, branding splash screen loader is pretty smart, and will be shown for at least 1 second or at max for 6 seconds. If the initial page load happens before default minimum 1 second timeout, the branding will still be shown. However, if the page load takes more than 1 second and less than 6, than the branding splash screen will wait for the page to load fully and be automatically dismissed. If the page load takes more than 6 seconds (due to an error or just a slow server), then branding splash screen will be dismissed anyway. The amount of min and max seconds for the splash screen to show is configurable. Although, not in UI but by using a browser's console with settings_product_branding_show_time_min_privileged and settings_product_branding_show_time_max_privileged options, which can be saved with theme.config.save() command after tweaking. The sanity check is done for min is 1 to 10 seconds and for max is 1 to 120 seconds.

[NanoTest5000]

Thanks a Lot @iliajie

[iliajie]

I wish we could use a single svg for favicon, tiny and nice. 🙁

[NanoTest5000]

Hi @iliarostovtsev I'm Really Sorry for disturbing u... But i really need ur help on my Project...

I know we can change the titles like theme_xhred_titles_wm in custom-lang file

But There's no option to change the Title in Login Page of Webmin and Login Page of Usermin

I want to Customize the Login to Webmin and Login to Usermin to Something Else

Please Help me I really couldn't figure out...

I have attached the Screenshot

[iliajie]

I want to Customize the Login to Webmin and Login to Usermin to Something Else

Check:

/usr/{libexec|share}/webmin/lang/en

.. and its session_header key - later use custom /etc/webmin/custom-lang file to override it.

---

Do you really own cloud.com domain? 🙂

[NanoTest5000]

Thank u soo much @iliarostovtsev ❤

Do you really own cloud.com domain? 🙂

I own many domain's but cloud.com is not mine 😉

[NanoTest5000]

Hi @iliarostovtsev Is it Possible to disable the favicon ???

And

How to subdomain wildcard URL redirect ???

I want to redirect all subdomains to domain.com

subdomains.domain.com to domain.com

I tried *.domain.com but didn't work

[iliajie]

How to subdomain wildcard URL redirect

Not sure what you're asking. Redirect from where to where (what is the full URL before and expected after the redirect)?

Is it Possible to disable the favicon

By creating empty pngs for custom favcons described above.

[iliajie]

Is it Possible to disable the favicon ???

Check this commit out - 4019e58

[iliajie]

Check this commit out - 4019e58

Actually this one - 40f4358

[NanoTest5000]

Not sure what you're asking. Redirect from where to where (what is the full URL before and expected after the redirect)?

anything.domain.com to domain.com

or

anything.domain.com to https://domain.com

I want all subdomains like mail.domain.com and whatever.domain.com to go to my main domain ( domain.com or https://domain.com )

i tried using wildcard * But it didn't work

[iliajie]

I want all subdomains like mail.domain.com and whatever.domain.com to go to my main domain ( domain.com or https://domain.com )

Cannot help with that. I suggest you check for webserver documentation. Setting up redirects is quite common question.