Top menu // change font color

6mun commented

2025-04-29 04:57:59 +02:00

Environment

Custom menu version: 5.0.1
Nextcloud version: 31.0.4
PHP version: 8.3.20
Web server (Nginx, Apache2): dunno
Web browser and version (Firefox 80, Google Chrome 74, etc): all

Question

Bonjour Simon, and bravo for your wonderful creation !
one lill thing that I couldn't change in the settings : my top menu background color is dark, icons show fine in white, however the type is black - and therefore not readable ; I've already setup white in the color settings but typeface still stays black.
The only workaround I found was to install "Custom CSS" app on NextCloud and then add
.app-menu-entry--label {
color: #fff !important;
}
and that works so far ; however, NC is already pretty slow and am a bit reluctant to add modules/apps - is there a workaround to get those fonts in white cause I've tried a kama-sutra of solutions in the settings of side-menu but to no avail. (NB: am no coder at all, and my knowledge of CSS is the one from a toad)

Cheers & mercithanks in advance

### Environment * Custom menu version: 5.0.1 * Nextcloud version: 31.0.4 * PHP version: 8.3.20 * Web server (Nginx, Apache2): _dunno_ * Web browser and version (Firefox 80, Google Chrome 74, etc): all ### Question Bonjour Simon, and bravo for your wonderful creation ! one lill thing that I couldn't change in the settings : my top menu background color is dark, icons show fine in white, however the type is black - and therefore not readable ; I've already setup white in the color settings but typeface still stays black. The only workaround I found was to install "Custom CSS" app on NextCloud and then add .app-menu-entry--label { color: #fff !important; } and that works so far ; however, NC is already pretty slow and am a bit reluctant to add modules/apps - is there a workaround to get those fonts in white cause I've tried a kama-sutra of solutions in the settings of side-menu but to no avail. (NB: am no coder at all, and my knowledge of CSS is the one from a toad) Cheers & mercithanks in advance

6mun added the

question

label

2025-04-29 04:57:59 +02:00

deblan commented

2025-04-29 06:53:11 +02:00

Owner

Hi!

Thanks for your great feed back !

Could you share your configuration please (Support > Something went wrong > Show the configuration)?

Hi! Thanks for your great feed back ! Could you share your configuration please (`Support` > `Something went wrong` > `Show the configuration`)?

6mun commented

2025-04-29 06:58:33 +02:00

Author

sure ! here you go :

{
  "add-logo-link": true,
  "always-displayed": false,
  "apps-categories-custom": {
    "activity": "tools",
    "cospend": "tools",
    "announcementcenter": "office",
    "integration_openproject": "office",
    "collectives": "office",
    "forms": "office",
    "notes": "office",
    "tables": "office",
    "calendar": "organization",
    "appointments": "organization",
    "contacts": "organization",
    "news": "social",
    "memories": "multimedia",
    "photos": "multimedia",
    "music": "multimedia",
    "spreed": "cat4323493396723098"
  },
  "apps-order": [
    "dashboard",
    "files",
    "announcementcenter",
    "mail",
    "integration_openproject",
    "calendar",
    "collectives",
    "forms",
    "deck",
    "notes",
    "tables",
    "activity",
    "cospend",
    "appointments",
    "contacts",
    "spreed",
    "tasks",
    "news",
    "memories",
    "photos",
    "music"
  ],
  "background-color": "#192CE5",
  "background-color-opacity": 100,
  "background-color-to": "#2C31BF",
  "big-menu": false,
  "big-menu-hidden-apps": [],
  "categories-custom": [
    {
      "id": "cat4323493396723098",
      "en": "test-Sorting"
    }
  ],
  "categories-order": [
    "tools",
    "office",
    "organization",
    "social",
    "multimedia"
  ],
  "categories-order-type": "custom",
  "current-app-background-color": "#010154",
  "dark-mode-background-color": "#1200B1",
  "dark-mode-background-color-opacity": 47,
  "dark-mode-background-color-to": "#1424B8",
  "dark-mode-current-app-background-color": "#08004B",
  "dark-mode-icon-invert-filter": 0,
  "dark-mode-icon-opacity": 100,
  "dark-mode-loader-color": "#47b1eb",
  "dark-mode-opener": "side-menu-opener",
  "dark-mode-text-color": "#FFFFFF",
  "default-enabled": true,
  "display-logo": true,
  "external-sites-in-top-menu": false,
  "force": true,
  "force-light-icon": false,
  "icon-invert-filter": 0,
  "icon-opacity": 100,
  "loader-color": "#47b1eb",
  "loader-enabled": true,
  "opener": "side-menu-opener",
  "opener-hover": true,
  "opener-only": false,
  "opener-position": "after",
  "show-settings": false,
  "side-with-categories": false,
  "size-icon": "normal",
  "size-text": "normal",
  "target-blank-apps": [],
  "text-color": "#FFFFFF",
  "top-menu-apps": [
    "1",
    "dashboard",
    "files",
    "mail",
    "calendar",
    "deck",
    "tasks"
  ],
  "top-menu-mouse-over-hidden-label": 2,
  "top-side-menu-apps": [
    "1",
    "calendar"
  ],
  "use-avatar": false
}

sure ! here you go : ``` { "add-logo-link": true, "always-displayed": false, "apps-categories-custom": { "activity": "tools", "cospend": "tools", "announcementcenter": "office", "integration_openproject": "office", "collectives": "office", "forms": "office", "notes": "office", "tables": "office", "calendar": "organization", "appointments": "organization", "contacts": "organization", "news": "social", "memories": "multimedia", "photos": "multimedia", "music": "multimedia", "spreed": "cat4323493396723098" }, "apps-order": [ "dashboard", "files", "announcementcenter", "mail", "integration_openproject", "calendar", "collectives", "forms", "deck", "notes", "tables", "activity", "cospend", "appointments", "contacts", "spreed", "tasks", "news", "memories", "photos", "music" ], "background-color": "#192CE5", "background-color-opacity": 100, "background-color-to": "#2C31BF", "big-menu": false, "big-menu-hidden-apps": [], "categories-custom": [ { "id": "cat4323493396723098", "en": "test-Sorting" } ], "categories-order": [ "tools", "office", "organization", "social", "multimedia" ], "categories-order-type": "custom", "current-app-background-color": "#010154", "dark-mode-background-color": "#1200B1", "dark-mode-background-color-opacity": 47, "dark-mode-background-color-to": "#1424B8", "dark-mode-current-app-background-color": "#08004B", "dark-mode-icon-invert-filter": 0, "dark-mode-icon-opacity": 100, "dark-mode-loader-color": "#47b1eb", "dark-mode-opener": "side-menu-opener", "dark-mode-text-color": "#FFFFFF", "default-enabled": true, "display-logo": true, "external-sites-in-top-menu": false, "force": true, "force-light-icon": false, "icon-invert-filter": 0, "icon-opacity": 100, "loader-color": "#47b1eb", "loader-enabled": true, "opener": "side-menu-opener", "opener-hover": true, "opener-only": false, "opener-position": "after", "show-settings": false, "side-with-categories": false, "size-icon": "normal", "size-text": "normal", "target-blank-apps": [], "text-color": "#FFFFFF", "top-menu-apps": [ "1", "dashboard", "files", "mail", "calendar", "deck", "tasks" ], "top-menu-mouse-over-hidden-label": 2, "top-side-menu-apps": [ "1", "calendar" ], "use-avatar": false } ```

6mun commented

2025-04-29 07:07:58 +02:00

Author

btw, it's just 7am in France, your commitment is impressive 🏆💪👍⭐🌟

deblan commented

2025-04-29 09:06:52 +02:00

Owner

Can you share the content of https://<your nextcloud domain>/index.php/apps/side_menu/css/stylesheet?v=90 please?

Can you share the content of `https://<your nextcloud domain>/index.php/apps/side_menu/css/stylesheet?v=90` please?

deblan added the

WFB

label

2025-05-04 19:03:43 +02:00

DeOwl commented

2026-02-26 19:34:09 +01:00

Hello, I have the same issue. Here is my config

  "opener-only": "0",
  "opener-hover": "0",
  "display-logo": "1",
  "use-avatar": "0",
  "add-logo-link": "1",
  "show-settings": "0",
  "loader-enabled": "1",
  "always-displayed": "0",
  "force": "0",
  "big-menu": "0",
  "external-sites-in-top-menu": "0",
  "force-light-icon": "0",
  "side-with-categories": "0",
  "default-enabled": "1",
  "apps-categories-custom": {
    "photos": null,
    "contacts": null,
    "activity": null
  },
  "big-menu-hidden-apps": "[]",
  "apps-order": "[]",
  "categories-custom": "[]",
  "categories-order": "[]",
  "target-blank-apps": "[]",
  "top-menu-apps": "[]",
  "top-side-menu-apps": "[]",
  "background-color-opacity": "100",
  "dark-mode-background-color-opacity": "100",
  "dark-mode-icon-invert-filter": "0",
  "dark-mode-icon-opacity": "100",
  "icon-invert-filter": "0",
  "icon-opacity": "100",
  "top-menu-mouse-over-hidden-label": "0",
  "opener": "side-menu-opener",
  "dark-mode-opener": "side-menu-opener",
  "size-icon": "normal",
  "size-text": "normal",
  "opener-position": "before",
  "background-color": "#6ea68f",
  "background-color-to": "#8bb8a6",
  "current-app-background-color": "#588573",
  "text-color": "#000000",
  "loader-color": "#8bb8a6",
  "dark-mode-background-color": "#588573",
  "dark-mode-background-color-to": "#588573",
  "dark-mode-current-app-background-color": "#4d7565",
  "dark-mode-text-color": "#000000",
  "dark-mode-loader-color": "#8bb8a6",
  "categories-order-type": "default"
}

and here is my stylesheet:

:root {
    --side-menu-background-color: #588573ff;
--side-menu-background-color-to: #588573ff;
--side-menu-current-app-background-color: #4d7565;
--side-menu-loader-color: #8bb8a6;
--side-menu-text-color: #000000;
--side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg");
--side-menu-icon-invert-filter: 0%;
--side-menu-icon-opacity: 1;
}

@media (prefers-color-scheme: light) {
  :root {
    --side-menu-background-color: #588573ff;
--side-menu-background-color-to: #588573ff;
--side-menu-current-app-background-color: #4d7565;
--side-menu-loader-color: #8bb8a6;
--side-menu-text-color: #000000;
--side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg");
--side-menu-icon-invert-filter: 0%;
--side-menu-icon-opacity: 1;
  }
}

@media (prefers-color-scheme: dark) {
  --side-menu-background-color: #588573ff;
--side-menu-background-color-to: #588573ff;
--side-menu-current-app-background-color: #4d7565;
--side-menu-loader-color: #8bb8a6;
--side-menu-text-color: #000000;
--side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg");
--side-menu-icon-invert-filter: 0%;
--side-menu-icon-opacity: 1;
}

body[data-theme-dark], body[data-theme-dark-highcontrast] {
  --side-menu-background-color: #588573ff;
--side-menu-background-color-to: #588573ff;
--side-menu-current-app-background-color: #4d7565;
--side-menu-loader-color: #8bb8a6;
--side-menu-text-color: #000000;
--side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg");
--side-menu-icon-invert-filter: 0%;
--side-menu-icon-opacity: 1;
}

body[data-theme-light], body[data-theme-light-highcontrast] {
  --side-menu-background-color: #588573ff;
--side-menu-background-color-to: #588573ff;
--side-menu-current-app-background-color: #4d7565;
--side-menu-loader-color: #8bb8a6;
--side-menu-text-color: #000000;
--side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg");
--side-menu-icon-invert-filter: 0%;
--side-menu-icon-opacity: 1;
}



  .cm-app-icon svg {
    width: 20px;
    height: 20px;
  }

  img.cm-app-icon {
    width: 20px;
    height: 20px;
  }

Hello, I have the same issue. Here is my config ```{ "opener-only": "0", "opener-hover": "0", "display-logo": "1", "use-avatar": "0", "add-logo-link": "1", "show-settings": "0", "loader-enabled": "1", "always-displayed": "0", "force": "0", "big-menu": "0", "external-sites-in-top-menu": "0", "force-light-icon": "0", "side-with-categories": "0", "default-enabled": "1", "apps-categories-custom": { "photos": null, "contacts": null, "activity": null }, "big-menu-hidden-apps": "[]", "apps-order": "[]", "categories-custom": "[]", "categories-order": "[]", "target-blank-apps": "[]", "top-menu-apps": "[]", "top-side-menu-apps": "[]", "background-color-opacity": "100", "dark-mode-background-color-opacity": "100", "dark-mode-icon-invert-filter": "0", "dark-mode-icon-opacity": "100", "icon-invert-filter": "0", "icon-opacity": "100", "top-menu-mouse-over-hidden-label": "0", "opener": "side-menu-opener", "dark-mode-opener": "side-menu-opener", "size-icon": "normal", "size-text": "normal", "opener-position": "before", "background-color": "#6ea68f", "background-color-to": "#8bb8a6", "current-app-background-color": "#588573", "text-color": "#000000", "loader-color": "#8bb8a6", "dark-mode-background-color": "#588573", "dark-mode-background-color-to": "#588573", "dark-mode-current-app-background-color": "#4d7565", "dark-mode-text-color": "#000000", "dark-mode-loader-color": "#8bb8a6", "categories-order-type": "default" } ``` and here is my stylesheet: ``` :root { --side-menu-background-color: #588573ff; --side-menu-background-color-to: #588573ff; --side-menu-current-app-background-color: #4d7565; --side-menu-loader-color: #8bb8a6; --side-menu-text-color: #000000; --side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg"); --side-menu-icon-invert-filter: 0%; --side-menu-icon-opacity: 1; } @media (prefers-color-scheme: light) { :root { --side-menu-background-color: #588573ff; --side-menu-background-color-to: #588573ff; --side-menu-current-app-background-color: #4d7565; --side-menu-loader-color: #8bb8a6; --side-menu-text-color: #000000; --side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg"); --side-menu-icon-invert-filter: 0%; --side-menu-icon-opacity: 1; } } @media (prefers-color-scheme: dark) { --side-menu-background-color: #588573ff; --side-menu-background-color-to: #588573ff; --side-menu-current-app-background-color: #4d7565; --side-menu-loader-color: #8bb8a6; --side-menu-text-color: #000000; --side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg"); --side-menu-icon-invert-filter: 0%; --side-menu-icon-opacity: 1; } body[data-theme-dark], body[data-theme-dark-highcontrast] { --side-menu-background-color: #588573ff; --side-menu-background-color-to: #588573ff; --side-menu-current-app-background-color: #4d7565; --side-menu-loader-color: #8bb8a6; --side-menu-text-color: #000000; --side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg"); --side-menu-icon-invert-filter: 0%; --side-menu-icon-opacity: 1; } body[data-theme-light], body[data-theme-light-highcontrast] { --side-menu-background-color: #588573ff; --side-menu-background-color-to: #588573ff; --side-menu-current-app-background-color: #4d7565; --side-menu-loader-color: #8bb8a6; --side-menu-text-color: #000000; --side-menu-opener: url("/custom_apps/side_menu/img/side-menu-opener.svg"); --side-menu-icon-invert-filter: 0%; --side-menu-icon-opacity: 1; } .cm-app-icon svg { width: 20px; height: 20px; } img.cm-app-icon { width: 20px; height: 20px; } ```

Rows
Columns

Top menu // change font color #417

Environment

Question