Which your Elgg version?

There are 2 types of this box:
- dropdown menu on the topbar
- module with login form on the page

What of this do you want to change?

If you want to change CSS, you need to add a custom style to your plugin.

Our experience has led us to abandon the dropdown menu and redirect users directly to the login page.

PS: The old links and content you provided no longer exist.

Thanks for the reply!

My Elgg version is 6.1.

I want to change the module with the login form on the page.

Even if you ignore the background image (which you should!), you will see that the left and right sides of the form are not visible. Since I know I will have to support a phone this narrow, I must adjust the login form.

https://drive.google.com/file/d/1Veb-BWeVv_FKC8auCcMnuJRzzx6VJXAr/view?usp=sharing

Thank you for the link to the CSS files. I will try to find which file(s) affect the login form.

You can override the view or customize CSS.

This should be done in a custom plugin.

Don’t Modify Core

Seems, you've enabled Restrict pages to logged-in users option aka Walled Garden mode.

All you need is to add your own CSS styles.

In Walled Garden mode, just use .elgg-page-walled-garden as the parent selector and then use DevTools/Inspector to add the necessary styles for different media queries.
(I hope you know CSS).

You can use this skeleton plugin to quick start.

Open

\mod\my_plugin\views\default\my_plugin\style.css

And add this code:

.elgg-page-walled-garden {


}

\mod\my_plugin\elgg-plugin.php

'view_extensions' => [
    'elgg.css' => [
        'my_plugin/style.css' => ['priority' => 1000],
   ],
],

Finally, run 'Upgrade' via Admin dashboard /admin to clean the caches.

Done.

Thanks for such a detailed answer! Plus it was incredibly helpful to have the context. I had seen several references to "walled garden" as I poked around the PHP and CSS, but thanks to you, I now understand what it's referring to.

To actually reply to your point about CSS--Yes, I have experience with CSS. I'm fairly good at it.

With such a careful and specific answer, I'm sure I'll have something working in reasonably short time. I'm very grateful.

I just wanted to report back that I was able to create the ultra-simple plugin thanks to the detailed instructions.

I had to make just two changes:

1. In the PHP file elgg-plugin.php, I had to change the reference from `elgg.css` to `walled_garden.css`.
2. In the CSS file style.css, I had to use the element `.elgg-page-walled-garden>.elgg-inner` to override the value for `min-width` (to 22rem).

That was all it took! Thanks again for the great help.

You're welcome.

I hope you have a happy and successful 2025!