I'm currently learning how to style the Node-RED dashboard I'm creating for a 10.1" touchscreen IoT application. I'm using the popup nav menu/sidebar for navigation and would like to make the text labels larger, and control the text and font colors on the nav menu without affecting the rest of the dashboard.
I've been trying to find some reference information for what appropriate CSS selectors I should modify but I'm not sure where to start with this one. So far, I've identified the .md-toolbar-tools h1 selector to change the font size of the Current tab title on the titlebar, but the only other one I've found so far, body.nr-dashboard-theme changes all the font sizes and not only the sidebar menu. What is the best way to approach this?
HAve you checked your browser dev tools? That will show you everything you need. The sidebar uses custom tag names so you can use those but there are also md-sidenav- classes.
Yes, I'm currently using the browser dev tools to look at the css styles that are associated with the nav menu when I select one of the list elements in the browser window (NOTE: I am a bit of a n00b at using them so forgive me if I missed something obvious). So far, I've found the selector that controls the text size,md-list-item.md-no-proxy.md-button, md-list-item .md-no-style.md-button and I just found the variable that appears to be controlling the text color, --nr-dashboard-groupTextColor. But I'm still struggling to find the specific CSS selector to override to change the text color for just the nav-menu.
Or this to select just the text in the menu item - the above includes the icon.
#nr-dashboard > md-content > section > md-sidenav > md-list > md-list-item._md-button-wrap._md.nr-menu-item-active > div > div.md-list-item-inner > p
So to change the color including the icon of all menu entries, you should be able to use md-sidenav > md-list > md-list-item._md-button-wrap._md.nr-menu-item-active > div > div.md-list-item-inner.
Thank you all for the great responses! This can be complicated but I also like the simple solution. By any chance, is there a way to change the background color of the current tab's list item (highlight color)? I'm playing with it with the code from jbudd's post but Haven't found the right element yet.
Ok nevermind, TotallyInformation's CSS also worked to style the background of the currently selected item:
/* Highlight color for selected menu item */
md-list > md-list-item._md-button-wrap._md.nr-menu-item-active > div > div.md-list-item-inner{
background: var(--nr-dashboard-widgetColor);
}
I just (accidentally) copied only part of the text and noted that only the highlighted menu item was being changed (which worked to my advantage in this case)
Ok, one more thing. To actually change the font sizes for all the menu items, you need to remove the ._md.nr-menu-item-active selector. But I have a different problem I need to fix. I can get the font size and colors the way I want, but I need to make the menu items all taller to not chop off the text. I tried setting the height property like this:
/* Set Text size for nav menu */
md-sidenav > md-list > md-list-item._md-button-wrap > div > div.md-list-item-inner{
font-size: 30px;
height: 100px;
}
The height setting appears to get ignored as well as the margin and padding settings. Any thoughts on this one? I don't need the item to be taller than the text but at least add some padding.
When I tried your css it increased the size of the font and the amount of vertical space taken up by each menu item. So I don't know what you mean by
Edit:
That sort of suggests that you can style the active menu item or all menu items but not both, which is clearly not correct. You just need at least two CSS definitions with appropriate selectors.
It is hard to give any advise about how to customize the menu items cos most of the thing you are looking for, is not explained and for sure it is hard to explain. It is piece of art and the art is proven to be hard to explain in words.
So all the advises you can get may be technically correct but may be off target. Just because of the target is not defined.
But for sure - there is solution. The easiest one is the pen and paper one. You will draw you dream and with that, the CSS can be figured out. But your drawing of the dream must have all what the menu/menu items should do for you. All states , hover effects, etc ... all what you can see with default CSS. And why not more.
The pen ad paper can be digital one .. figma or whatever ui design program you can use...
That is the way I see the solution will be developed most effectively, no time waist, no guessing, just work on target.
@jbudd Thank you for pointing out the discrepancies in my explanation of the CSS. I'm still wrapping be head around the selector syntax.
@hotNipi Well said. Though I am working on a larger dashboard design, I'm mostly learning how to do some of the basic graphical manipulations as I continue to learn what I can and cannot do with the Node-RED dashboard. I'm no graphic designer but I'm slowly getting into this area of the field (my strong suite is embedded systems programming, not web design). But this is an area I've always wanted to venture into. I expect the dashboard I'm making will go through several iterations before getting to the final look (as I'm still figuring out the best way to display things). But I hope to create some kind of graphical template that can be used as a standard to style all of my page elements.
