Customize header/menu links color within a theme?

Hi all,

i just installed the latest version of piwik on a new server. It works fine and i just want to write my own theme. It’s a straight forward way i really like.

My Theme should only do the following things:

  • The header on all pages should be white (otherwise the logo looks crappy)
  • The text within the header should be black (not white because the background is already white)

How can i do this? I figured out to get the header background white:

@theme-color-header-background: #ffffff;

But how should i set the color of the menu text?

I am not sure if you have received a response yet, but the only way I could find to do it was in the default Morpheus theme here “Morpheus/stylesheets/uibase” then edit the _header.less file and after the “#root {” I added

nav {height:120px;} nav {background:#fff !important;} nav a {color: #999 !important;}

Then you have to delete the “/public_html/analytics/tmp/assets/asset_manager_global_css.css” file and refresh your page to see the changes.

Hi,

I’d recommend you not to edit the piwik files, but rather to create a theme containing the changes:
https://developer.piwik.org/guides/theming
That way they would survive an piwik update.

Good point. Thanks Lukas.

Hi guys,

thanks for your support. As I wrote, it was not my plan to edit piwik files - I was trying it with a own theme but I miss a LESS-Variable for the color in the navigation links. My workaround is set

nav a {color: #999 !important;}

It would be cool there is a var like: @theme-color-nav-color to set the color of the menu text.

And, the existing @theme-color-header-background: #ffffff; is not working on Login-Page. Is there an explanation for that?

Thank you

Hi there,

This is great feedback. As it is likely a bug/ or missing feature, could you please create a ticket in our tracker here: https://github.com/piwik/piwik/issues ? we will take a look at it. thanks

Hi Matthieu,

i created 2 tickets. One for the feature to include a less variable: Customizable LESS var for header/menu links color · Issue #12201 · piwik/piwik · GitHub
and one, which is likely a bug: Theme: @theme-color-header-background not working on login page · Issue #12202 · piwik/piwik · GitHub

Thx