Please, less flashy icons for eye protection <3

You should be able to adjust it locally

@alain01 but it's only to highlight the currently selected module, so it's clear where we are on the menu, especially when you have a lot of modules. Do you think we should remove it?

Ok, not yet tested, maybe tonight.
But, yes, we need to remove this line:
font-weight: bold;
This style could shift all the page layout.
Words are bigger, in height and width.
This can shift everything.
for the other parameters, let me test.

@cesagonchu BTW, the yellow highlight was added to highlight the icons. Normally it would look like this:

Honestly, I'm not a fan of icon highlighting.

To emphasize something, as Alain says, enlarging the font isn't the ideal solution.
I much prefer the second method (changing the background of the active module to a different color).
Or another idea: change the color of the module name and the icon for the active module. Use a color opposite the default menu color. It'll look nicer and won't scratch the retina.

;-)
yes misunderstanding !
Cesag thought that Mamba was going to add the colour yellow to the menu.
It was just a stroke of the pen (Stabilo) to show the changes he was proposing!

I recognized the highlight color, I know this wasn't going to be the rendering.
It's often used to highlight a cursor, for example.
It's the contrast of the white and the flashy blue that hurts my eyes.
The enhancement just made me rethink my eye problem. Many of us have eye problems.

@cesagonchu that could be changed, not a problem. Is the blue color in xswatch4 OK for you? or the original xBootstrap theme?

I've committed it, but improvement suggestions to xbootstrap5 are always more than welcome.

I prefer xswatch4 (Dark mode).
It's the color contrast that hurts the eyes.

@cesagonchu, add this code to the /themes/xbootstrap5/style.css file:

a {
    color: #2fa4e7;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #2196d3;
    text-decoration: underline;
}
.text-primary,
.link-primary {
    color: #2fa4e7 !important;
}
.text-primary:hover,
.text-primary:focus,
.link-primary:hover,
.link-primary:focus {
    color: #2196d3 !important;
}
.btn-primary {
    background-color: #2fa4e7;
    border-color: #2fa4e7;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #2196d3;
    border-color: #2196d3;
}

.nav-item > a.nav-link {
    color: #2fa4e7; 
}

and let me know if this solves your color issue

@cesagonchu You can also test the "dark" mode of xbootstrap5:

The switch is in top-right corner of the website:

Yes, I tested xBootstrap5 and I like the button at the top right that lets you change to a dark theme.
But that blue is still too flashy and the background is too black in my opinion. I prefer the dark gray of the xSwatch4 theme.
You want me to add this code to xBootstrap5 or to xSwatch4?

I ask that cause with this feature, you introduce a hard code design in a php file.
The aim is to separate code (PHP), data (smarty) and design (tpl).
If we can overload the design, it's won but I dont understand how to overload it.

I ask that cause with this feature, you introduce a hard code design in a php file. The aim is to separate code (PHP), data (smarty) and design (tpl). If we can overload the design, it's won but I don't understand how to overload it.

@alain01
It looks like its the Font Awesome icons from the CSS.

@mambax7
Is this a documented feature for module developers to implement in their modules? So it would show up nice in the Main Menu block.

@alain01 It looks like its the Font Awesome icons from the CSS.

Yes but it's design style in the php file (xoops_version.php)
If we can overload it, it's very usefull, sure.

@alain01 It looks like its the Font Awesome icons from the CSS.

Yes but it's design style in the php file (xoops_version.php) If we can overload it, it's very usefull, sure.

I wasn't understanding earlier, but I see now. Yes, How do/can website admins/designers change the module's menu icons without having to modify the module files itself? If its not a feature could this be something we can discuss?

Yeeees, yes, you've understood perfectly ;-)
That was my question.

If its not a feature could this be something we can discuss?

@mambax7
Could we continue to discuss here or in xoops.og about the overload ?

@alain01 it's up to you - you can continue here, or you can start a topic on xoops.org

@ihackcode the icons are an option for the module developers to provide default icons, if they want.
For existing themes, it has no impact. For example, if you look at xswitch4 theme, adding the icons had no impact, because xswitch4 doesn't use them.
Now, as a theme designer, you can take advantage of these icons and use them, as I did in the xBootstrap5 theme. And I'm sure you could also do it for individual modules, since it's all in Smarty and CSS

@ihackcode BTW - somebody on the Facebook suggested a "multi-layer" approach:

that was done by @tad0616

I'm not sure what it exactly means, but if it makes sense and is helpful, there might be some changes/improvements to it

Layer overlay.
That is, a menu layer and icons on top (or below).
This gives the option to choose with or without an icon.

In our example, a Smarty filter can be applied to the output to add icons if the option is enabled, for example, in the admin.

In our example, a Smarty filter can be applied to the output to add icons if the option is enabled, for example, in the admin.

Humm sorry to insist,
but montuy, a smarty filter in you mind (as you suggest, display or not display the icons) is not fully fonctionnal to separate code / data and design.
If I want to change the icons, (not remove but change), I need to modify the php file and that, it's a bad step backwards, just like BEFORE overloads, i.e. before 2003 (I think).
Mamba's idea is very interesting, but it can't stay as it is.
We need to keep working on finding a way to separate design from code, otherwise we'll be back to hacks, the worst of them.
I'm sure that one of you will find a solution to separate the 3 elements as is the case with .tpl files.

I hope you're all convinced not to put design back into php code...

@alain01 said:

"If I want to change the icons, (not remove but change), I need to modify the php file "

You don't have to do it. The values in the xoops_version.php are just the default values for the icons.

Now, as a theme designer, you can:

a) ignore the icons altogether, as it is now in the xswitch4 theme: \themes\xswatch4\modules\system\blocks\system_block_mainmenu.tpl

<ul class="nav flex-column">
    <li class="nav-item<{if empty($block.nothome)}> active<{/if}>"><a class="nav-link" href="<{xoAppUrl}>" title="<{$block.lang_home}>"><span
                    class="fa-solid fa-home"></span> <{$block.lang_home}></a></li>
    <!-- start module menu loop -->
    <{foreach item=module from=$block.modules|default:null}>
        <li class="nav-item<{if !empty($module.highlight)}> active<{/if}>">
            <a class="nav-link" href="<{$xoops_url}>/modules/<{$module.directory}>/" title="<{$module.name}>"><span class="fa-solid fa-check<{if !empty($module.highlight)}>-square-o<{/if}>"></span>
                <{$module.name}>
            </a>
            <ul>
                <{foreach item=sublink from=$module.sublinks|default:null}>
                    <li>
                        <a class="dropdown" href="<{$sublink.url}>" title="<{$sublink.name}>"><{$sublink.name}></a>
                    </li>
                <{/foreach}>
            </ul>
        </li>
    <{/foreach}>
    <!-- end module menu loop -->
</ul>  

b) use the default icons, as it now in xBootstrap5:

<ul class="nav flex-column">
    <li class="<{if !$block.nothome|default:''}>active<{/if}>"><a href="<{xoAppUrl ' '}>" title="<{$block.lang_home}>">
            <span class="fa-solid fa-home"></span> <{$block.lang_home}></a></li>
    <!-- start module menu loop -->
    <{foreach item=module from=$block.modules|default:null}>
        <li class="nav-item<{if $module.highlight|default:false}> active<{/if}>">
            <a class="nav-link" href="<{$xoops_url}>/modules/<{$module.directory}>/" title="<{$module.name}>"><span class="<{$module.icon}>"></span>
                <{$module.name}>
            </a>
            <ul class="no-bullets">
                <{foreach item=sublink from=$module.sublinks|default:null}>
                    <li>
                        <a class="dropdown" href="<{$sublink.url}>" title="<{$sublink.name}>"><span class="<{$sublink.icon}>"></span> <{$sublink.name}></a>
                    </li>
                <{/foreach}>
            </ul>
        </li>
    <{/foreach}>
    <!-- end module menu loop -->
</ul>

c) in the code above from xBootstrap5, you can add a check for a particular module by using <{$module.directory}> and then overwrite the icons with the icons of your choice.

OK, ‘a’ and ‘b’ are insignificant for me because we're back to the case of displaying or not displaying, as I explained earlier.
So it's case "c" that interests me.

A code like that ? (May be it's not correct) :

<{if ($module.directory == "xmnews") && ($sublink.url = "action.php")}>
      <span class="fa-solid fa-square-plus">
<{else}>
      <span class="<{$sublink.icon}>">
<{/if}>
</span>

Humm there is a loop (<{foreach item=sublink...) so the code to overload is very bad cause I need to add a test on each submenu and all tests will be done at each "round".
It's better to overload directly the default icons... but how ?

Humm sorry to insist, but montuy, a smarty filter in you mind (as you suggest, display or not display the icons) is not fully fonctionnal to separate code / data and design. If I want to change the icons, (not remove but change), I need to modify the php file and that, it's a bad step backwards, just like BEFORE overloads, i.e. before 2003 (I think). Mamba's

The solutions are actually simple:
a) instead of using Smarty's output filter, we can use the hook just before template compilation (or even the one before).
b) modules and themes are specified in their configurations to tell the Smarty filter what to do.
We can even take the solution further and allow themes to have their own Smarty filters to replace the Xoops filters.

I respect the sacrosanct separation of HTML/CSS/JS.
And I've been following this principle for a very long time, including at WP.
To take this principle even further, I created a dynamic form generator script with an on-the-fly rendering viewer. I wrote a PHP class called fontawesome (at the time version 4). It's just an array, but it allows the filter to directly write the ASCII code of the font character. No " hanging around on the PHP side. The client wants to use dashicon because they prefer it, no problem, instead of calling the fontawesome class, I call the dashicon class.

Yes, I understand, you have modules with their own icons.

But it's not up to the core to adapt to modules or themes. It's not up to the themes to adapt to modules.

And it's a bit hypocritical to say that you shouldn't touch PHP and put everything in templates. If you want to adapt Xoops, themes, and modules to the client's needs, in the vast majority of cases, you have to get your hands dirty. Two simple cases: you change the label of a form field = you've forked the module. If you're not careful during the next update (in two years), you lose your changes. You want to modify a module's override TPL in the theme, okay, It's simple. But the next time you update the theme, if the theme has the overrides for this module natively, you'll lose your changes to the tpl file. And this also applies if, to simplify the interface, you want to set a select field to hidden, because the client will always have the box checked. The next time you update the module, goodbye to the changes.

The goal isn't to create forks of Xoops/Modules every time a site is created for a demanding client. Maintenance will quickly become unmanageable, or we'll end up with a site frozen in time.

In reality, it's the end client who has the final say. And if the end client wants to standardize all the icons on their site to their graphic charter, that's their right.
And Mamba's idea of ​​adding or modifying icons from the config file, regardless of the theme, is a very good idea that goes in this direction.
But the module must be able to override this system, and the theme can also override it to adapt to the client's final needs.

@alain01 you can create icon config file for modules in your theme, e.g. '/themes/mytheme/config/module_icons.php':

<?php
// themes/mytheme/config/module_icons.php
return [
      // Key is the module directory name (e.g., 'profile')
      'profile' => [
          'main' => 'fa-solid fa-id-card', // Overrides $modversion['icon']
          'sub' => [
              // Key matches the index in $modversion['sub']
              1 => 'fa-solid fa-user-pen', // Overrides $modversion['sub'][1]['icon']
              2 => 'fa-solid fa-cog',      // Overrides $modversion['sub'][2]['icon']
              // Add more sublink overrides as needed
          ],
      'news' => [
          'main' => 'fa-solid fa-newspaper',
          // 'sub' => [... ] // Optional sublink overrides for news
      ],
      //... overrides for other modules...
];

Then you can include this file in the theme_autorun.php. file and assign the return to Smarty as "iconOverrides"

$iconOverrides = include __DIR__ . '/config/module_icons.php';
$xoopsTpl->assign('iconOverrides', $iconOverrides);

Finally, when iterating through the modules in '/themes/mytheme/modules/system/blocks/system_block_mainmenu.tpl', you check if an override exists in the loaded theme configuration for the current module's directory name. If an override for the main icon ('main') is found, it replaces the $icon value retrieved from $modversion['icon']. Similarly, when processing sublinks, it checks for overrides in the 'sub' array using the corresponding index (e.g., 1, 2, 3) and replaces the $sublink['icon'] value if found. This ensures theme icons take precedence over module defaults.

<a class="nav-link" href="<{$xoops_url}>/modules/<{$module.directory}>/" title="<{$module.name}>">
    <span class="<{if isset($iconOverrides[$module.directory].main)}>
                       <{$iconOverrides[$module.directory].main}>
                   <{else}>
                       <{$module.icon}>
                   <{/if}>"></span>
    <{$module.name}>
</a>

and then a similar approach for the sublinks, something like:

<ul class="no-bullets">
    <{foreach item=sublink key=subKey from=$module.sublinks|default:null}>
        <li>
            <a class="dropdown" href="<{$sublink.url}>" title="<{$sublink.name}>">
                <span class="<{if isset($iconOverrides[$module.directory].sub[$subKey])}>
                                   <{$iconOverrides[$module.directory].sub[$subKey]}>
                               <{else}>
                                   <{$sublink.icon|default:''}>
                               <{/if}>"></span>
                <{$sublink.name}>
            </a>
        </li>
    <{/foreach}>
</ul>

Note: The code above was not tested, but it should give an idea how to approach it

Haaaaaaaa
Ok, thank you very much for this full explanation.
I understand the solution that you describe but I wouldn't have been able to invent it, find it.

I test it and come back ;-)

ok, I added a "]" on '/themes/mytheme/config/module_icons.php'

 // Add more sublink overrides as needed
          ],

=>

// Add more sublink overrides as needed
          ]],

but I get this error :

Warning: Undefined variable $xoopsTpl in file /themes/xbootstrap5/theme_autorun.php line 5
Error: Error: Call to a member function assign() on null in file /themes/xbootstrap5/theme_autorun.php line 5

file theme_autorun.php:

<?php
xoops_load('XoopsFormRendererBootstrap5');
XoopsFormRenderer::getInstance()->set(new XoopsFormRendererBootstrap5());
$iconOverrides = include __DIR__ . '/config/module_icons.php';
$xoopsTpl->assign('iconOverrides', $iconOverrides);

@alain01 yes, the ], was missing there. So the correct code is:

<?php

// themes/mytheme/config/module_icons.php
return [
    // Key is the module directory name (e.g., 'profile')
    'profile' => [
        'main' => 'fa-solid fa-id-card', // Overrides $modversion['icon']
        'sub'  => [
            // Key matches the index in $modversion['sub']
            1 => 'fa-solid fa-user-pen', // Overrides $modversion['sub'][1]['icon']
            2 => 'fa-solid fa-cog',      // Overrides $modversion['sub'][2]['icon']
            // Add more sublink overrides as needed
        ],
        'news' => [
            'main' => 'fa-solid fa-newspaper',
            // 'sub' => [... ] // Optional sublink overrides for news
        ],
        //... overrides for other modules...
    ],
];

Now to make all of this work, just add this line to "theme_autorun.php":

global $xoopsTpl;

So you have:

<?php

xoops_load('XoopsFormRendererBootstrap5');
XoopsFormRenderer::getInstance()->set(new XoopsFormRendererBootstrap5());

global $xoopsTpl;
$iconOverrides = include __DIR__ . '/config/module_icons.php';
$xoopsTpl->assign('iconOverrides', $iconOverrides);

Now this should override the original icons to the ones that you have defined in the /themes/mytheme/config/module_icons.php

If you comment out these 3 lines in

<?php

xoops_load('XoopsFormRendererBootstrap5');
XoopsFormRenderer::getInstance()->set(new XoopsFormRendererBootstrap5());

// global $xoopsTpl;
// $iconOverrides = include __DIR__ . '/config/module_icons.php';
// $xoopsTpl->assign('iconOverrides', $iconOverrides);

You'll be back to the original icons defined in the xoops_version.php file:

@mambax7

What about the idea of overriding based on $sublink.url. If some sublinks are only shown based on permissions (like a submit article link), I don't think the index number will be correct.

@ihackcode Good point! Any suggestions?

Would an associative array be better? We could use the url as the key and possibly add more items to the submenu array.

<?php

// themes/mytheme/config/module_icons.php
return [
    // Key is the module directory name (e.g., 'profile')
    'profile' => [
        'main' => 'fa-solid fa-id-card', // Overrides $modversion['icon']
        'sub'  => [
            // Key matches the index in $modversion['sub']
            'edituser.php' => ['icon' => 'fa-solid fa-user-pen'], // Overrides $modversion['sub'][1]['icon']
            'search.php' => ['icon' => 'fa-solid fa-cog'] ,     // Overrides $modversion['sub'][2]['icon']
            // Add more sublink overrides as needed
        ],
        'news' => [
            'main' => 'fa-solid fa-newspaper',
        ],
        //... overrides for other modules...
    ],
];

@ihackcode to make it work, we need to use the url value:

/themes/xbootstrap5/config/module_icons.php

<?php

return [
    'profile'   => [
        'main' => 'fa-solid fa-id-card',
        'sub'  => [
            // Use the URL as the key
            'edituser.php'   => 'fa-solid fa-pen',
            'search.php'     => 'fa-solid fa-magnifying-glass',
            'changepass.php' => 'fa-solid fa-rotate',
        ],
    ],
    'publisher' => [
        'main' => 'fa-solid fa-book',
        'sub'  => [
            'search.php'        => 'fa-solid fa-magnifying-glass',
            'submit.php?op=add' => 'fa-solid fa-calendar-days',
            'archive.php'       => 'fa-solid fa-pen',
        ],
    ],
];

/themes/xbootstrap5/modules/system/blocks/system_block_mainmenu.tpl

<ul class="nav flex-column">
    <li class="<{if !$block.nothome|default:''}>active<{/if}>">
        <a href="<{xoAppUrl ' '}>" title="<{$block.lang_home}>"> <span class="fa-solid fa-home"></span> <{$block.lang_home}>
        </a>
    </li>
    <{foreach item=module from=$block.modules|default:null}>
        <li class="nav-item<{if $module.highlight|default:false}> active<{/if}>">
            <a class="nav-link" href="<{$xoops_url}>/modules/<{$module.directory}>/" title="<{$module.name}>">
                <span class="<{if isset($iconOverrides[$module.directory].main)}>
                                   <{$iconOverrides[$module.directory].main}>
                               <{else}>
                                   <{$module.icon|default:'fa-solid fa-caret-right'}>
                               <{/if}>"></span>
                <{$module.name}>
            </a>

            <ul class="no-bullets">
                <{foreach item=sublink from=$module.sublinks|default:null}>
                    <{assign var=stripPrefix value=$xoops_url|cat:'/modules/'|cat:$module.directory|cat:'/'}>
                    <{assign var=subKey value=$sublink.url|replace:$stripPrefix:''}>
                    <li>
                        <a class="dropdown" href="<{$sublink.url}>" title="<{$sublink.name}>">
                <span class="<{if isset($iconOverrides[$module.directory].sub[$subKey])}>
                                   <{$iconOverrides[$module.directory].sub[$subKey]}>
                               <{else}>
                                   <{$sublink.icon|default:'fa-solid fa-caret-right'}>
                               <{/if}>"></span>
                            <{$sublink.name}>
                        </a>
                    </li>
                <{/foreach}>
            </ul>
        </li>
    <{/foreach}>
</ul>

Original icons for non-Admin:

Custom icons for non-Admin

Custom icons for Admin:

@ihackcode I didn't see your post, as I was busy testing and then writing my response, but it looks like great minds think alike, since we both came to the same conclusion to use url :)

@mambax7 Looks good.

Ok, I test again and come back ASAP.
lol my code was bad but the idea to use 'url" was good (see historical post) here :

<{if ($module.directory == "xmnews") && ($sublink.url = "action.php")}>

If some sublinks are only shown based on permissions (like a submit article link), I don't think the index number will be correct.

Nice think, ihackcode !

And thank you, Mamba and ihackcode to work again to find a solution.

Ok, now,the overload of icons works ! (override ?)

Thank you for your effort !

One suggestion (lol) for the next step in the theme_autorun.php

<{if $option-iconOverrides==1|default:0}>
      global $xoopsTpl;
      $iconOverrides = include __DIR__ . '/config/module_icons.php';
      $xoopsTpl->assign('iconOverrides', $iconOverrides);
<{/if}>">

where $option-iconOverrides will be an option in the preference admin interface

ok, I try another way:
I commented a line in module_icons.php like:

       ` //'search.php'     => 'fa-solid fa-bicycle',`

and it's diplay the default icon "fa-magnifying-glass"

So, in brief, in a module with this new feature:

• Default icons: All is ready
• Want to change all icons or some icons ? Use Overload icons with this new code and modify the /themes/mytheme/config/module_icons.php
• Want no icons: Delete/comment the line in the tpl file with span class code

My last question (I hope):
The solution is to use the URL. OK .
Is the code still correct if the website uses URL Rewriting?

@alain01 It should work, but in the future we'll be probably using custom id field for Sublinks like this, which should simplify a lot of things:

$modversion['hasMain'] = 1;
$modversion['icon'] = 'fa-solid fa-user';

if ($GLOBALS['xoopsUser']) {
    $modversion['sub'][] = [
        'id'   => 'editaccount',
        'name' => _PROFILE_MI_EDITACCOUNT,
        'url'  => 'edituser.php',
        'icon' => 'fa-solid fa-wrench',
    ];
    $modversion['sub'][] = [
        'id'   => 'search',
        'name' => _PROFILE_MI_PAGE_SEARCH,
        'url'  => 'search.php',
        'icon' => 'fa-solid fa-magnifying-glass',
    ];
    $modversion['sub'][] = [
        'id'   => 'changepass',
        'name' => _PROFILE_MI_CHANGEPASS,
        'url'  => 'changep anything.php',
        'icon' => 'fa-solid fa-key',
    ];
}

Ok, I understand.
After this long discussion, I discovered that we can overload value in PHP file (new directory "config").
It's true that I insisted, but thank you for suggesting a solution for overloading design elements that were in the code.
This solution, even if it can be improved, just needs to be improved, as you've already suggested with the use of IDs rather than urls.
I've just suggested a PR, to be used or deleted.